/* ===========================================================
   Coconut Studio — Design tokens
   Palette, typography, spacing, radius, shadows.
   Light by default (crème). [data-theme="noix"] flips to dark.
   =========================================================== */

:root {
  /* ---- Palette : mode clair (crème) ---- */
  --bg:        #F7F0E1;
  --ink:       #1E140C;
  --ink-rgb:   30, 20, 12;
  --tomato:    #C26B4A;
  --tomato-2:  #A85636;
  --tomato-soft: rgba(194, 107, 74, 0.10);
  --leaf:      #2D5B3F;
  --leaf-soft: rgba(45, 91, 63, 0.10);
  --surface:   #ECE2CB;
  --surface-2: #E2D6BB;          /* hover row, nested surface */

  --info:      #4A6FA5;
  --info-soft: rgba(74, 111, 165, 0.12);
  --warning:   #C28F3C;
  --warning-soft: rgba(194, 143, 60, 0.14);
  --danger:    #C13B2C;
  --danger-soft: rgba(193, 59, 44, 0.10);

  --ink-65:    rgba(var(--ink-rgb), 0.65);
  --ink-45:    rgba(var(--ink-rgb), 0.45);
  --ink-30:    rgba(var(--ink-rgb), 0.30);
  --ink-12:    rgba(var(--ink-rgb), 0.12);

  --line:        rgba(var(--ink-rgb), 0.10);
  --line-strong: rgba(var(--ink-rgb), 0.18);

  /* ---- Type ---- */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;

  --fs-xs:   11px;   --lh-xs:  1.4;
  --fs-sm:   13px;   --lh-sm:  1.5;
  --fs-base: 14px;   --lh-base:1.55;
  --fs-md:   16px;   --lh-md:  1.5;
  --fs-lg:   20px;   --lh-lg:  1.3;
  --fs-xl:   28px;   --lh-xl:  1.2;
  --fs-2xl:  36px;   --lh-2xl: 1.1;

  /* ---- Spacing (4/8/12/16/24/32/48/64) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---- Radius ---- */
  --r-input:  6px;
  --r-btn:    6px;
  --r-card:   10px;
  --r-modal:  12px;
  --r-pill:   999px;

  /* ---- Layout ---- */
  --sidebar-w: 240px;
  --header-h:  56px;
  --content-max: 1200px;
  --row-h: 36px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 0 rgba(var(--ink-rgb), 0.04), 0 1px 2px rgba(var(--ink-rgb), 0.04);
  --shadow-md: 0 1px 0 rgba(var(--ink-rgb), 0.04), 0 6px 18px -8px rgba(var(--ink-rgb), 0.18);
  --shadow-lg: 0 1px 0 rgba(var(--ink-rgb), 0.04), 0 24px 48px -16px rgba(var(--ink-rgb), 0.32);

  /* ---- Focus ---- */
  --focus: 0 0 0 3px rgba(194, 107, 74, 0.28);
}

/* ---- Mode sombre (noix) ---- */
[data-theme="noix"] {
  --bg:        #1A130B;
  --ink:       #F7F0E1;
  --ink-rgb:   247, 240, 225;
  --tomato:    #E89070;
  --tomato-2:  #C26B4A;
  --tomato-soft: rgba(232, 144, 112, 0.14);
  --leaf:      #8FB89B;
  --leaf-soft: rgba(143, 184, 155, 0.14);
  --surface:   #261C12;
  --surface-2: #322519;
  --info:      #7FA1D6;
  --info-soft: rgba(127, 161, 214, 0.16);
  --warning:   #E0B26A;
  --warning-soft: rgba(224, 178, 106, 0.16);
  --danger:    #E07060;
  --danger-soft: rgba(224, 112, 96, 0.16);
  --line:        rgba(var(--ink-rgb), 0.08);
  --line-strong: rgba(var(--ink-rgb), 0.16);
}

/* ===========================================================
   Reset minimal
   =========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--tomato); color: #fff; }
:focus-visible { outline: none; box-shadow: var(--focus); }

/* Utilities */
.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-65); }
.muted-2 { color: var(--ink-45); }
.text-xs { font-size: var(--fs-xs); line-height: var(--lh-xs); }
.text-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.text-md { font-size: var(--fs-md); line-height: var(--lh-md); }
.text-lg { font-size: var(--fs-lg); line-height: var(--lh-lg); }
.text-xl { font-size: var(--fs-xl); line-height: var(--lh-xl); }
.text-2xl { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
.tnum { font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-45);
}