/* ==========================================================================
   DEV'n DONE Design System v1.0 — Tokens
   Source de vérité : charte graphique v1.1 (brand/brand-guidelines.html).
   Aucune valeur de couleur, de taille ou de durée ne doit être écrite en dur
   ailleurs que dans ce fichier.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------ *
   * 1. Couleurs — primitives (verrouillées)
   * ------------------------------------------------------------------ */
  --dnd-night: #0A0D11;
  --dnd-night-raised: #11171F;   /* officiel depuis la charte v1.1 */
  --dnd-ivory: #FAFAF8;
  --dnd-orange: #FF8A00;
  --dnd-mint: #00E5B8;

  /* Variations fonctionnelles dérivées (pas des couleurs de marque) */
  --dnd-ivory-72: #B7B8B7;       /* 9.78 : 1 sur Night */
  --dnd-ivory-56: #909292;       /* 6.22 : 1 sur Night */
  --dnd-ivory-44: #747577;       /* 4.22 : 1 — bordure de champ sur Night */
  --dnd-ivory-14: #2C2E31;       /* filet sur Night (décoratif) */
  --dnd-night-72: #4D4F52;       /* 7.86 : 1 sur Ivoire */
  --dnd-night-60: #6A6C6D;       /* 5.05 : 1 sur Ivoire */
  --dnd-night-45: #8E8F90;       /* 3.10 : 1 — bordure de champ sur Ivoire */
  --dnd-night-14: #D8D9D8;       /* filet sur Ivoire (décoratif) */
  --dnd-ivory-sunk: #F0F0EE;     /* surface enfoncée sur Ivoire */
  --dnd-orange-hover: #FF9A24;   /* Night dessus : 9.18 : 1 */
  --dnd-orange-active: #E67C00;  /* Night dessus : 6.72 : 1 */
  --dnd-orange-ink: #A85600;     /* orange en texte sur Ivoire : 5.03 : 1 */
  --dnd-mint-ink: #007A62;       /* mint en texte sur Ivoire : 5.07 : 1 */

  /* Feedback — proposé en v1.0, à valider */
  --dnd-error: #FF6B6B;          /* 7.02 : 1 sur Night */
  --dnd-error-ink: #B42318;      /* 6.29 : 1 sur Ivoire */

  /* ------------------------------------------------------------------ *
   * 3. Typographie
   * ------------------------------------------------------------------ */
  --font-display: "Lilita One", "Arial Rounded MT Bold", "Arial Black", sans-serif;
  --font-ui: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

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

  /* Échelle fluide : min (360 px) → max (1440 px) */
  --text-display: clamp(4rem, 2.333rem + 7.407vw, 9rem);        /* 64 → 144 */
  --text-h1: clamp(2.75rem, 2rem + 3.333vw, 5rem);          /* 44 → 80 */
  --text-h2: clamp(2rem, 1.667rem + 1.481vw, 3rem);             /* 32 → 48 */
  --text-h3: clamp(1.375rem, 1.25rem + 0.556vw, 1.75rem);      /* 22 → 28 */
  --text-body-lg: clamp(1.125rem, 1.083rem + 0.185vw, 1.25rem); /* 18 → 20 */
  --text-body: clamp(1rem, 0.979rem + 0.093vw, 1.0625rem);      /* 16 → 17 */
  --text-body-sm: 0.875rem;                                   /* 14 */
  --text-label: 0.75rem;                                      /* 12 */
  --text-button: 0.9375rem;                                   /* 15 */
  --text-tech: 0.875rem;                                      /* 14 */
  --text-caption: 0.75rem;                                    /* 12 */

  --leading-display: 0.88;
  --leading-h1: 0.95;
  --leading-h2: 1;
  --leading-h3: 1.1;
  --leading-body: 1.65;
  --leading-body-lg: 1.6;
  --leading-tight: 1.2;

  --tracking-display: -0.01em;
  --tracking-h1: -0.005em;
  --tracking-label: 0.16em;
  --tracking-button: 0.02em;
  --tracking-caption: 0.02em;

  --measure: 42.5rem;   /* 680 px ≈ 65 caractères */

  /* ------------------------------------------------------------------ *
   * 4. Espacement — base 8 (4 pour les ajustements fins)
   * ------------------------------------------------------------------ */
  --space-1: 0.25rem;   /*   4 */
  --space-2: 0.5rem;    /*   8 */
  --space-3: 0.75rem;   /*  12 */
  --space-4: 1rem;      /*  16 */
  --space-5: 1.5rem;    /*  24 */
  --space-6: 2rem;      /*  32 */
  --space-7: 3rem;      /*  48 */
  --space-8: 4rem;      /*  64 */
  --space-9: 6rem;      /*  96 */
  --space-10: 8rem;     /* 128 */
  --space-11: 10rem;    /* 160 */

  --section-y: clamp(4.5rem, 3.333rem + 5.185vw, 8rem);   /* 72 → 128 */
  --gutter: clamp(1.25rem, 5vw, 5rem);                 /* 20 → 80 */
  --col-gap: clamp(1rem, 0.833rem + 0.741vw, 1.5rem);    /* 16 → 24 */
  --container: 82.5rem;                                /* 1320 */

  /* ------------------------------------------------------------------ *
   * 5. Formes
   * ------------------------------------------------------------------ */
  --radius-xs: 3px;     /* verdicts, tags de statut */
  --radius-sm: 4px;     /* badges */
  --radius-md: 10px;    /* boutons, champs */
  --radius-lg: 16px;    /* panneaux, cartes fonctionnelles */
  --radius-tile: 22%;   /* tuile d'icône — repris du monogramme */
  --radius-full: 999px; /* pastilles uniquement */

  --border-hair: 1px;
  --border-ui: 1.5px;
  --border-accent: 3px;

  --slash-angle: -20deg;

  /* Élévation : par la surface, pas par l'ombre.
     Une seule ombre, réservée aux calques flottants (menu, dialogue). */
  --shadow-overlay: 0 18px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--dnd-ivory-14);

  /* ------------------------------------------------------------------ *
   * 6. Focus
   * ------------------------------------------------------------------ */
  --focus-ring: 2px solid var(--focus);
  --focus-offset: 3px;

  /* ------------------------------------------------------------------ *
   * 7. Mouvement
   * ------------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-micro: 120ms;
  --duration-base: 200ms;
  --duration-reveal: 320ms;
  --duration-scene: 480ms;
  --shift-reveal: 12px;

  /* ------------------------------------------------------------------ *
   * 8. Icônes & calques
   * ------------------------------------------------------------------ */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-stroke: 2;

  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 50;
  --z-overlay: 80;
  --z-modal: 90;
  --z-toast: 100;

  /* Breakpoints (référence — les media queries ne lisent pas les variables)
     mobile < 640 · tablette 640–1023 · desktop 1024–1439 · large ≥ 1440 */
  --bp-tablet: 640px;
  --bp-desktop: 1024px;
  --bp-large: 1440px;
}

