/* ==========================================================================
   Atelier Web — Design tokens (V1, évolution de la palette V0 « Sillage »)
   Tier 1: primitives (raw values, never used directly in components)
   Tier 2: semantic tokens (what components consume)
   To rebrand the theme, change the primitives and the font stacks below.
   ========================================================================== */

@layer tokens, base, layout, components, sections, utilities;

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-var-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallbacks keep layout shift (CLS) close to zero while fonts load */
@font-face {
  font-family: "Schibsted Fallback";
  src: local("Arial");
  size-adjust: 101%;
  ascent-override: 96%;
  descent-override: 24%;
}

@font-face {
  font-family: "Instrument Fallback";
  src: local("Arial");
  size-adjust: 95%;
  ascent-override: 98%;
  descent-override: 25%;
}

@layer tokens {
  :root {
    /* ---- Tier 1 · Primitives ------------------------------------------- */
    /* V1 : encre plus profonde et plus bleue, gris légèrement bleutés */
    --ink-950: #0b1638;
    --ink-900: #111e47;
    --ink-800: #1b2a58;
    --ink-700: #283a6b;
    --slate-600: #46536e;
    --slate-500: #5d6a85;
    --slate-400: #8793ab;
    --slate-300: #bcc5d8;
    --slate-200: #d9e1f0;
    --slate-100: #e8eefa;
    --slate-50: #f2f6fe;
    --white: #ffffff;

    /* V1 : cobalt plus électrique et plus lumineux (6.9:1 avec le blanc) */
    --cobalt-800: #18229a;
    --cobalt-700: #1f2dcc;
    --cobalt-600: #2a3cf4;
    --cobalt-500: #4a5bff;
    --cobalt-300: #8b98ff;
    --cobalt-200: #c9cfff;
    --cobalt-100: #e6e9ff;
    --cobalt-50: #f2f4ff;

    /* V1 : surligneur plus chaud */
    --signal-400: #ffc83d;
    --signal-300: #ffdb7a;

    /* V1 : menthe, réservée aux surfaces de réassurance */
    --mint-600: #0e7468;
    --mint-100: #dcf3ef;
    --mint-50: #eefaf7;

    --green-600: #0b6e4b;
    --green-100: #dcf3e9;
    --red-600: #d3261c;
    --red-100: #fde5e3;

    /* ---- Tier 2 · Semantic (light context) ------------------------------ */
    --color-primary: var(--cobalt-600);
    --color-primary-hover: var(--cobalt-700);
    --color-primary-soft: var(--cobalt-100);
    --color-on-primary: var(--white);
    --color-secondary: var(--signal-400);
    --color-on-secondary: var(--ink-950);
    --color-accent: var(--mint-600);
    --color-accent-soft: var(--mint-100);
    --color-dark: var(--ink-950);
    --color-light: var(--slate-50);

    --color-bg: var(--white);
    --color-surface: var(--white);
    --color-surface-alt: var(--slate-50);
    --color-surface-raised: var(--white);
    --color-heading: var(--ink-950);
    --color-text: var(--slate-600);
    --color-muted: var(--slate-500);
    --color-border: var(--slate-200);
    --color-border-strong: var(--slate-300);
    --color-link: var(--cobalt-600);
    --color-mark: var(--signal-400);
    --color-focus: var(--cobalt-600);
    --color-success: var(--green-600);
    --color-success-soft: var(--green-100);
    --color-error: var(--red-600);
    --color-error-soft: var(--red-100);

    /* ---- Typography ----------------------------------------------------- */
    --font-display: "Schibsted Grotesk", "Schibsted Fallback", system-ui, sans-serif;
    --font-body: "Instrument Sans", "Instrument Fallback", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

    --text-display: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem);
    --text-h1: clamp(2.375rem, 1.62rem + 3vw, 4rem);
    --text-h2: clamp(1.875rem, 1.42rem + 1.8vw, 2.875rem);
    --text-h3: clamp(1.3125rem, 1.18rem + 0.55vw, 1.625rem);
    --text-h4: clamp(1.125rem, 1.07rem + 0.2vw, 1.25rem);
    --text-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
    --text-body: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);
    --text-small: 0.875rem;
    --text-caption: 0.75rem;

    --leading-display: 0.98;
    --leading-h1: 1.04;
    --leading-h2: 1.08;
    --leading-h3: 1.2;
    --leading-h4: 1.3;
    --leading-body: 1.65;
    --leading-tight: 1.4;

    --tracking-display: -0.04em;
    --tracking-h1: -0.035em;
    --tracking-h2: -0.03em;
    --tracking-h3: -0.015em;
    --tracking-caps: 0.08em;

    /* ---- Spacing (4px base) --------------------------------------------- */
    --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;
    --section-space: clamp(4.5rem, 2.8rem + 6.5vw, 8rem);
    --section-space-sm: clamp(3rem, 2rem + 4vw, 5rem);

    /* ---- Layout --------------------------------------------------------- */
    --container-width: 1240px;
    --container-wide: 1440px;
    --container-narrow: 760px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --header-height: 76px;

    /* ---- Shape ---------------------------------------------------------- */
    /* V1 : angles un peu plus doux, toujours nets */
    --radius-xs: 3px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 999px;
    --border-width: 1px;

    /* ---- Elevation (cool, ink-based — only for floating UI) -------------- */
    --shadow-sm: 0 1px 2px rgb(11 22 56 / 0.06), 0 1px 1px rgb(11 22 56 / 0.04);
    --shadow-md: 0 10px 28px -10px rgb(11 22 56 / 0.18), 0 2px 6px rgb(11 22 56 / 0.05);
    --shadow-lg: 0 30px 70px -24px rgb(11 22 56 / 0.3), 0 10px 20px -10px rgb(11 22 56 / 0.1);

    /* ---- Motion --------------------------------------------------------- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --transition-fast: 150ms var(--ease-out);
    --transition-base: 250ms var(--ease-out);
    --transition-slow: 500ms var(--ease-out);
    --reveal-distance: 16px;

    /* ---- Layers --------------------------------------------------------- */
    --z-dropdown: 40;
    --z-header: 50;
    --z-dock: 60;
    --z-menu: 70;
    --z-dialog: 80;

    color-scheme: light;
  }

  /* Inverted context: any section can switch to the ink palette.
     Components only read semantic tokens, so they adapt automatically. */
  .theme-ink {
    --color-bg: var(--ink-950);
    --color-surface: var(--ink-900);
    --color-surface-alt: var(--ink-900);
    --color-surface-raised: var(--ink-800);
    --color-heading: var(--white);
    --color-text: var(--slate-300);
    --color-muted: var(--slate-400);
    --color-border: rgb(255 255 255 / 0.12);
    --color-border-strong: rgb(255 255 255 / 0.24);
    --color-link: var(--cobalt-300);
    --color-primary-soft: rgb(139 152 255 / 0.14);
    --color-accent-soft: rgb(220 243 239 / 0.1);
    --color-focus: var(--signal-400);
    color-scheme: dark;
    color: var(--color-text);
  }

  .theme-cobalt {
    --color-bg: var(--cobalt-600);
    --color-surface: var(--cobalt-700);
    --color-surface-raised: var(--cobalt-700);
    --color-heading: var(--white);
    --color-text: var(--cobalt-100);
    --color-muted: var(--cobalt-200);
    --color-border: rgb(255 255 255 / 0.2);
    --color-border-strong: rgb(255 255 255 / 0.4);
    --color-link: var(--white);
    --color-focus: var(--signal-400);
    color-scheme: dark;
    color: var(--color-text);
  }
}