/* ════════════════════════════════════════════════════════════════════
   Scrute — Design tokens
   Référence : specs/scrute_brand.md
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Couleurs base ── */
  --color-bg:           #FFFFFF;
  --color-surface:      #F8F9FB;
  --color-border:       #E5E7EB;
  --color-text:         #0A0A0F;
  --color-text-soft:    #525866;
  --color-text-muted:   #A0A8B8;

  /* ── Coral signature ── */
  --color-coral:        #FF6B47;
  --color-coral-hover:  #E85530;
  --color-coral-soft:   #FFEDE7;
  --color-coral-dark:   #B83D24;

  /* ── Sémantiques ── */
  --color-success:      #10B981;
  --color-success-soft: #D1FAE5;
  --color-warning:      #F59E0B;
  --color-warning-soft: #FEF3C7;
  --color-error:        #EF4444;
  --color-error-soft:   #FEE2E2;
  --color-info:         #0EA5E9;
  --color-info-soft:    #E0F2FE;

  /* ── Typo ── */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', Menlo, monospace;

  /* ── Spacing (multiples de 8, 4 toléré) ── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --space-10: 128px;

  /* ── Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* ── Shadow ── */
  --shadow-1: 0 1px 2px  rgba(10,10,15,0.04);
  --shadow-2: 0 4px 12px rgba(10,10,15,0.08);
  --shadow-3: 0 16px 40px rgba(10,10,15,0.12);

  /* ── Motion ── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-medium: 300ms;

  /* ── Layout ── */
  --max-w-content: 1280px;
  --max-w-prose:   720px;
}

/* ── Reset minimal ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ── Tabular nums sur stats ── */
.tabular { font-variant-numeric: tabular-nums; }

/* ── Boutons standards ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-weight: 500;
  font-size: 14px;
  transition: all var(--duration-fast) var(--ease-default);
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-coral);
  color: white;
  border-color: var(--color-coral);
}
.btn-primary:hover { background: var(--color-coral-hover); border-color: var(--color-coral-hover); }
.btn-secondary {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-surface); }
.btn-ghost {
  background: transparent;
  color: var(--color-text-soft);
  border-color: transparent;
}
.btn-ghost:hover { color: var(--color-text); background: var(--color-surface); }

/* ── Inputs ── */
.input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-size: 14px;
  transition: border-color var(--duration-fast);
}
.input:focus { outline: none; border-color: var(--color-coral); box-shadow: 0 0 0 3px var(--color-coral-soft); }

/* ── Cards ── */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* ── Hidden + display fix ── */
[hidden] { display: none !important; }