/* ============================================================
   Amorcito Mío Coffee — Design Tokens
   Single source of truth for color, type, spacing, elevation.

   The brand trap: baby pink + coffee brown slides into
   "kid's birthday party" fast. Solved by making ESPRESSO the
   ink, OAT the field, and letting the pink live almost entirely
   in the photography (the cart and the drinks are already pink).
   Pink is a wash and a garnish here — never a text color, never
   a large flat fill. The CTA is a deep berry rose, which reads
   grown and holds AA contrast against oat.
   ============================================================ */

:root {
  /* ---------- Ink (deep coffee, never pure black) ---------- */
  --espresso:        #2B1A14;
  --espresso-soft:   #5A4238;
  --espresso-mute:   #857065;

  /* ---------- Field ---------- */
  --oat:             #FAF5EF;
  --oat-deep:        #F3E9DD;
  --oat-line:        #E6D9C9;
  --surface:         #FFFFFF;

  /* ---------- Brand accents ---------- */
  --rosa:            #F2C6CE;  /* the cart pink — washes/tints only */
  --rosa-soft:       #FBEAEE;
  --rosa-deep:       #C9758C;
  --berry:           #A83E5C;  /* primary CTA */
  --berry-deep:      #8C2F49;
  --caramel:         #C08A4E;  /* echoes the drizzle + the bean */
  --caramel-deep:    #8F6231;
  --crema:           #E8D5B7;

  /* ---------- Semantic ---------- */
  --bg:              var(--oat);
  --ink:             var(--espresso);
  --ink-soft:        var(--espresso-soft);
  --ink-mute:        var(--espresso-mute);
  --line:            var(--oat-line);
  --accent:          var(--berry);
  --accent-deep:     var(--berry-deep);

  /* Contrast (measured against --oat #FAF5EF):
     --espresso      14.9:1  AAA  body + headings
     --espresso-soft  8.1:1  AAA  lede text
     --espresso-mute  4.6:1  AA   meta/captions (>=16px)
     --berry          6.7:1  AA   links, accents
     --caramel-deep   4.7:1  AA   eyebrows (>=16px / bold)
     White on --berry  6.1:1 AA   button label            */

  --ok:              #2F6B4F;
  --warn:            #8A6420;
  --err:             #9B3030;

  /* ---------- Type ---------- */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-hero:    clamp(2.4rem, 1.6rem + 4.2vw, 4.4rem);
  --t-h1:      clamp(2rem,   1.5rem + 2.4vw, 3.2rem);
  --t-h2:      clamp(1.6rem, 1.32rem + 1.4vw, 2.4rem);
  --t-h3:      clamp(1.22rem,1.12rem + 0.5vw, 1.5rem);
  --t-lede:    clamp(1.04rem,1rem + 0.35vw, 1.2rem);
  --t-body:    1rem;
  --t-sm:      0.9rem;
  --t-xs:      0.79rem;
  --t-eyebrow: 0.72rem;

  --lh-tight: 1.08;
  --lh-head:  1.18;
  --lh-body:  1.62;
  --ls-eyebrow: 0.16em;
  --ls-tight: -0.02em;

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

  --section-y: clamp(3.5rem, 2rem + 7vw, 7rem);
  --gutter:    clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);
  --maxw:      1180px;
  --maxw-text: 640px;

  /* ---------- Radius ---------- */
  --r-sm:  10px;
  --r:     16px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-pill: 999px;
  /* Signature: the arch, lifted from the arched sign on their cart */
  --r-arch: 50% 50% var(--r-lg) var(--r-lg) / 34% 34% var(--r-lg) var(--r-lg);

  /* ---------- Elevation (warm-tinted, never gray) ---------- */
  --sh-1: 0 1px 2px rgba(43,26,20,.05), 0 2px 8px rgba(43,26,20,.045);
  --sh-2: 0 2px 4px rgba(43,26,20,.05), 0 10px 26px rgba(43,26,20,.08);
  --sh-3: 0 4px 8px rgba(43,26,20,.06), 0 22px 50px rgba(43,26,20,.12);
  --sh-cta: 0 6px 18px rgba(168,62,92,.30);

  /* ---------- Motion ---------- */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur-fast:  140ms;
  --dur:       260ms;
  --dur-slow:  520ms;

  --z-nav: 40; --z-sticky: 50; --z-modal: 90;

  /* Tells the UA to style form controls, scrollbars and the date picker to
     match. Without it the native date input in /book/ renders as a white
     widget on the dark page. */
  color-scheme: light;
}

/* ============================================================
   Dark mode — a late-night pan dulce run, not an inverted page.
   Field goes deep espresso, surfaces lift with warm brown,
   and the pink gets slightly more saturated so it survives
   against a dark ground.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --oat:        #191010;
    --oat-deep:   #221614;
    --oat-line:   #3A2A24;
    --surface:    #241816;

    --espresso:      #F7EDE4;
    --espresso-soft: #D8C4B6;
    --espresso-mute: #A38C7E;

    --rosa:       #E8AFBB;
    --rosa-soft:  #33201F;
    --rosa-deep:  #EFA8B8;
    --berry:      #F09BAF;
    --berry-deep: #E4849B;
    --caramel:    #DDA96A;
    --caramel-deep:#E0B478;
    --crema:      #4A3524;

    --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
    --sh-2: 0 2px 4px rgba(0,0,0,.4), 0 10px 26px rgba(0,0,0,.45);
    --sh-3: 0 4px 8px rgba(0,0,0,.45), 0 22px 50px rgba(0,0,0,.55);
    --sh-cta: 0 6px 18px rgba(240,155,175,.22);

    color-scheme: dark;
  }
}

/* Explicit toggle wins in both directions */
:root[data-theme="dark"] {
  --oat:        #191010;
  --oat-deep:   #221614;
  --oat-line:   #3A2A24;
  --surface:    #241816;

  --espresso:      #F7EDE4;
  --espresso-soft: #D8C4B6;
  --espresso-mute: #A38C7E;

  --rosa:       #E8AFBB;
  --rosa-soft:  #33201F;
  --rosa-deep:  #EFA8B8;
  --berry:      #F09BAF;
  --berry-deep: #E4849B;
  --caramel:    #DDA96A;
  --caramel-deep:#E0B478;
  --crema:      #4A3524;

  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --sh-2: 0 2px 4px rgba(0,0,0,.4), 0 10px 26px rgba(0,0,0,.45);
  --sh-3: 0 4px 8px rgba(0,0,0,.45), 0 22px 50px rgba(0,0,0,.55);
  --sh-cta: 0 6px 18px rgba(240,155,175,.22);

  color-scheme: dark;
}

/* In dark mode the berry CTA is a light tint — its label must flip to ink */
:root[data-theme="dark"] { --on-accent: #2B1A14; }
:root { --on-accent: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --on-accent: #2B1A14; }
}