/* ============================================================
   DESIGN TOKENS — Évaluation Collection
   Architecture 3 couches : primitive → semantic → component
   ============================================================ */

/* ─── PRIMITIVES (raw values, theme-agnostic) ─── */
:root {
  /* Africain — terre, ocre, ivoire, charbon */
  --raw-charbon-950: #0e0c0a;
  --raw-charbon-900: #1a1612;
  --raw-charbon-800: #2a241e;
  --raw-charbon-700: #3a322a;
  --raw-ivoire-50:   #fbf6ed;
  --raw-ivoire-100:  #f4ecdf;
  --raw-ivoire-200:  #e8dcc4;
  --raw-ivoire-300:  #d8c79f;
  --raw-ocre-300:    #d68a3a;
  --raw-ocre-500:    #b8521a;
  --raw-ocre-700:    #8a3a10;
  --raw-or-300:      #c9a85f;
  --raw-or-500:      #9a7c3a;
  --raw-or-700:      #6f5824;

  /* Tableaux — bleu nuit, crème, laiton, bordeaux */
  --raw-nuit-950:    #070b16;
  --raw-nuit-900:    #0f1626;
  --raw-nuit-800:    #1a2236;
  --raw-nuit-700:    #2a3450;
  --raw-creme-50:    #f8f4ea;
  --raw-creme-100:   #f0e9dc;
  --raw-creme-200:   #e2d6bf;
  --raw-creme-300:   #ccba93;
  --raw-laiton-300:  #d9b35c;
  --raw-laiton-500:  #c4933e;
  --raw-laiton-700:  #8e681f;
  --raw-bordeaux-500:#5e1a23;
  --raw-bordeaux-700:#3e0e15;

  /* Neutres partagés */
  --raw-white:       #ffffff;
  --raw-black:       #000000;
  --raw-grey-100:    #f4f4f4;
  --raw-grey-300:    #c8c8c8;
  --raw-grey-500:    #888888;
  --raw-grey-700:    #4a4a4a;

  /* États universels */
  --raw-success:     #2d7a4f;
  --raw-warning:     #c97f1a;
  --raw-error:       #b3261e;
  --raw-info:        #1f5d8e;

  /* Typographie — pile racine */
  --raw-font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --raw-font-body:    "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --raw-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Échelle typographique (1.25 ratio, ancré 16px) */
  --raw-text-xs:   0.75rem;   /* 12 */
  --raw-text-sm:   0.875rem;  /* 14 */
  --raw-text-base: 1rem;      /* 16 */
  --raw-text-md:   1.125rem;  /* 18 */
  --raw-text-lg:   1.5rem;    /* 24 */
  --raw-text-xl:   2rem;      /* 32 */
  --raw-text-2xl:  2.75rem;   /* 44 */
  --raw-text-3xl:  3.75rem;   /* 60 */
  --raw-text-4xl:  5rem;      /* 80 */

  /* Échelle spatiale (4px base) */
  --raw-space-0:  0;
  --raw-space-1:  0.25rem;  /* 4 */
  --raw-space-2:  0.5rem;   /* 8 */
  --raw-space-3:  0.75rem;  /* 12 */
  --raw-space-4:  1rem;     /* 16 */
  --raw-space-5:  1.5rem;   /* 24 */
  --raw-space-6:  2rem;     /* 32 */
  --raw-space-7:  3rem;     /* 48 */
  --raw-space-8:  4rem;     /* 64 */
  --raw-space-9:  6rem;     /* 96 */
  --raw-space-10: 8rem;     /* 128 */

  /* Rayons */
  --raw-radius-none: 0;
  --raw-radius-sm:   2px;
  --raw-radius-md:   4px;
  --raw-radius-lg:   8px;
  --raw-radius-pill: 999px;

  /* Ombres (chaudes pour Africain, froides pour Tableaux — overridées plus bas) */
  --raw-shadow-sm-warm: 0 1px 2px rgba(50, 30, 10, 0.12);
  --raw-shadow-md-warm: 0 4px 12px rgba(50, 30, 10, 0.16);
  --raw-shadow-lg-warm: 0 12px 32px rgba(50, 30, 10, 0.22);
  --raw-shadow-sm-cool: 0 1px 2px rgba(15, 22, 38, 0.14);
  --raw-shadow-md-cool: 0 4px 12px rgba(15, 22, 38, 0.18);
  --raw-shadow-lg-cool: 0 12px 32px rgba(15, 22, 38, 0.26);

  /* Animations */
  --raw-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --raw-ease-in:  cubic-bezier(0.55, 0, 0.92, 0.42);
  --raw-ease-out: cubic-bezier(0.08, 0.58, 0.45, 1);
  --raw-dur-fast:    150ms;
  --raw-dur-base:    250ms;
  --raw-dur-slow:    400ms;
  --raw-dur-curtain: 700ms;

  /* Layout */
  --raw-max-content:    1280px;
  --raw-max-prose:      72ch;
  --raw-grid-gap:       var(--raw-space-5);
  --raw-grid-thumb-min: 220px;
  --raw-grid-thumb-max: 320px;
}

/* ─── SEMANTIC LAYER (purpose, theme-aware) ─── */
/* Default = Africain palette ; site Tableaux override via [data-theme="tableaux"] */

