/* ==========================================================================
   Yaposhkin Sushi - design tokens
   Direction: "cold display case". The interface is cold (ice blue, white,
   brand cyan); the only warm colour on the page comes from the food itself.
   Brand cyan #20BAD8 is sampled from the merchant's own logo roundel.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../assets/fonts/schibsted-grotesk-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../assets/fonts/schibsted-grotesk-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- brand ramp, built around the logo cyan ------------------------- */
  --brand-50:  #EDFAFD;
  --brand-100: #D3F2FA;
  --brand-200: #AAE7F5;
  --brand-300: #6FD6EC;
  --brand-400: #35C2DE;
  --brand-500: #20BAD8;  /* sampled from the logo roundel */
  --brand-600: #1595B2;
  --brand-700: #147890;
  --brand-800: #176376;
  --brand-900: #185264;
  --brand-950: #0A3543;

  /* Accent semantics. Cyan at full strength only carries INK labels:
     #082A35 on #20BAD8 = 6.2:1, white on #20BAD8 would be 2.3:1 and fail. */
  --accent:        var(--brand-500);
  --accent-ink:    #082A35;
  --accent-quiet:  var(--brand-700);   /* 5.1:1 on paper, safe for link text */
  --accent-soft:      var(--brand-50);  /* tinted fill for selected/hover states */
  --accent-soft-line: var(--brand-200);
  --accent-soft-ink:  var(--brand-900);
  --focus-ring:       var(--brand-100);  /* the halo on a focused field */
  --track:            var(--brand-200);  /* unfilled progress track */
  --foot-bg:          var(--ink);

  /* --- neutrals (one cool family, no warm greys anywhere) ------------- */
  --ink:    #082A35;
  --ink-2:  #385966;
  --ink-3:  #5A7A87;   /* 4.6:1 on paper, the floor for body-size text */
  --paper:  #FCFEFF;
  --sheet:  #FFFFFF;
  --ice:    #EFF9FC;
  --ice-2:  #E1F2F8;
  --line:   #D3E7EE;
  --line-2: #BFDCE6;
  --shadow-hue: 197 60% 18%;
  --glow-1: var(--brand-100);   /* hero wash, light theme */
  --glow-2: var(--brand-50);

  --danger:  #B3261E;
  --danger-bg: #FDECEA;
  --success: #12705A;

  /* --- radii. One documented rule:
         pill for anything you press, 16px cards, 24px panels, 10px inputs. */
  --r-input: 10px;
  --r-card:  16px;
  --r-panel: 24px;
  --r-pill:  999px;

  /* --- type ----------------------------------------------------------- */
  --font-display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.88rem);
  --step-0:  clamp(0.97rem, 0.94rem + 0.15vw, 1.05rem);
  --step-1:  clamp(1.13rem, 1.06rem + 0.33vw, 1.31rem);
  --step-2:  clamp(1.35rem, 1.2rem + 0.72vw, 1.75rem);
  --step-3:  clamp(1.65rem, 1.35rem + 1.45vw, 2.45rem);
  --step-4:  clamp(2.1rem, 1.5rem + 2.9vw, 3.6rem);
  --step-5:  clamp(2.5rem, 1.55rem + 4.1vw, 4.35rem);

  /* --- spacing (4pt rhythm) ------------------------------------------- */
  --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;
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --measure: 62ch;
  --max: 1320px;

  /* --- elevation. Shadows are tinted to the page hue, never black. ----- */
  --e-1: 0 1px 2px hsl(var(--shadow-hue) / 0.06),
         0 2px 8px hsl(var(--shadow-hue) / 0.05);
  --e-2: 0 2px 4px hsl(var(--shadow-hue) / 0.06),
         0 10px 28px hsl(var(--shadow-hue) / 0.09);
  --e-3: 0 4px 10px hsl(var(--shadow-hue) / 0.08),
         0 24px 60px hsl(var(--shadow-hue) / 0.16);

  /* --- motion. One rhythm for the whole page. ------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 380ms;

  /* --- layering ------------------------------------------------------- */
  --z-rail: 20;
  --z-nav: 40;
  --z-bar: 50;
  --z-drawer: 60;
  --z-modal: 70;
  --z-toast: 80;

  --nav-h: 64px;
  color-scheme: light;
}

/* Dark mode keeps the brand cyan at full strength (7.9:1 on the dark paper)
   so the food photography stays the only warm thing on screen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ink:    #E8F5FA;
    --ink-2:  #A9C6D1;
    --ink-3:  #83A4B1;
    --paper:  #071A21;
    --sheet:  #0E2731;
    --ice:    #0E2731;
    --ice-2:  #14333F;
    --line:   #1B3F4C;
    --line-2: #27515F;
    --accent-quiet: var(--brand-300);
    --accent-soft: var(--brand-950);
    --accent-soft-line: var(--brand-800);
    --accent-soft-ink: var(--brand-100);
  --focus-ring: var(--brand-900);
  --track: var(--brand-800);
  --foot-bg: var(--sheet);
    --focus-ring: var(--brand-900);
    --track: var(--brand-800);
    --foot-bg: var(--sheet);
    --glow-1: color-mix(in srgb, var(--brand-500) 16%, transparent);
    --glow-2: color-mix(in srgb, var(--brand-700) 22%, transparent);
    --shadow-hue: 197 70% 3%;
    --e-1: 0 1px 2px hsl(var(--shadow-hue) / 0.5), 0 2px 8px hsl(var(--shadow-hue) / 0.4);
    --e-2: 0 2px 4px hsl(var(--shadow-hue) / 0.5), 0 10px 28px hsl(var(--shadow-hue) / 0.5);
    --e-3: 0 4px 10px hsl(var(--shadow-hue) / 0.5), 0 24px 60px hsl(var(--shadow-hue) / 0.6);
    --danger: #FF9B92;
    --danger-bg: #3A1512;
    --success: #6BD6B6;
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --ink:    #E8F5FA;
  --ink-2:  #A9C6D1;
  --ink-3:  #83A4B1;
  --paper:  #071A21;
  --sheet:  #0E2731;
  --ice:    #0E2731;
  --ice-2:  #14333F;
  --line:   #1B3F4C;
  --line-2: #27515F;
  --accent-quiet: var(--brand-300);
    --accent-soft: var(--brand-950);
    --accent-soft-line: var(--brand-800);
    --accent-soft-ink: var(--brand-100);
  --focus-ring: var(--brand-900);
  --track: var(--brand-800);
  --foot-bg: var(--sheet);
    --focus-ring: var(--brand-900);
    --track: var(--brand-800);
    --foot-bg: var(--sheet);
  --glow-1: color-mix(in srgb, var(--brand-500) 16%, transparent);
  --glow-2: color-mix(in srgb, var(--brand-700) 22%, transparent);
  --shadow-hue: 197 70% 3%;
  --e-1: 0 1px 2px hsl(var(--shadow-hue) / 0.5), 0 2px 8px hsl(var(--shadow-hue) / 0.4);
  --e-2: 0 2px 4px hsl(var(--shadow-hue) / 0.5), 0 10px 28px hsl(var(--shadow-hue) / 0.5);
  --e-3: 0 4px 10px hsl(var(--shadow-hue) / 0.5), 0 24px 60px hsl(var(--shadow-hue) / 0.6);
  --danger: #FF9B92;
  --danger-bg: #3A1512;
  --success: #6BD6B6;
  color-scheme: dark;
}