/* QuiltCraft design tokens.
   Refined-but-evolved direction: same warm rose/cream/sage palette as the
   original SPA, layered with a proper type scale, spacing scale, and
   surface system suitable for a production product. */

:root {
  /* ---- Brand colors ---- */
  --color-cream:        #faf6f0;
  --color-warm:         #fff9f2;
  --color-rose:         #c9847a;
  --color-deep-rose:    #a05a52;
  --color-sage:         #7a9e7e;
  --color-deep-sage:    #5e7d62;
  --color-gold:         #c4933f;
  --color-dark:         #2e2218;
  --color-mid:          #6b5744;
  --color-soft:         #9b8770;
  --color-border:       #e8ddd0;
  --color-divider:      #efe6d9;
  --color-success:      #3f8060;
  --color-danger:       #b04a40;
  --color-info:         #5b7a99;

  /* ---- Surfaces & text ---- */
  --surface-page:       var(--color-cream);
  --surface-raised:     var(--color-warm);
  --surface-sunken:     #f3ebde;
  --surface-overlay:    rgba(46, 34, 24, 0.55);

  --ink-primary:        var(--color-dark);
  --ink-secondary:      var(--color-mid);
  --ink-muted:          var(--color-soft);
  --ink-on-rose:        #fff9f2;

  /* ---- Typography ---- */
  --font-serif:    'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-sans:     'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Type scale: 1.250 (minor third) */
  --fs-300: 0.8125rem;     /* 13 */
  --fs-400: 1rem;          /* 16 */
  --fs-500: 1.25rem;       /* 20 */
  --fs-600: 1.5625rem;     /* 25 */
  --fs-700: 1.953rem;      /* 31.25 */
  --fs-800: 2.441rem;      /* 39 */
  --fs-900: 3.052rem;      /* 48.8 */
  --fs-display: clamp(2.5rem, 4.2vw + 1rem, 4.25rem);

  --lh-tight: 1.15;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  --letter-tight:  -0.01em;
  --letter-normal: 0;
  --letter-wide:   0.04em;

  /* ---- Spacing scale (4px base) ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;

  /* ---- Radii, shadows, motion ---- */
  --radius-1:  4px;
  --radius-2:  8px;
  --radius-3:  12px;
  --radius-pill: 999px;

  --shadow-1:  0 1px 2px rgba(46, 34, 24, 0.05), 0 1px 1px rgba(46, 34, 24, 0.04);
  --shadow-2:  0 4px 12px rgba(46, 34, 24, 0.08);
  --shadow-3:  0 18px 40px -12px rgba(46, 34, 24, 0.22);

  --easing:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1:   120ms;
  --dur-2:   200ms;
  --dur-3:   320ms;

  /* ---- Layout ---- */
  --content-narrow:  44rem;
  --content-base:    64rem;
  --content-wide:    80rem;

  --focus-ring: 0 0 0 3px rgba(201, 132, 122, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}