/*
 * sourdoughy.com — design tokens
 * Single source of truth for color, type, spacing, motion.
 * Loaded BEFORE all other CSS so other stylesheets can consume `var(--*)`.
 *
 * Colour philosophy: warm off-white / warm dark ("artisanal", not sterile).
 * No pure #fff or #000. Slight amber tint throughout.
 */

/* ----- 1. Self-hosted typography ---------------------------------------- */

/* Body & UI: Inter (full Latin + Cyrillic in one file each, served from /assets/fonts/) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Inter-Bold.woff2') format('woff2');
}

/* Display serif: Fraunces (Latin) + Source Serif 4 (Cyrillic fallback). */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Fraunces-400-latin.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Fraunces-400-latin-ext.woff2') format('woff2');
  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: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Fraunces-500-latin.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Fraunces-500-latin-ext.woff2') format('woff2');
  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: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Fraunces-600-latin.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Fraunces-600-latin-ext.woff2') format('woff2');
  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: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Fraunces-700-latin.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cyrillic display fallback (since Fraunces lacks Cyrillic): Source Serif 4 */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/SourceSerif4-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/SourceSerif4-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/SourceSerif4-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Numeric / monospace: JetBrains Mono */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
}

/* ----- 2. Light theme tokens ------------------------------------------- */
:root,
[data-theme="light"] {
  /* Surfaces */
  --bg:                 #fbfaf7;   /* warm off-white page */
  --bg-veil:            #f4f1ec;   /* secondary surface tint */
  --surface:            #ffffff;   /* card */
  --surface-elev:       #ffffff;   /* card with shadow */
  --surface-tinted:     #fdf6ec;   /* recipe / accent surface */

  /* Ink */
  --ink:                #1a1714;
  --ink-muted:          #6b6660;
  --ink-soft:           #9c968e;
  --ink-inverse:        #fdfbf6;

  /* Accent (sourdough crust amber) */
  --accent:             #c8801f;
  --accent-strong:      #b06d18;
  --accent-soft:        rgba(200, 128, 31, 0.12);
  --accent-hover:       #b06d18;

  /* Status colours (muted, never neon) */
  --success:            #4a7a4a;
  --success-soft:       rgba(74, 122, 74, 0.12);
  --warning:            #c87f24;
  --error:              #b04a32;
  --error-soft:         rgba(176, 74, 50, 0.10);

  /* Hairlines & focus */
  --border:             rgba(20, 18, 15, 0.08);
  --border-strong:      rgba(20, 18, 15, 0.16);
  --focus-ring:         rgba(200, 128, 31, 0.45);
  --focus-halo:         rgba(200, 128, 31, 0.18);

  /* Shadows: layered, soft */
  --shadow-sm:  0 1px 2px rgba(20,18,15,0.04), 0 1px 3px rgba(20,18,15,0.06);
  --shadow-md:  0 2px 4px rgba(20,18,15,0.04), 0 6px 16px rgba(20,18,15,0.06);
  --shadow-lg:  0 4px 8px rgba(20,18,15,0.05), 0 16px 40px rgba(20,18,15,0.10);
  --shadow-xl:  0 6px 12px rgba(20,18,15,0.06), 0 28px 60px rgba(20,18,15,0.14);

  /* Glass header */
  --glass-bg:   rgba(255, 254, 249, 0.80);
  --glass-border: rgba(20,18,15,0.08);
}

