/* ChopCue — Editorial Fresh design tokens.
   Single source of truth for every colour, radius, shadow and font on the
   site. Swap the five --brand-* values plus the two "surface family" hexes
   in each theme block and the whole site re-skins — see THEMING.md.
   Contrast ratios below are measured (WCAG 2.1 relative-luminance formula),
   not asserted. See prototypes/CONTRAST-REPORT.txt for the full pass. */

:root{
  /* ---- Brand — the five tokens a designer replaces ---- */
  --brand-primary:#6B705C;       /* darkest green from Cozy Neutral Retreat */
  --brand-primary-pressed:#565A4A;
  --brand-accent:#6B705C;
  --brand-support:#F3E7D4;       /* raised-surface tint */
  --brand-success:#1F7A4D;       /* white-on-success  5.32:1 */

  /* ---- Semantic — everything else references these ---- */
  --ink:#241C15;                 /* primary text        on paper  15.91:1 */
  --ink-2:#3A2E24;                /* secondary text      on paper  12.48:1 */
  --muted:#6B5D4F;                /* tertiary text       on paper   6.03:1 */
  --soft:#9C8672;                 /* faint text / icons  on paper   3.28:1 (large text / icons only) */
  --paper:#FFF8EE;                /* page background */
  --mist:var(--brand-support);    /* raised surface (cards) */
  --line:#E8D9C3;                 /* borders, dividers */
  --danger:#B3261E;               /* text/label          white-fill 6.54:1 */
  --danger-soft:#F7DEDA;
  --success-soft:#DCEEE1;
  --accent-soft:#B7B7A4;

  --on-brand:#FFFFFF;             /* text that sits on --brand-primary */
  --surface-page:var(--paper);
  --surface-card:#FFFFFF;
  --surface-sunken:var(--mist);
  --surface-focus:var(--ink);     /* dark chrome inside light theme, e.g. the cook-mode card */
  --on-surface-focus:#FFFFFF;

  --font-display:'Space Grotesk','Rubik',system-ui,sans-serif;
  --font-body:'DM Sans','Rubik',system-ui,sans-serif;
  --font-arabic:'Rubik',system-ui,sans-serif;

  --radius-chip:20px; --radius-card:20px; --radius-control:12px; --radius-round:999px;
  --shadow-card:0 24px 60px -28px rgba(36,28,21,.28);
  --shadow-photo:0 34px 80px -20px rgba(36,28,21,.38);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.22,1,.36,1);
}

/* Dark is a deliberately re-chosen counterpart, not an inversion. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand-primary:#6B705C; --brand-primary-pressed:#565A4A;
    --brand-accent:#A5A58D; --brand-support:#2A2119; --brand-success:#2E9E68;

    --ink:#F5ECDF; --ink-2:#E4D5BE; --muted:#B8A88C; --soft:#8F7E67;
    --paper:#1C1610; --mist:var(--brand-support); --line:#3D3226;
    --danger:#E5695A; --danger-soft:#3A2019;
    --success-soft:#22301F; --accent-soft:#303327;

    --on-brand:#FFFFFF;
    --surface-card:#231B14;
    --surface-focus:#000000; --on-surface-focus:#FFFFFF;
    --shadow-card:0 24px 60px -28px rgba(0,0,0,.55);
    --shadow-photo:0 34px 80px -20px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --brand-primary:#6B705C; --brand-primary-pressed:#565A4A;
  --brand-accent:#A5A58D; --brand-support:#2A2119; --brand-success:#2E9E68;

  --ink:#F5ECDF; --ink-2:#E4D5BE; --muted:#B8A88C; --soft:#8F7E67;
  --paper:#1C1610; --mist:var(--brand-support); --line:#3D3226;
  --danger:#E5695A; --danger-soft:#3A2019;
  --success-soft:#22301F; --accent-soft:#303327;

  --on-brand:#FFFFFF;
  --surface-card:#231B14;
  --surface-focus:#000000; --on-surface-focus:#FFFFFF;
  --shadow-card:0 24px 60px -28px rgba(0,0,0,.55);
  --shadow-photo:0 34px 80px -20px rgba(0,0,0,.6);
}

/* Fill/white-text-safe strong variants — used for solid badges, never
   dependent on theme (both already verified white-on-fill ≥ 4.5:1). */
:root{ --success-strong:#1F7A4D; --danger-strong:#B3261E; }

@font-face{font-family:'Rubik';src:url('assets/fonts/Rubik-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Rubik';src:url('assets/fonts/Rubik-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Rubik';src:url('assets/fonts/Rubik-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Rubik';src:url('assets/fonts/Rubik-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Rubik';src:url('assets/fonts/Rubik-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}