/* ═══════════════════════════════════════════════════════════
   COTON Design System — Tokens
   v1.0.0 · 2026
   ═══════════════════════════════════════════════════════════
   Source unique de vérité. Importer ce fichier en premier
   dans votre app : @import "@coton/ds/tokens.css";
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ─────────────────────────────────────────── */
  --coton-marine:        #17234D;
  --coton-marine-2:      #1F2F66;
  --coton-marine-3:      #0E1633;
  --coton-or:            #C9953D;
  --coton-or-2:          #E0AF54;
  --coton-or-soft:       #F4E5C2;
  --coton-creme:         #FAF6E9;
  --coton-creme-2:       #F2EDD8;

  /* ── Surfaces ──────────────────────────────────────── */
  --coton-bg:            #FFFFFF;
  --coton-bg-paper:      #FFFFFF;
  --coton-bg-soft:       #FBF7E8;
  --coton-bg-deep:       var(--coton-marine);

  /* ── Ink (texte) ───────────────────────────────────── */
  --coton-ink:           #0E1633;
  --coton-ink-2:         #37425E;
  --coton-ink-3:         #6B7388;
  --coton-ink-4:         #A2A8B8;
  --coton-ink-on-marine: #F4F1E2;

  /* ── Lines ─────────────────────────────────────────── */
  --coton-line:          #ECE9DD;
  --coton-line-2:        #DDD8C3;
  --coton-line-3:        #C9C2A4;

  /* ── Status sémantiques ────────────────────────────── */
  --coton-success:       #0E8C4A;
  --coton-success-bg:    #ECFDF5;
  --coton-success-line:  #C9E5D4;
  --coton-warning:       #B57A0F;
  --coton-warning-bg:    #FFFBEB;
  --coton-warning-line:  #F0DFA5;
  --coton-error:         #C8392B;
  --coton-error-bg:      #FEF2F2;
  --coton-error-line:    #F2C3BC;
  --coton-info:          #2752E5;
  --coton-info-bg:       #EFF6FF;
  --coton-info-line:     #C8D5FA;

  /* ── Échelles couleur (50 → 900) ───────────────────── */
  --coton-marine-50:  #F4F6FB;
  --coton-marine-100: #E5EAF4;
  --coton-marine-200: #C2CCE2;
  --coton-marine-300: #93A3C8;
  --coton-marine-400: #6477A8;
  --coton-marine-500: #3F548A;
  --coton-marine-600: #28386A;
  --coton-marine-700: #17234D;
  --coton-marine-800: #0E1633;
  --coton-marine-900: #060A1C;

  --coton-or-50:  #FBF6E5;
  --coton-or-100: #F4E5C2;
  --coton-or-200: #EDD295;
  --coton-or-300: #E0AF54;
  --coton-or-400: #C9953D;
  --coton-or-500: #B57A0F;
  --coton-or-600: #8E5D08;
  --coton-or-700: #654005;
  --coton-or-800: #422A02;
  --coton-or-900: #221501;

  /* ── Typographie ───────────────────────────────────── */
  --coton-font-serif:    "Fraunces", "Tiempos Headline", Georgia, serif;
  --coton-font-sans:     "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --coton-font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --coton-text-xs:       11px;
  --coton-text-sm:       12.5px;
  --coton-text-base:     15px;
  --coton-text-md:       17px;
  --coton-text-lg:       19px;
  --coton-text-xl:       24px;
  --coton-text-2xl:      32px;
  --coton-text-3xl:      40px;
  --coton-text-4xl:      52px;
  --coton-text-5xl:      64px;
  --coton-text-6xl:      80px;

  --coton-leading-tight:   1.05;
  --coton-leading-snug:    1.25;
  --coton-leading-normal:  1.55;
  --coton-leading-relaxed: 1.7;

  --coton-tracking-tight:  -0.025em;
  --coton-tracking-normal: -0.005em;
  --coton-tracking-wide:    0.08em;
  --coton-tracking-wider:   0.12em;

  /* ── Espacements (4px scale) ───────────────────────── */
  --coton-space-0:   0;
  --coton-space-1:   4px;
  --coton-space-2:   8px;
  --coton-space-3:   12px;
  --coton-space-4:   16px;
  --coton-space-5:   20px;
  --coton-space-6:   24px;
  --coton-space-8:   32px;
  --coton-space-10:  40px;
  --coton-space-12:  48px;
  --coton-space-16:  64px;
  --coton-space-20:  80px;
  --coton-space-24:  96px;
  --coton-space-32:  128px;

  /* ── Radius ────────────────────────────────────────── */
  --coton-radius-none: 0;
  --coton-radius-sm:   4px;
  --coton-radius-md:   8px;
  --coton-radius-lg:   12px;
  --coton-radius-xl:   16px;
  --coton-radius-2xl:  24px;
  --coton-radius-full: 9999px;

  /* ── Élévation (ombres) ────────────────────────────── */
  --coton-shadow-sm:
    0 1px 2px rgba(14, 22, 51, 0.06);
  --coton-shadow-md:
    0 1px 3px rgba(14, 22, 51, 0.08),
    0 4px 12px -4px rgba(14, 22, 51, 0.10);
  --coton-shadow-lg:
    0 4px 8px -2px rgba(14, 22, 51, 0.10),
    0 12px 32px -16px rgba(14, 22, 51, 0.18);
  --coton-shadow-xl:
    0 12px 24px -8px rgba(14, 22, 51, 0.18),
    0 24px 48px -12px rgba(14, 22, 51, 0.22);
  --coton-shadow-or:
    0 1px 2px rgba(181, 122, 15, 0.20),
    0 6px 16px -8px rgba(201, 149, 61, 0.50);
  --coton-shadow-marine:
    0 1px 2px rgba(14, 22, 51, 0.18),
    0 6px 18px -8px rgba(14, 22, 51, 0.40);

  /* ── Motion ────────────────────────────────────────── */
  --coton-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --coton-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --coton-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --coton-duration-fast:    120ms;
  --coton-duration-base:    200ms;
  --coton-duration-slow:    400ms;
  --coton-duration-slower:  900ms;

  /* ── Z-index ──────────────────────────────────────── */
  --coton-z-base:     0;
  --coton-z-dropdown: 100;
  --coton-z-sticky:   200;
  --coton-z-overlay:  300;
  --coton-z-modal:    400;
  --coton-z-toast:    500;

  /* ── Focus ring ───────────────────────────────────── */
  --coton-focus-ring: 0 0 0 4px rgba(201, 149, 61, 0.18);
}