/* ----- 3. Dark theme tokens -------------------------------------------- */
[data-theme="dark"] {
  --bg:                 #15130f;
  --bg-veil:            #1a1814;
  --surface:            #1e1b16;
  --surface-elev:       #25221c;
  --surface-tinted:     #211c14;

  --ink:                #f5f1ea;
  --ink-muted:          #b8b1a4;
  --ink-soft:           #847e72;
  --ink-inverse:        #1a1714;

  --accent:             #e89a44;       /* slightly brighter amber for dark */
  --accent-strong:      #f0a958;
  --accent-soft:        rgba(232, 154, 68, 0.16);
  --accent-hover:       #f0a958;

  --success:            #82b58c;
  --success-soft:       rgba(130, 181, 140, 0.14);
  --warning:            #e89a44;
  --error:              #e88366;
  --error-soft:         rgba(232, 131, 102, 0.14);

  --border:             rgba(245, 241, 234, 0.08);
  --border-strong:      rgba(245, 241, 234, 0.18);
  --focus-ring:         rgba(232, 154, 68, 0.55);
  --focus-halo:         rgba(232, 154, 68, 0.20);

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.20);
  --shadow-md:  0 2px 4px rgba(0,0,0,0.30), 0 6px 16px rgba(0,0,0,0.30);
  --shadow-lg:  0 4px 8px rgba(0,0,0,0.40), 0 16px 40px rgba(0,0,0,0.40);
  --shadow-xl:  0 6px 12px rgba(0,0,0,0.40), 0 28px 60px rgba(0,0,0,0.50);

  --glass-bg:   rgba(21, 19, 15, 0.82);
  --glass-border: rgba(245,241,234,0.08);
}

/* Default to dark when user prefers it AND no explicit override */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:                 #15130f;
    --bg-veil:            #1a1814;
    --surface:            #1e1b16;
    --surface-elev:       #25221c;
    --surface-tinted:     #211c14;
    --ink:                #f5f1ea;
    --ink-muted:          #b8b1a4;
    --ink-soft:           #847e72;
    --ink-inverse:        #1a1714;
    --accent:             #e89a44;
    --accent-strong:      #f0a958;
    --accent-soft:        rgba(232, 154, 68, 0.16);
    --accent-hover:       #f0a958;
    --success:            #82b58c;
    --warning:            #e89a44;
    --error:              #e88366;
    --border:             rgba(245, 241, 234, 0.08);
    --border-strong:      rgba(245, 241, 234, 0.18);
    --focus-ring:         rgba(232, 154, 68, 0.55);
    --focus-halo:         rgba(232, 154, 68, 0.20);
    --shadow-sm:  0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.20);
    --shadow-md:  0 2px 4px rgba(0,0,0,0.30), 0 6px 16px rgba(0,0,0,0.30);
    --shadow-lg:  0 4px 8px rgba(0,0,0,0.40), 0 16px 40px rgba(0,0,0,0.40);
    --shadow-xl:  0 6px 12px rgba(0,0,0,0.40), 0 28px 60px rgba(0,0,0,0.50);
    --glass-bg:   rgba(21, 19, 15, 0.82);
    --glass-border: rgba(245,241,234,0.08);
  }
}

/* ----- 4. Type scale / spacing / radius / motion ----------------------- */
:root {
  /* Type families */
  --font-display: 'Fraunces', 'Source Serif 4', 'Literata', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;

  /* Modular type scale (1.25 ratio, base 16) */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-md:   1.125rem;   /* 18 */
  --text-lg:   1.25rem;    /* 20 */
  --text-xl:   1.5rem;     /* 24 */
  --text-2xl:  1.875rem;   /* 30 */
  --text-3xl:  2.25rem;    /* 36 */
  --text-4xl:  3rem;       /* 48 */
  --text-5xl:  3.75rem;    /* 60 */

  /* Line heights */
  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-body:  1.6;
  --lh-loose: 1.75;

  /* Spacing scale (4-8-12-16-24-32-48-64-96-128) */
  --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;
  --space-10: 8rem;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius:    12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur:         220ms;
  --dur-slow:    320ms;

  /* Layout */
  --header-h:    56px;
  --content-w:   42rem;     /* 672px reading width */
  --content-w-lg:64ch;
  --content-w-article: 68ch;
}

@media (max-width: 480px) {
  :root {
    --header-h: 52px;
  }
}

/* Smooth theme switch (no harsh flash) - everything that uses tokens transitions */
:root, html, body {
  transition: background-color var(--dur) var(--ease-in-out),
              color           var(--dur) var(--ease-in-out);
}
@media (prefers-reduced-motion: reduce) {
  :root, html, body { transition: none; }
}

/* Body baseline - applied site-wide */
html { color-scheme: light dark; }
[data-theme="dark"] { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }