/* ============================================
   OPTIGEST — Design Tokens
   Artisanal chaleureux • sable, terre cuite, pain doré
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ——— FOND : sable / blanc cassé ——— */
  --sand-50:  #FBF6EE;
  --sand-100: #F5EEE0;
  --sand-200: #ECE0CB;
  --sand-300: #DCC9A8;
  --sand-400: #C4A878;
  --sand-500: #A88955;

  /* ——— ENCRE : anthracite chaud ——— */
  --ink-50:  #F2EEE8;
  --ink-100: #D9D2C5;
  --ink-200: #9C948A;
  --ink-300: #6E665C;
  --ink-400: #443E37;
  --ink-500: #2A2520;
  --ink-600: #1F1B17;
  --ink-700: #14110E;
  --ink-800: #0B0907;

  /* ——— ACCENT 1 : Terre cuite (primaire) ——— */
  --terra-50:  #FBEEE6;
  --terra-100: #F4D8C4;
  --terra-200: #E8B596;
  --terra-300: #D88A65;
  --terra-400: #C56B43;
  --terra-500: #B0552F;
  --terra-600: #8E4220;
  --terra-700: #6B3118;

  /* ——— ACCENT 2 : Pain doré ——— */
  --bread-50:  #FBF1D5;
  --bread-100: #F6E0A1;
  --bread-200: #F0CC72;
  --bread-300: #E5B547;
  --bread-400: #C99A2B;
  --bread-500: #9A7418;

  /* ——— ACCENT 3 : Pistache ——— */
  --pistache-50:  #EEF1DF;
  --pistache-100: #D8DFB6;
  --pistache-200: #B7C282;
  --pistache-300: #8E9C56;
  --pistache-400: #6E7B3E;
  --pistache-500: #4F5A2A;

  /* ——— ACCENT 4 : Framboise ——— */
  --berry-50:  #F8DDD9;
  --berry-100: #EFB3AA;
  --berry-200: #E0827A;
  --berry-300: #C24F4A;
  --berry-400: #993834;
  --berry-500: #6E2522;

  /* ——— ACCENT 5 : Bleuet ——— */
  --blueb-50:  #E2E7EE;
  --blueb-100: #B8C4D5;
  --blueb-200: #7E92AF;
  --blueb-300: #4F6788;
  --blueb-400: #364B6A;

  /* ——— Sémantique LIGHT ——— */
  --bg:           var(--sand-50);
  --bg-elev:      #FFFAF1;
  --bg-soft:      var(--sand-100);
  --surface:      #FFFAF1;
  --surface-2:    var(--sand-100);
  --border:       #E6D9BF;
  --border-soft:  #EFE3CB;

  --text:         var(--ink-700);
  --text-muted:   var(--ink-300);
  --text-soft:    var(--ink-200);
  --text-on-dark: var(--sand-50);

  --primary:        var(--terra-500);
  --primary-hover:  var(--terra-600);
  --primary-soft:   var(--terra-50);
  --on-primary:     #FFFAF1;

  --warning:      var(--bread-300);
  --warning-soft: var(--bread-50);
  --success:      var(--pistache-300);
  --success-soft: var(--pistache-50);
  --danger:       var(--berry-300);
  --danger-soft:  var(--berry-50);
  --info:         var(--blueb-300);
  --info-soft:    var(--blueb-50);

  /* Typographie */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;

  /* Radius */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 999px;

  /* Espacements (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 48px; --s-10: 64px;

  /* Ombres chaudes */
  --shadow-xs: 0 1px 2px rgba(45, 35, 20, 0.04);
  --shadow-sm: 0 1px 2px rgba(45, 35, 20, 0.04), 0 2px 4px rgba(45, 35, 20, 0.04);
  --shadow-md: 0 2px 4px rgba(45, 35, 20, 0.05), 0 8px 20px rgba(45, 35, 20, 0.06);
  --shadow-lg: 0 4px 8px rgba(45, 35, 20, 0.06), 0 16px 40px rgba(45, 35, 20, 0.08);

  /* Transitions */
  --t-fast: 120ms cubic-bezier(.2,.8,.2,1);
  --t-med:  220ms cubic-bezier(.2,.8,.2,1);
}

/* ——— DARK ——— */
:root[data-theme="dark"] {
  --bg:           #15120E;
  --bg-elev:      #1E1A14;
  --bg-soft:      #1A1611;
  --surface:      #211C16;
  --surface-2:    #2A241C;
  --border:       #36301F;
  --border-soft:  #2A2418;

  --text:         #F2EAD8;
  --text-muted:   #B5A98F;
  --text-soft:    #7E725E;
  --text-on-dark: #F2EAD8;

  --primary:        var(--terra-400);
  --primary-hover:  var(--terra-300);
  --primary-soft:   #3A1F12;
  --on-primary:     #FFFAF1;

  --warning:      var(--bread-300);
  --warning-soft: #3A2C0F;
  --success:      var(--pistache-200);
  --success-soft: #2B311C;
  --danger:       var(--berry-200);
  --danger-soft:  #391E1B;
  --info:         var(--blueb-200);
  --info-soft:    #1F2733;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.25);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.35), 0 8px 20px rgba(0,0,0,0.3);
  --shadow-lg: 0 4px 8px rgba(0,0,0,0.4), 0 16px 40px rgba(0,0,0,0.45);
}

/* ——— Base ——— */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}

p { margin: 0; line-height: 1.55; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

::selection { background: var(--bread-100); color: var(--ink-700); }
:root[data-theme="dark"] ::selection { background: var(--terra-500); color: #FFFAF1; }