/* ─── Reset minimal recommandé ─────────────────────── */
.coton-reset *, .coton-reset *::before, .coton-reset *::after {
  box-sizing: border-box;
}
.coton-reset {
  font-family: var(--coton-font-sans);
  color: var(--coton-ink);
  background: var(--coton-bg);
  -webkit-font-smoothing: antialiased;
  letter-spacing: var(--coton-tracking-normal);
  font-feature-settings: "ss01", "cv11";
}

/* ─── Background  : taches crème floues ───── */
.coton-bg-maison {
  position: relative;
  background: var(--coton-bg);
}
.coton-bg-maison::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(360px 280px at 92% 8%,  rgba(244,229,194,.32), transparent 70%),
    radial-gradient(280px 220px at 4% 62%,  rgba(250,246,233,.40), transparent 72%),
    radial-gradient(320px 240px at 78% 88%, rgba(244,229,194,.20), transparent 70%);
  filter: blur(28px);
}


/* ═══════════════════════════════════════════════════════════
   Dark mode — applique [data-theme="dark"] sur <html> ou <body>
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --coton-bg:            #0B1024;
  --coton-bg-paper:      #11183A;
  --coton-bg-soft:       #161E45;
  --coton-bg-deep:       #060A1A;

  --coton-ink:           #F4F1E5;
  --coton-ink-2:         #C9CCDA;
  --coton-ink-3:         #8A92A8;
  --coton-ink-4:         #5C6480;

  --coton-line:          #1E2754;
  --coton-line-2:        #2A3470;
  --coton-line-3:        #3B477F;

  --coton-creme:         #1A2148;
  --coton-creme-2:       #232C5E;
  --coton-or-soft:       #3A2E16;

  --coton-marine:        #5B7AB8;
  --coton-marine-2:      #7E97C9;
  --coton-marine-3:      #3F5A95;

  --coton-success-bg:    #0F2B1F;
  --coton-success-line:  #1F4F38;
  --coton-warning-bg:    #2E2310;
  --coton-warning-line:  #5A4520;
  --coton-error-bg:      #2E1418;
  --coton-error-line:    #5A2530;
  --coton-info-bg:       #0F1E36;
  --coton-info-line:     #1F3A66;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  }
}