/* Generated by frontend/scripts/sync-theme.mjs from frontend/src/shared/theme/: do not edit. */
/* ---- fonts.css */
/*
 * Geist and Geist Mono, served by the application (npm package "geist", SIL Open Font License):
 * no font CDN, the CSP stays strict (docs/decisions/0012-polices-icones-hebergees.md).
 * `@geist-fonts` is a Vite alias to node_modules/geist/dist/fonts (vite.config.ts); the copy
 * for the Jinja pages points to fonts/ next to it (scripts/sync-theme.mjs).
 */

@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens.css */
/*
 * Design tokens of the CML design system (design/_ds/.../tokens/), light theme under :root and
 * the dark theme of the mockup (design/Learner.dc.html) under [data-theme="dark"].
 *
 * Plain CSS, no Tailwind: the Jinja pages load a generated copy (backend/app/static/theme/).
 * The names are those of the mockup: `var(--text-muted)` in the mockup is `var(--text-muted)`
 * here, and the Tailwind colour `text-muted`, so the class `text-text-muted` (app/styles.css).
 */

:root {
  color-scheme: light;

  /* Palette */
  --white: #ffffff;
  --gray-50: #f7f7f5;
  --gray-100: #efefec;
  --gray-200: #e2e2de;
  --gray-300: #cbcbc6;
  --gray-400: #9c9c97;
  --gray-500: #6f6f6a;
  --gray-700: #3b3b38;
  --gray-900: #111111;
  --blue-50: #f0f2ff;
  --blue-100: #e0e5ff;
  --blue-200: #bcc7ff;
  --blue-300: #8e9fff;
  --blue-500: #3b5bff;
  --blue-600: #2c49e8;
  --blue-700: #1f37c2;
  --success: #12805c;
  --warning: #b86e00;
  --danger: #d92d20;
  --info: var(--blue-500);

  /* Roles */
  --bg: var(--white);
  --surface: var(--white);
  --surface-sunken: var(--gray-50);
  --surface-hover: var(--gray-100);
  --surface-inverse: var(--gray-900);
  --text: var(--gray-900);
  --text-muted: var(--gray-500);
  /* Below WCAG AA on white: decorative elements only (PLAN-DEV 2.5). */
  --text-subtle: var(--gray-400);
  --text-inverse: var(--white);
  --text-on-accent: var(--white);
  /*
   * Not in the design system (fiche 0018): text on a filled status colour and the border of a
   * form control, chosen to reach WCAG AA in both themes. Literal #111111: --gray-900 changes in
   * the dark theme.
   */
  --text-on-neutral: #111111;
  --text-on-success: var(--white);
  --text-on-warning: #111111;
  --text-on-danger: var(--white);
  --border-control: var(--gray-500);
  --accent: var(--blue-500);
  --accent-hover: var(--blue-600);
  --accent-press: var(--blue-700);
  --accent-soft: var(--blue-50);
  --border: var(--gray-200);
  --border-strong: var(--gray-900);
  --rule: var(--gray-900);
  --focus-ring: var(--blue-500);
  --link: var(--gray-900);
  --link-hover: var(--blue-500);

  /* Typography */
  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 40px;
  --fs-4xl: 56px;
  --fs-5xl: 80px;
  --fs-6xl: 120px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 0.95;
  --lh-snug: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;
  --tracking-tight: -0.045em;
  --tracking-snug: -0.02em;
  --tracking-wide: 0.04em;
  --text-display: var(--fw-semibold) var(--fs-5xl) / var(--lh-tight) var(--font-display);
  --text-h1: var(--fw-semibold) var(--fs-4xl) / var(--lh-tight) var(--font-display);
  --text-h2: var(--fw-semibold) var(--fs-3xl) / var(--lh-snug) var(--font-display);
  --text-h3: var(--fw-semibold) var(--fs-xl) / var(--lh-snug) var(--font-display);
  --text-body: var(--fw-regular) var(--fs-md) / var(--lh-normal) var(--font-sans);
  --text-small: var(--fw-regular) var(--fs-sm) / var(--lh-normal) var(--font-sans);
  --text-label: var(--fw-medium) var(--fs-sm) / 1 var(--font-sans);
  --text-meta: var(--fw-regular) var(--fs-xs) / 1.3 var(--font-mono);
  --text-code: var(--fw-regular) var(--fs-sm) / var(--lh-normal) var(--font-mono);

  /* Spacing, radii, borders, shadow, motion, grid, controls */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;
  --border-w: 1px;
  --border-w-rule: 2px;
  --shadow-none: none;
  /* Overlays only (dialogs, menus): nothing in the flow has a shadow. */
  --shadow-overlay: 0 12px 32px rgba(17, 17, 17, 0.1), 0 0 0 1px rgba(17, 17, 17, 0.9);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 80ms;
  --dur-base: 140ms;
  --dur-slow: 240ms;
  --grid-cols: 12;
  --grid-gutter: 24px;
  --container: 1200px;
  --control-h-sm: 30px;
  --control-h-md: 38px;
  --control-h-lg: 46px;
}

/* Dark theme of the mockup: same roles, greys inverted, blue unchanged. */
[data-theme='dark'] {
  color-scheme: dark;
  --bg: #141413;
  --surface: #141413;
  --surface-sunken: #1c1c1a;
  --surface-hover: #262624;
  --surface-inverse: #ededea;
  --text: #ededea;
  --text-muted: #a3a39e;
  --text-subtle: #6f6f6a;
  --text-inverse: #111111;
  --border: #2c2c29;
  --border-strong: #ededea;
  --rule: #ededea;
  --gray-50: #1c1c1a;
  --gray-100: #262624;
  --gray-200: #2c2c29;
  --gray-300: #3f3f3b;
  --gray-400: #6f6f6a;
  --gray-500: #a3a39e;
  --gray-700: #5a5a55;
  --gray-900: #45453f;
  --blue-200: #24306b;
  --blue-300: #3446a8;
  --accent-soft: #1a2242;
  --link: #ededea;
  --success: #2fa57a;
  --warning: #e0952a;
  --danger: #f04438;
  /* Added for contrast (fiche 0018): dark text on the lighter status colours of the dark theme. */
  --text-on-neutral: var(--white);
  --text-on-success: #111111;
  --text-on-warning: #111111;
  --text-on-danger: #111111;
  --border-control: #6f6f6a;
}

/*
 * shadcn/ui variables, pointing to the tokens above. Redeclared under [data-theme] so that a
 * themed sub-tree recomputes them. Careful: `--accent` keeps its design-system meaning (blue);
 * the shadcn "accent" (hover surface) is `--surface-hover`.
 */
:root,
[data-theme] {
  --background: var(--bg);
  --foreground: var(--text);
  --card: var(--surface);
  --card-foreground: var(--text);
  --popover: var(--surface);
  --popover-foreground: var(--text);
  --primary: var(--accent);
  --primary-foreground: var(--text-on-accent);
  --secondary: var(--surface);
  --secondary-foreground: var(--text);
  --muted: var(--surface-sunken);
  --muted-foreground: var(--text-muted);
  --accent-foreground: var(--text);
  --destructive: var(--danger);
  --input: var(--border-control);
  --ring: var(--focus-ring);
  --radius: var(--radius-sm);
}

/* ---- base.css */
/* Base styles of the design system (tokens/base.css), shared with the Jinja pages. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'tnum';
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}

p,
dl,
dd {
  margin: 0;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--link-hover);
}

code,
kbd,
pre {
  font-family: var(--font-mono);
}

::selection {
  background: var(--accent);
  color: var(--white);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}