/* Broadsheet design system tokens — ported from the design handoff.
   Fonts self-hosted; Google Fonts import replaced with @font-face. */

@font-face {
  font-family: 'Anton';
  src: url('/fonts/anton/anton-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PT Sans';
  src: url('/fonts/pt-sans/pt-sans-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PT Sans';
  src: url('/fonts/pt-sans/pt-sans-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PT Sans';
  src: url('/fonts/pt-sans/pt-sans-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'PT Sans';
  src: url('/fonts/pt-sans/pt-sans-latin-700italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Shantell Sans';
  src: url('/fonts/shantell-sans/shantell-sans-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Shantell Sans';
  src: url('/fonts/shantell-sans/shantell-sans-italic-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Base palette */
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #0088b0;
  --color-accent-2: #d6006c;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  /* Neutral ramp */
  --color-neutral-100: #f8f4f4;
  --color-neutral-150: #e8e7e6;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  /* Accent ramp (teal/cyan) */
  --color-accent-100: #e9f8ff;
  --color-accent-200: #cbeeff;
  --color-accent-300: #99e0ff;
  --color-accent-400: #62c5ee;
  --color-accent-500: #38a6cf;
  --color-accent-600: #1186ac;
  --color-accent-700: #006786;
  --color-accent-800: #004961;
  --color-accent-900: #0a303e;

  /* Accent-2 ramp (magenta) */
  --color-accent-2-100: #fff1f4;
  --color-accent-2-200: #ffdee6;
  --color-accent-2-300: #ffc0d0;
  --color-accent-2-400: #ff90b1;
  --color-accent-2-500: #ff458e;
  --color-accent-2-600: #d82071;
  --color-accent-2-700: #aa0b56;
  --color-accent-2-800: #790e3d;
  --color-accent-2-900: #4b1528;

  /* Process yellow — print treatment only, never UI */
  --color-process-yellow: #edbb00;

  /* Site-level type tokens */
  --shout: 'Anton', sans-serif;
  --scrawl: 'Shantell Sans', cursive;
  --font-heading: 'PT Sans', sans-serif;
  --font-body: 'PT Sans', sans-serif;
  --font-heading-weight: 700;

  /* Brand reds (OKLCH) */
  --maple: oklch(0.55 0.21 27);
  --maple-deep: oklch(0.4 0.18 27);
  --maple-tint: oklch(0.93 0.04 27);

  /* Maple-leaf gradient stops (containers.css .maple glyph) */
  --maple-gradient-1: #ff6a4f;
  --maple-gradient-2: #ec3013;
  --maple-gradient-3: #ae1800;
  --maple-gradient-4: #ff563c;
  --maple-gradient-5: #dd2b0f;
  --maple-gradient-6: #7c1405;

  /* Spacing scale */
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-6: 30px;
  --space-8: 40px;

  /* Semantic surface tokens */
  --receipt-paper: #fffdf5;

  /* Inverse ink — white on dark surfaces (light mode), dark on light surfaces (dark mode) */
  --maple-ink-inverse: #ffffff;

  /* Radii */
  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 4px;

  /* Elevation */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* Z-index scale */
  --z-nav: 50;
  --z-overlay: 60;
  --z-skip: 999;
  --z-modal: 1000;
}

/* ── Dark-mode layers ─────────────────────────────────────────────────
   Three-state pattern: system preference (media query) + explicit toggle
   (data-attribute).  Both blocks carry the same dark values; the attribute
   selector wins when a viewer toggles manually.  Only colour tokens are
   overridden — spacing, radii, and fonts stay untouched. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1a1918;
    --color-surface: #252322;
    --color-text: #e8e5e4;
    --color-accent: #38a6cf;
    --color-accent-2: #ff458e;
    --color-divider: color-mix(in srgb, #e8e5e4 16%, transparent);

    --color-neutral-100: #1e1c1c;
    --color-neutral-150: #252322;
    --color-neutral-200: #2d2b2b;
    --color-neutral-300: #3a3737;
    --color-neutral-400: #4d4a4a;
    --color-neutral-500: #9b9797;
    --color-neutral-600: #bab6b6;
    --color-neutral-700: #d7d3d3;
    --color-neutral-800: #eae7e7;
    --color-neutral-900: #f8f4f4;

    --color-accent-100: #0a303e;
    --color-accent-200: #004961;
    --color-accent-300: #006786;
    --color-accent-400: #1186ac;
    --color-accent-500: #38a6cf;
    --color-accent-600: #62c5ee;
    --color-accent-700: #99e0ff;
    --color-accent-800: #cbeeff;
    --color-accent-900: #e9f8ff;

    --color-accent-2-100: #4b1528;
    --color-accent-2-200: #790e3d;
    --color-accent-2-300: #aa0b56;
    --color-accent-2-400: #d82071;
    --color-accent-2-500: #ff458e;
    --color-accent-2-600: #ff90b1;
    --color-accent-2-700: #ffc0d0;
    --color-accent-2-800: #ffdee6;
    --color-accent-2-900: #fff1f4;

    --maple: oklch(0.65 0.21 27);
    --maple-deep: oklch(0.55 0.18 27);
    --maple-tint: oklch(0.25 0.04 27);

    --maple-gradient-1: #ff7e65;
    --maple-gradient-2: #f4421e;
    --maple-gradient-3: #c92200;
    --maple-gradient-4: #ff6d52;
    --maple-gradient-5: #e84016;
    --maple-gradient-6: #9a1e0a;

    --receipt-paper: #2a2820;

    --maple-ink-inverse: #201e1d;

    --shadow-sm: 0 1px 2px color-mix(in srgb, #000 20%, transparent);
    --shadow-md: 0 3px 10px color-mix(in srgb, #000 24%, transparent);
    --shadow-lg: 0 12px 32px color-mix(in srgb, #000 36%, transparent);
  }
}

:root[data-theme="dark"] {
  --color-bg: #1a1918;
  --color-surface: #252322;
  --color-text: #e8e5e4;
  --color-accent: #38a6cf;
  --color-accent-2: #ff458e;
  --color-divider: color-mix(in srgb, #e8e5e4 16%, transparent);

  --color-neutral-100: #1e1c1c;
  --color-neutral-150: #252322;
  --color-neutral-200: #2d2b2b;
  --color-neutral-300: #3a3737;
  --color-neutral-400: #4d4a4a;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #bab6b6;
  --color-neutral-700: #d7d3d3;
  --color-neutral-800: #eae7e7;
  --color-neutral-900: #f8f4f4;

  --color-accent-100: #0a303e;
  --color-accent-200: #004961;
  --color-accent-300: #006786;
  --color-accent-400: #1186ac;
  --color-accent-500: #38a6cf;
  --color-accent-600: #62c5ee;
  --color-accent-700: #99e0ff;
  --color-accent-800: #cbeeff;
  --color-accent-900: #e9f8ff;

  --color-accent-2-100: #4b1528;
  --color-accent-2-200: #790e3d;
  --color-accent-2-300: #aa0b56;
  --color-accent-2-400: #d82071;
  --color-accent-2-500: #ff458e;
  --color-accent-2-600: #ff90b1;
  --color-accent-2-700: #ffc0d0;
  --color-accent-2-800: #ffdee6;
  --color-accent-2-900: #fff1f4;

  --maple: oklch(0.65 0.21 27);
  --maple-deep: oklch(0.55 0.18 27);
  --maple-tint: oklch(0.25 0.04 27);

  --maple-gradient-1: #ff7e65;
  --maple-gradient-2: #f4421e;
  --maple-gradient-3: #c92200;
  --maple-gradient-4: #ff6d52;
  --maple-gradient-5: #e84016;
  --maple-gradient-6: #9a1e0a;

  --receipt-paper: #2a2820;

  --maple-ink-inverse: #201e1d;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #000 20%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #000 24%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #000 36%, transparent);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-900); }

[lang="fr"] { display: none; }
[data-lang="fr"] [lang="fr"] { display: revert; }
[data-lang="fr"] [lang="en"] { display: none; }