/* ==========================================================================
   JobPilot — Design tokens
   Source unique de vérité du design system. Tout le CSS de l'application
   consomme ces variables : aucune couleur, taille ou durée en dur ailleurs.
   Thème sombre par défaut ; thème clair via [data-theme="light"].
   ========================================================================== */

/* --- Police : Inter (variable, self-hosted — pas de CDN) ----------------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* --- Police « papier » : Tinos, celle des PDF exportés (self-hosted) ------ */
@font-face {
  font-family: "Tinos";
  src: url("../fonts/Tinos-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tinos";
  src: url("../fonts/Tinos-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Couleurs : fondations (thème sombre, défaut) ---------------------- */
  --color-bg: #0e0e11;            /* fond de page */
  --color-surface: #17171c;       /* cards, panneaux */
  --color-surface-2: #1e1e24;     /* éléments surélevés : hover, inputs, menus */
  --color-surface-3: #26262e;     /* état actif / pressé */
  --color-border: #2a2a33;        /* bordures discrètes */
  --color-border-strong: #3a3a45; /* bordures focus de carte, séparateurs marqués */

  --color-text: #ededf0;          /* texte principal */
  --color-text-muted: #a1a1aa;    /* texte secondaire */
  --color-text-faint: #8b8b96;    /* placeholders, métadonnées (≥ 4.5:1 sur les surfaces) */
  --color-text-inverse: #0e0e11;  /* texte sur fond accent/score */

  /* --- Accent (indigo) ---------------------------------------------------- */
  --color-accent: #6e6af6;
  --color-accent-hover: #8b87ff;
  /* Fonds pleins portant du texte blanc (boutons, compteurs) : indigo AA (5.5:1). */
  --color-accent-solid: #5a56e0;
  --color-accent-solid-hover: #4844c9;
  --color-accent-subtle: rgba(110, 106, 246, 0.14);  /* fonds d'états actifs */
  --color-accent-border: rgba(110, 106, 246, 0.45);

  /* --- Sémantique --------------------------------------------------------- */
  --color-success: #34d399;
  --color-success-subtle: rgba(52, 211, 153, 0.14);
  --color-warning: #fbbf24;
  --color-warning-subtle: rgba(251, 191, 36, 0.14);
  --color-danger: #f87171;
  --color-danger-subtle: rgba(248, 113, 113, 0.14);
  --color-neutral: #71717a;
  --color-neutral-subtle: rgba(113, 113, 122, 0.18);

  /* --- Scores de matching (badges) ---------------------------------------- */
  --color-score-high: var(--color-success);        /* ≥ 75 */
  --color-score-high-bg: var(--color-success-subtle);
  --color-score-mid: var(--color-warning);         /* 50–74 */
  --color-score-mid-bg: var(--color-warning-subtle);
  --color-score-low: var(--color-text-muted);      /* < 50 (gris lisible, AA) */
  --color-score-low-bg: var(--color-neutral-subtle);

  /* --- Typographie --------------------------------------------------------- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;

  --text-xs: 0.75rem;    /* 12px — métadonnées, badges */
  --text-sm: 0.8125rem;  /* 13px — texte secondaire, tableaux denses */
  --text-base: 0.875rem; /* 14px — corps de texte */
  --text-md: 1rem;       /* 16px — emphase, inputs */
  --text-lg: 1.25rem;    /* 20px — titres de section */
  --text-xl: 1.5rem;     /* 24px — titres de page */
  --text-2xl: 2rem;      /* 32px — chiffres clés, hero */

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

  --leading-tight: 1.25;   /* titres */
  --leading-normal: 1.5;   /* UI */
  --leading-relaxed: 1.6;  /* paragraphes, brouillons d'email */

  /* --- Espacements (échelle 4px) ------------------------------------------ */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */

  /* --- Rayons --------------------------------------------------------------- */
  --radius-sm: 6px;    /* badges, boutons compacts */
  --radius-md: 10px;   /* boutons, inputs, cards internes */
  --radius-lg: 16px;   /* cards, modales */
  --radius-full: 999px;/* pills, avatars */

  /* --- Ombres (discrètes, 3 niveaux) ---------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.45);

  /* --- Mouvement (150–250 ms, easing naturel) -------------------------------- */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 250ms;

  /* --- Anneaux de focus (accessibilité) -------------------------------------- */
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);

  /* --- Aperçu du CV : feuille imprimée, identique dans les deux thèmes --------- */
  --cv-paper-bg: #ffffff;
  --cv-paper-text: #111111;
  --cv-paper-strong: #282828;
  --cv-paper-muted: #5f5f5f;
  --cv-paper-rule: #aaaaaa;
  --cv-paper-accent: #1e3a5f;  /* = cv_renderer.ACCENT_RGB */
  --font-serif: "Tinos", "Times New Roman", Georgia, serif;  /* métriques de Times New Roman */

  /* --- Mise en page ------------------------------------------------------------ */
  --sidebar-width: 232px;
  --topbar-height: 56px;
  --content-max-width: 1200px;

  color-scheme: dark;
}

/* ==========================================================================
   Thème clair — surcharge uniquement les couleurs
   ========================================================================== */
[data-theme="light"] {
  --color-bg: #f7f7f9;
  --color-surface: #ffffff;
  --color-surface-2: #f1f1f4;
  --color-surface-3: #e8e8ee;
  --color-border: #e3e3e9;
  --color-border-strong: #cdcdd7;

  --color-text: #18181c;
  --color-text-muted: #5d5d68;
  --color-text-faint: #696975;
  --color-text-inverse: #ffffff;

  --color-accent: #5a56e0;
  --color-accent-hover: #4844c9;
  --color-accent-subtle: rgba(90, 86, 224, 0.1);
  --color-accent-border: rgba(90, 86, 224, 0.4);

  --color-success: #08704d;
  --color-success-subtle: rgba(13, 148, 102, 0.12);
  --color-warning: #9a4508;
  --color-warning-subtle: rgba(180, 83, 9, 0.12);
  --color-danger: #c81e1e;
  --color-danger-subtle: rgba(220, 38, 38, 0.1);
  --color-neutral: #71717a;
  --color-neutral-subtle: rgba(113, 113, 122, 0.14);

  --shadow-1: 0 1px 2px rgba(24, 24, 28, 0.06);
  --shadow-2: 0 4px 12px rgba(24, 24, 28, 0.08);
  --shadow-3: 0 12px 32px rgba(24, 24, 28, 0.12);

  color-scheme: light;
}