/* Tokens : couleurs exactes du thème 21st « ghjhb-j » (mode clair), dérivés par color-mix sans nouvelle teinte.
   Contrastes et placement : docs/recherche/references-21st.md §1. */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --background: #97d0e3;
  --foreground: #0f1419;
  --card: #f7f8f8;
  --popover: #fff;
  --primary: #1e9df1;
  --secondary: #0f1419;
  --muted: #E5E5E6;
  --accent: #E3ECF6;
  --destructive: #f4212e;
  --border: #e1eaef;
  --input: #f7f9fa;
  --ring: #1da1f2;
  --chart-1: #1e9df1;
  --chart-2: #00b87a;
  --chart-3: #f7b928;
  --chart-4: #17bf63;
  --chart-5: #e0245e;
  --sidebar: #f7f8f8;
  --sidebar-border: #e1e8ed;

  /* Dérivés */
  --text-muted: color-mix(in srgb, var(--foreground) 65%, #fff);     /* #63666a, 5.77:1 sur blanc */
  --border-strong: color-mix(in srgb, var(--foreground) 50%, #fff);  /* #878a8c, 3.47:1 : bord des champs */
  --danger-text: var(--chart-5);                                      /* #e0245e : texte d'erreur, bouton supprimer */

  /* Jaune pour les marques de graphique : #f7b928 sort de la bande de luminosité du validateur dataviz
     (L 0.82) ; mélangé à 75 % avec le texte du thème (#bd9024), la palette des 4 métiers passe les contrôles. */
  --chart-3-mark: color-mix(in srgb, var(--chart-3) 75%, var(--foreground));

  /* Métiers : la couleur suit le métier, jamais le rang */
  --trade-plomberie: var(--chart-1);
  --trade-chauffage: var(--chart-5);
  --trade-climatisation: var(--chart-2);
  --trade-electricite: var(--chart-3-mark);

  /* Rayons concentriques : 1.3rem pour le shell et les cartes uniquement */
  --radius: 1.3rem;
  --radius-md: calc(var(--radius) - 8px);
  --radius-sm: calc(var(--radius) - 10.8px);
  --radius-xs: 6px;

  --shadow-float: 0 8px 24px -6px rgb(15 20 25 / .16), 0 0 0 1px var(--border);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-snap: cubic-bezier(.2, .9, .25, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --dur-press: 120ms;
  --dur-pop: 180ms;
  --dur-modal: 240ms;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-12: .75rem;
  --fs-14: .875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-48: 3rem;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  --sidebar-w: 244px;
  --rail-w: 64px;
  --header-h: 56px;
  --row-h: 36px;
  --control-h: 36px;
  --frame: 8px;
  --content-max: 1440px;

  --z-sticky: 10;
  --z-header: 20;
  --z-overlay: 40;

  color-scheme: light;
}

@media (pointer: coarse) {
  :root { --row-h: 44px; --control-h: 44px; }
}

/* Tons de statut : point coloré + libellé #0f1419 + fond teinté à 12 % */
[data-tone] { --tint: color-mix(in srgb, var(--tone) 12%, #fff); }
[data-tone="draft"] { --tone: var(--border-strong); --tint: var(--muted); }
[data-tone="info"] { --tone: var(--primary); }
[data-tone="good"] { --tone: var(--chart-2); }
[data-tone="warn"] { --tone: var(--chart-3); }
[data-tone="bad"] { --tone: var(--destructive); }