/* ==========================================================================
   Light Chop LLC — design tokens
   Dark (default) borrows GYST "Midnight"; light borrows GYST light theme.
   Accent is used in exactly ONE place: the nav logo mark wave stroke.
   ========================================================================== */
:root {
  color-scheme: dark light;

  /* ---- Color: dark (default) ---- */
  --color-page:          #000000;  /* page background */
  --color-surface:       #111111;  /* the single product card */
  --color-control:       #1C1C1C;  /* mobile menu sheet, pressed secondary button */
  --color-heading:       #FFFFFF;  /* h1–h3 */
  --color-text:          #F2EFE8;  /* body text, warm off-white (18.3:1 on page) */
  --color-text-muted:    #A3A09A;  /* secondary text (8.0:1 on page, 7.2:1 on surface) */
  --color-hairline:      #222222;  /* dividers, card border */
  --color-border-strong: #666666;  /* secondary button border (3.7:1, meets 3:1 UI) */
  --color-focus:         #F2EFE8;  /* focus ring: off-white, NOT the accent */
  --color-accent:        #E8C76A;  /* warm gold — logo mark only */
  --color-btn-bg:        #F2EFE8;  /* primary button fill */
  --color-btn-bg-hover:  #FFFFFF;
  --color-btn-text:      #000000;
  --chop-line-rgb:       242, 239, 232; /* hero field stroke color (alpha set in JS) */
  --chop-line-alpha:     0.075;

  /* ---- Typography ---- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-feature: "cv11", "ss01", "ss03"; /* Inter: single-storey a, open digits, curved r */

  --fs-eyebrow: 0.6875rem;                                  /* 11px — the ONLY small text */
  --fs-small:   0.9375rem;                                  /* 15px — footer/meta minimum */
  --fs-body:    1.0625rem;                                  /* 17px */
  --fs-lead:    clamp(1.1875rem, 0.35vw + 1.1rem, 1.375rem);/* 19px → 22px */
  --fs-h3:      clamp(1.375rem, 0.6vw + 1.2rem, 1.75rem);   /* 22px → 28px */
  --fs-h2:      clamp(2rem, 2.4vw + 1.25rem, 3.25rem);      /* 32px → 52px */
  --fs-h1:      clamp(2.75rem, 5.2vw + 1.25rem, 5.5rem);    /* 44px → 88px */

  --lh-tight:   1.04;  /* h1 */
  --lh-heading: 1.12;  /* h2, h3 */
  --lh-body:    1.6;
  --lh-lead:    1.5;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --ls-h1:      -0.035em;
  --ls-h2:      -0.025em;
  --ls-h3:      -0.015em;
  --ls-body:    -0.005em;
  --ls-eyebrow: 0.1em;

  --measure:    38rem;   /* max line length for paragraphs (~66ch) */
  --measure-h:  18ch;    /* max width for h1 */

  /* ---- Spacing (4px base) ---- */
  --space-1:  0.25rem;  /*   4px */
  --space-2:  0.5rem;   /*   8px */
  --space-3:  0.75rem;  /*  12px */
  --space-4:  1rem;     /*  16px */
  --space-5:  1.5rem;   /*  24px */
  --space-6:  2rem;     /*  32px */
  --space-7:  3rem;     /*  48px */
  --space-8:  4rem;     /*  64px */
  --space-9:  6rem;     /*  96px */
  --space-10: 8rem;     /* 128px */
  --space-11: 10rem;    /* 160px */

  --section-pad: var(--space-10);  /* vertical padding per section, overridden in §10 */

  /* ---- Radii ---- */
  --radius-panel:  12px;
  --radius-chip:   8px;
  --radius-button: 10px;
  --radius-focus:  12px;  /* focus ring around buttons (button radius + offset) */

  /* ---- Shadows (dark mode uses none; depth comes from surface color) ---- */
  --shadow-card:   none;
  --shadow-menu:   none;

  /* ---- Layout ---- */
  --container-max: 1100px;
  --gutter:        1.5rem;   /* 24px, overridden at breakpoints */
  --nav-height:    64px;

  /* ---- Motion ---- */
  --dur-fast:   220ms;
  --dur-base:   260ms;
  --dur-slow:   300ms;
  --ease-spring: cubic-bezier(0.22, 1.2, 0.36, 1);  /* short spring, ~2% overshoot */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* for opacity/color */
  --press-scale: 0.98;
  --lift:        -1px;

  /* ---- States ---- */
  --disabled-opacity: 0.5;
}

@media (prefers-color-scheme: light) {
  :root {
    --color-page:          #F5F5F0;
    --color-surface:       #E8E8E2;
    --color-control:       #DDDDD6;
    --color-heading:       #1A1A1A;
    --color-text:          #1A1A1A;  /* 15.9:1 on page, 14.2:1 on surface */
    --color-text-muted:    #57554F;  /* 6.8:1 on page, 6.1:1 on surface */
    --color-hairline:      #D4D4CC;
    --color-border-strong: #8A877F;  /* 3.3:1 */
    --color-focus:         #1A1A1A;
    --color-accent:        #C17635;  /* copper — logo mark only */
    --color-btn-bg:        #1A1A1A;
    --color-btn-bg-hover:  #000000;
    --color-btn-text:      #F5F5F0;
    --chop-line-rgb:       26, 26, 26;
    --chop-line-alpha:     0.07;

    --shadow-card: 0 1px 2px rgba(26, 26, 26, 0.04);
    --shadow-menu: 0 8px 24px rgba(26, 26, 26, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --press-scale: 1;
    --lift: 0px;
  }
}