/* --------------------------------------------------------------------- *
 * Couleurs sémantiques & contextes de surface
 * Les composants n'utilisent QUE ces variables. Chaque contexte redéclare
 * le jeu COMPLET : un contexte imbriqué (Night dans Ivoire) n'hérite de rien.
 * --------------------------------------------------------------------- */

:root,
.surface-night,
.surface-raised {
  --bg: var(--dnd-night);
  --surface: var(--dnd-night-raised);
  --text: var(--dnd-ivory);
  --text-muted: var(--dnd-ivory-72);
  --text-subtle: var(--dnd-ivory-56);
  --line: var(--dnd-ivory-14);
  --line-strong: var(--dnd-ivory-44);
  --field-bg: var(--dnd-night);
  --field-border: var(--dnd-ivory-44);

  --action: var(--dnd-orange);           /* fond de bouton primaire */
  --action-hover: var(--dnd-orange-hover);
  --action-active: var(--dnd-orange-active);
  --on-action: var(--dnd-night);
  --accent-text: var(--dnd-orange);      /* orange utilisé comme texte */
  --accent-deco: var(--dnd-orange);      /* trait, slash, filet */

  --signal-text: var(--dnd-mint);
  --error: var(--dnd-error);
  --focus: var(--dnd-orange);
}

.surface-raised {
  --bg: var(--dnd-night-raised);
  --surface: var(--dnd-night);
}

.surface-ivory {
  --bg: var(--dnd-ivory);
  --surface: var(--dnd-ivory-sunk);
  --text: var(--dnd-night);
  --text-muted: var(--dnd-night-72);
  --text-subtle: var(--dnd-night-60);
  --line: var(--dnd-night-14);
  --line-strong: var(--dnd-night-45);
  --field-bg: var(--dnd-ivory);
  --field-border: var(--dnd-night-45);

  /* Sur Ivoire, l'orange ne tient ni en texte ni en silhouette (2.26 : 1).
     Le bouton primaire devient Night, l'orange reste décoratif. */
  --action: var(--dnd-night);
  --action-hover: var(--dnd-night-raised);
  --action-active: #000000;
  --on-action: var(--dnd-ivory);
  --accent-text: var(--dnd-orange-ink);
  --accent-deco: var(--dnd-orange);

  --signal-text: var(--dnd-mint-ink);
  --error: var(--dnd-error-ink);
  --focus: var(--dnd-orange-ink);
}

/* Bandeau d'appel à l'action : une fois par page au maximum */
.surface-orange {
  --bg: var(--dnd-orange);
  --surface: var(--dnd-orange-hover);
  --text: var(--dnd-night);
  --text-muted: var(--dnd-night);
  --text-subtle: var(--dnd-night-72);
  --line: rgba(10, 13, 17, 0.25);
  --line-strong: var(--dnd-night);
  --field-bg: var(--dnd-ivory);
  --field-border: var(--dnd-night);

  --action: var(--dnd-night);
  --action-hover: var(--dnd-night-raised);
  --action-active: #000000;
  --on-action: var(--dnd-ivory);
  --accent-text: var(--dnd-night);
  --accent-deco: var(--dnd-night);

  --signal-text: var(--dnd-night);
  --error: var(--dnd-night);
  --focus: var(--dnd-night);
}