/**
 * tokens.css — design tokens for wmr-metaldur.fr (binding, see DESIGN.md).
 *
 * Semantic tokens only. Light values live on `:root`, dark values in the
 * `prefers-color-scheme: dark` media query. The explicit user toggle (see
 * src/components/ThemeToggle.astro) sets `data-theme="light|dark"` on <html>,
 * which overrides the OS preference here without changing the token names.
 *
 * Never hardcode colors in component CSS — add a token here instead, in
 * BOTH the light and the dark block.
 */

/* ---------------------------------------------------------------- *
 * Inter — self-hosted, latin subset (French accents included).      *
 * No external font CDN is allowed (see AGENTS.md → Design).         *
 * ---------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/files/fonts/inter/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/files/fonts/inter/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("/files/fonts/inter/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("/files/fonts/inter/inter-latin-700-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* -- Typography ------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-md: 1rem;       /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */

  --leading-tight: 1.25;
  --leading-normal: 1.6;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* -- Spacing (4px base) ------------------------------------------ */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 2.5rem;   /* 40px */
  --space-8: 3rem;     /* 48px */
  --space-9: 4rem;     /* 64px */
  --space-10: 5rem;    /* 80px */
  --space-11: 6rem;    /* 96px */
  --space-12: 8rem;    /* 128px */

  /* -- Radii -------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* -- Elevation ---------------------------------------------------- */
  --shadow-1: 0 1px 2px rgb(15 30 50 / 0.06), 0 1px 3px rgb(15 30 50 / 0.08);
  --shadow-2: 0 4px 8px rgb(15 30 50 / 0.08), 0 2px 4px rgb(15 30 50 / 0.06);
  --shadow-3: 0 12px 24px rgb(15 30 50 / 0.12), 0 4px 8px rgb(15 30 50 / 0.08);

  /* -- Breakpoints (reference values; media queries hardcode the px) - */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* -- Light color scheme ------------------------------------------- */
  /* Kept brand: the scraped site's own palette (see DESIGN.md §2).      */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-muted: #eeeeee;  /* vendored p-box teaser cards */
  --color-surface-raised: #ffffff;
  --color-text: #404040;          /* old body: rgba(0,0,0,.75) on white */
  --color-text-muted: #737373;
  --color-primary: #2765ea;
  --color-primary-strong: #144eca;
  /* large-fill surfaces keep the brand blue in light (same as token above) */
  --color-primary-hover: #3d74ec; /* hover fill ON primary surfaces     */
  --color-primary-fill: #2765ea;  /* large fills: top bar, footer       */
  --color-primary-soft: #e9f0fd;
  --color-on-primary: #ffffff;
  --color-accent: #e62600;
  --color-border: #d9d9d9;
  --color-border-strong: #b3b3b3;
  --color-focus-ring: #2765ea;

  /* Off-canvas mobile menu is always the mmenu "dark" theme (white text),
     independent of the color scheme — panel must stay dark in both.     */
  --color-menu-panel: #333333;
  --color-scrim: rgb(0 0 0 / 0.4); /* overlay behind the off-canvas menu */
  --color-caption-band: rgb(79 79 79 / 0.4); /* translucent slider caption band */
  --color-on-scrim: #ffffff;       /* icons/text on the scrim (over images) */
}

/* Explicit dark choice (ThemeToggle.astro) — overrides the OS preference. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0f141b;
  --color-surface: #161d26;
  --color-surface-raised: #1d2632;
  --color-text: #e8eef6;
  --color-text-muted: #97a6b8;
  --color-primary: #6aa5ff;
  --color-primary-strong: #8dbaff;
  --color-primary-soft: #1c2a44;
  --color-on-primary: #0a1526;
  --color-accent: #ff7a5c;
  --color-border: #2a3542;
  --color-border-strong: #3d4b5c;
  --color-focus-ring: #8dbaff;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.5);
  --shadow-2: 0 4px 8px rgb(0 0 0 / 0.45), 0 2px 4px rgb(0 0 0 / 0.4);
  --shadow-3: 0 12px 24px rgb(0 0 0 / 0.55), 0 4px 8px rgb(0 0 0 / 0.4);
}

/* OS dark preference, unless the user explicitly chose light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #0f141b;
    --color-surface: #161d26;
    --color-surface-muted: #161d26;
    --color-surface-raised: #1d2632;
    --color-text: #e8eef6;
    --color-text-muted: #97a6b8;
    --color-primary: #6aa5ff;
    --color-primary-strong: #8dbaff;
    --color-primary-hover: #8dbaff;
    --color-primary-fill: #1c3f8f;  /* deep brand blue, readable w/ white text */
    --color-primary-soft: #1c2a44;
    --color-on-primary: #ffffff;
    --color-accent: #ff7a5c;
    --color-border: #2a3542;
    --color-border-strong: #3d4b5c;
    --color-focus-ring: #8dbaff;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.5);
    --shadow-2: 0 4px 8px rgb(0 0 0 / 0.45), 0 2px 4px rgb(0 0 0 / 0.4);
    --shadow-3: 0 12px 24px rgb(0 0 0 / 0.55), 0 4px 8px rgb(0 0 0 / 0.4);

    --color-menu-panel: #1d2632;
    --color-scrim: rgb(0 0 0 / 0.4);
    --color-caption-band: rgb(79 79 79 / 0.4);
    --color-on-scrim: #ffffff;
  }
}