:root,
[data-theme="africain"] {
  --bg-page:      var(--raw-charbon-950);
  --bg-surface:   var(--raw-charbon-900);
  --bg-elevated:  var(--raw-charbon-800);
  --bg-overlay:   rgba(14, 12, 10, 0.86);

  --fg-primary:   var(--raw-ivoire-100);
  --fg-secondary: var(--raw-ivoire-300);
  --fg-muted:     var(--raw-grey-500);
  --fg-inverse:   var(--raw-charbon-950);

  --accent:           var(--raw-ocre-500);
  --accent-hover:     var(--raw-ocre-700);
  --accent-on:        var(--raw-ivoire-50);
  --accent-secondary: var(--raw-or-500);

  --border-subtle:  rgba(244, 236, 223, 0.08);
  --border-default: rgba(244, 236, 223, 0.18);
  --border-strong:  var(--raw-ocre-500);

  --shadow-sm: var(--raw-shadow-sm-warm);
  --shadow-md: var(--raw-shadow-md-warm);
  --shadow-lg: var(--raw-shadow-lg-warm);

  --selection-bg: var(--raw-ocre-500);
  --selection-fg: var(--raw-ivoire-50);
}

[data-theme="tableaux"] {
  --bg-page:      var(--raw-nuit-950);
  --bg-surface:   var(--raw-nuit-900);
  --bg-elevated:  var(--raw-nuit-800);
  --bg-overlay:   rgba(7, 11, 22, 0.86);

  --fg-primary:   var(--raw-creme-100);
  --fg-secondary: var(--raw-creme-300);
  --fg-muted:     var(--raw-grey-500);
  --fg-inverse:   var(--raw-nuit-950);

  --accent:           var(--raw-laiton-500);
  --accent-hover:     var(--raw-laiton-700);
  --accent-on:        var(--raw-nuit-950);
  --accent-secondary: var(--raw-bordeaux-500);

  --border-subtle:  rgba(240, 233, 220, 0.08);
  --border-default: rgba(240, 233, 220, 0.18);
  --border-strong:  var(--raw-laiton-500);

  --shadow-sm: var(--raw-shadow-sm-cool);
  --shadow-md: var(--raw-shadow-md-cool);
  --shadow-lg: var(--raw-shadow-lg-cool);

  --selection-bg: var(--raw-laiton-500);
  --selection-fg: var(--raw-nuit-950);
}

/* ─── COMPONENT LAYER (specific component variables) ─── */

:root {
  /* Buttons */
  --btn-bg:           var(--accent);
  --btn-fg:           var(--accent-on);
  --btn-bg-hover:     var(--accent-hover);
  --btn-radius:       var(--raw-radius-md);
  --btn-padding-y:    var(--raw-space-3);
  --btn-padding-x:    var(--raw-space-5);
  --btn-font:         600 var(--raw-text-sm)/1.2 var(--raw-font-body);
  --btn-letter:       0.04em;
  --btn-transition:   background-color var(--raw-dur-base) var(--raw-ease), transform var(--raw-dur-fast) var(--raw-ease);

  /* Inputs */
  --input-bg:         transparent;
  --input-fg:         var(--fg-primary);
  --input-border:     var(--border-default);
  --input-border-focus: var(--accent);
  --input-radius:     var(--raw-radius-sm);
  --input-padding-y:  var(--raw-space-3);
  --input-padding-x:  var(--raw-space-4);
  --input-font:       400 var(--raw-text-base)/1.4 var(--raw-font-body);

  /* Cards (lot tile) */
  --card-bg:        var(--bg-surface);
  --card-border:    var(--border-subtle);
  --card-radius:    var(--raw-radius-md);
  --card-shadow:    var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);

  /* Header */
  --header-h:        72px;
  --header-bg:       var(--bg-overlay);
  --header-blur:     blur(14px) saturate(140%);
  --header-border:   var(--border-subtle);

  /* Lightbox */
  --lightbox-bg:     rgba(0, 0, 0, 0.94);
  --lightbox-thumb:  72px;

  /* Statut chips (à évaluer / en cours / soumis) */
  --chip-empty-bg:    transparent;
  --chip-empty-fg:    var(--fg-muted);
  --chip-empty-bd:    var(--border-default);
  --chip-progress-bg: color-mix(in oklab, var(--accent) 18%, transparent);
  --chip-progress-fg: var(--accent);
  --chip-progress-bd: var(--accent);
  --chip-done-bg:     color-mix(in oklab, var(--raw-success) 24%, transparent);
  --chip-done-fg:     #6cd49a;
  --chip-done-bd:     var(--raw-success);

  /* Lot detail form */
  --form-section-gap: var(--raw-space-5);
  --form-label:       600 var(--raw-text-xs)/1.4 var(--raw-font-body);
  --form-label-letter: 0.08em;
}

/* ─── BASE GLOBAL STYLES ─── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--raw-font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-primary);
  font: 400 var(--raw-text-base)/1.55 var(--raw-font-body);
  font-feature-settings: "ss01", "cv11";
  min-height: 100vh;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

h1, h2, h3, h4 {
  font-family: var(--raw-font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 var(--raw-space-4);
}
h1 { font-size: var(--raw-text-3xl); }
h2 { font-size: var(--raw-text-2xl); }
h3 { font-size: var(--raw-text-xl); }
h4 { font-size: var(--raw-text-lg); }

p { margin: 0 0 var(--raw-space-4); max-width: var(--raw-max-prose); }

a { color: var(--accent); text-decoration: none; transition: color var(--raw-dur-base) var(--raw-ease); }
a:hover { color: var(--accent-hover); }

img { max-width: 100%; display: block; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* Utility — eyebrow / overline */
.eyebrow {
  font: 600 var(--raw-text-xs)/1.2 var(--raw-font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Container */
.container {
  width: 100%;
  max-width: var(--raw-max-content);
  margin: 0 auto;
  padding: 0 var(--raw-space-5);
}

/* Skip link a11y */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: var(--raw-space-3);
  top: var(--raw-space-3);
  z-index: 100;
  background: var(--accent);
  color: var(--accent-on);
  padding: var(--raw-space-2) var(--raw-space-4);
}

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