/* ==========================================================================
   Club SMART — Design Tokens
   Couleurs, typographie, espacement, ombres, animations.
   Import-once CSS file. All values use CSS custom properties so they can be
   overridden per-surface (dark section, amber section, etc).
   ========================================================================== */

/* --- Fonts (Google Fonts CDN — Manrope display, Inter Tight body, JetBrains Mono code) --- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ── Core palette ─────────────────────────────────────────────────────── */
  --ink:        #0B0B0B;   /* near-black, text + premium bg */
  --navy:       #233039;   /* deep slate-blue, secondary bg  */
  --teal:       #3FA4B1;   /* primary accent — links, data, IA highlight */
  --amber:      #F5AE2A;   /* warm accent — CTAs, metrics, human touch */
  --paper:      #FAFAFA;   /* default light bg */
  --white:      #FFFFFF;
  --ink-2:      #1A1F24;   /* elevated dark surface */

  /* ── Neutral scale (warm-cool balanced) ───────────────────────────────── */
  --n-50:  #F6F7F8;
  --n-100: #EBEDEF;
  --n-200: #D9DDE1;
  --n-300: #B8BFC6;
  --n-400: #8A949D;
  --n-500: #5F6A74;
  --n-600: #43505B;
  --n-700: #2E3943;
  --n-800: #1F2830;
  --n-900: #12181D;

  /* ── Semantic foreground / background ─────────────────────────────────── */
  --fg-1:       var(--ink);         /* primary text */
  --fg-2:       var(--n-600);       /* secondary text */
  --fg-3:       var(--n-500);       /* tertiary / muted */
  --fg-inverse: var(--paper);       /* text on dark */
  --fg-accent:  var(--teal);
  --fg-warm:    var(--amber);

  --bg-1:       var(--paper);       /* default surface */
  --bg-2:       var(--white);       /* cards on paper */
  --bg-3:       var(--n-50);        /* subtle band */
  --bg-dark:    var(--navy);        /* emphasis dark */
  --bg-ink:     var(--ink);         /* strongest dark */

  --border:     color-mix(in oklch, var(--ink) 10%, transparent);
  --border-strong: color-mix(in oklch, var(--ink) 20%, transparent);
  --border-dark: color-mix(in oklch, var(--paper) 12%, transparent);

  /* ── Status (computed off core, never invented) ───────────────────────── */
  --success:    #2E8F6E;
  --warning:    var(--amber);
  --danger:     #C5463A;
  --info:       var(--teal);

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-display: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Type scale (fluid-ish, but fixed here for predictability) */
  --t-display-xl: 72px;  /* hero headline */
  --t-display-l:  56px;
  --t-display-m:  40px;
  --t-display-s:  32px;
  --t-h1:         28px;
  --t-h2:         22px;
  --t-h3:         18px;
  --t-body:       16px;
  --t-body-sm:    14px;
  --t-caption:    12px;
  --t-mono:       14px;

  /* Line heights */
  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.45;
  --lh-relaxed:  1.6;

  /* Letter spacing */
  --ls-display:  -0.02em;
  --ls-body:      0;
  --ls-mono:      0;

  /* ── Spacing scale (4px base) ─────────────────────────────────────────── */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(11, 11, 11, 0.06), 0 1px 1px rgba(11, 11, 11, 0.04);
  --shadow-2: 0 4px 12px rgba(11, 11, 11, 0.08), 0 2px 4px rgba(11, 11, 11, 0.04);
  --shadow-3: 0 12px 32px rgba(11, 11, 11, 0.12), 0 4px 8px rgba(11, 11, 11, 0.06);
  --shadow-focus: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--teal);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:   150ms;
  --dur-std:     250ms;
  --dur-page:    400ms;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --container:    1200px;
  --container-sm: 760px;
  --header-h:     72px;
  --sidebar-w:    240px;
}

/* ==========================================================================
   Semantic element defaults — drop this CSS into any page and the base
   typography works out of the box.
   ========================================================================== */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--t-display-l); font-weight: var(--fw-black); }
h2 { font-size: var(--t-display-s); font-weight: var(--fw-bold); }
h3 { font-size: var(--t-h1);        font-weight: var(--fw-bold); }
h4 { font-size: var(--t-h2);        font-weight: var(--fw-semibold); line-height: var(--lh-snug); }

p  { margin: 0 0 var(--sp-4) 0; color: var(--fg-2); text-wrap: pretty; }

a  { color: var(--fg-accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }

small, .caption {
  font-size: var(--t-caption);
  color: var(--fg-3);
  letter-spacing: 0.01em;
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
}

code {
  background: var(--n-100);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  color: var(--ink);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-6) 0;
}

::selection {
  background: var(--amber);
  color: var(--ink);
}

/* ==========================================================================
   Utility classes — opt-in, matches semantic variables above.
   ========================================================================== */

.display-xl { font-family: var(--font-display); font-size: var(--t-display-xl); font-weight: var(--fw-black); letter-spacing: var(--ls-display); line-height: var(--lh-tight); }
.display-l  { font-family: var(--font-display); font-size: var(--t-display-l);  font-weight: var(--fw-bold);  letter-spacing: var(--ls-display); line-height: var(--lh-tight); }
.display-m  { font-family: var(--font-display); font-size: var(--t-display-m);  font-weight: var(--fw-bold);  letter-spacing: var(--ls-display); line-height: var(--lh-snug);  }
.eyebrow    { font-family: var(--font-mono); font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); font-weight: var(--fw-medium); }

.text-teal  { color: var(--teal); }
.text-amber { color: var(--amber); }
.text-ink   { color: var(--ink); }
.text-navy  { color: var(--navy); }
.text-muted { color: var(--fg-2); }
.text-subtle{ color: var(--fg-3); }

.bg-paper   { background: var(--paper); }
.bg-white   { background: var(--white); }
.bg-ink     { background: var(--ink);  color: var(--fg-inverse); }
.bg-navy    { background: var(--navy); color: var(--fg-inverse); }
.bg-teal    { background: var(--teal); color: var(--ink); }
.bg-amber   { background: var(--amber);color: var(--ink); }

/* Dark context — cards / sections with dark bg */
.on-dark {
  --fg-1: var(--paper);
  --fg-2: var(--n-300);
  --fg-3: var(--n-400);
  --border: var(--border-dark);
}