/* ─────────────────────────────────────────────────────────────
   Flaynn · Colors & Type
   Source of truth for the Flaynn design system.
   Imported by every preview card and UI kit in this project.
   ───────────────────────────────────────────────────────────── */

/* Webfonts via Google Fonts (substitution flagged in README) */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  /* ─── SURFACES · MARKETING (landing, glass) ─── */
  --bg:            #030407;   /* deep space — page bg */
  --surface-0:     #05060a;
  --surface-1:     #0a0d14;
  --surface-2:     #0f1219;
  --surface-3:     #14181f;
  --surface-raised:#0a0d14;

  /* ─── SURFACES · APP (dashboards, utilitarian) ─────────────
     Distinct stack from Marketing : pas de glass, hairlines plus
     présentes, contraste doux entre niveaux pour le rythme de
     l'interface. Utilisé par sidebar / topbar / cards de listes. */
  --app-bg:        #030407;   /* page (= --bg, pour hériter) */
  --app-surface-0: #08090d;   /* topbar bg */
  --app-surface-1: #0d0f15;   /* card / row hover */
  --app-surface-2: #13161e;   /* nav item active, card hover */
  --app-surface-3: #1a1e28;   /* button hover, popover */

  /* ─── LINES / BORDERS · MARKETING ─── */
  --line:          rgba(255,255,255,0.06);
  --line-soft:     rgba(255,255,255,0.04);
  --line-strong:   rgba(255,255,255,0.10);

  /* ─── LINES / BORDERS · APP (opaque, plus présentes) ─── */
  --app-line:        #1f2430;
  --app-line-soft:   #161b25;
  --app-line-strong: #2a3140;

  /* ─── TEXT · 4 niveaux (text-4 ajouté pour App) ─── */
  --text-1:        #f0f0f3;   /* primary */
  --text-2:        #8b8fa3;   /* secondary */
  --text-3:        #5d6270;   /* tertiary / muted */
  --text-4:        #3a4150;   /* quaternary · séparateurs typo, slashs breadcrumb */

  /* ─── BRAND PRIMARY · violet ─── */
  --violet:        #7B2D8E;
  --violet-2:      #a85ec0;
  --violet-deep:   #4a1859;

  /* ─── BRAND ACCENT · orange ─── */
  --orange:        #E8651A;
  --orange-soft:   rgba(232,101,26,0.15);

  /* ─── PILLAR COLORS ─── */
  --pillar-market:    #9333ea;   /* violet */
  --pillar-product:   #EC4899;   /* rose */
  --pillar-traction:  #F97316;   /* orange */
  --pillar-team:      #FACC15;   /* jaune */
  --pillar-execution: #06b6d4;   /* cyan */

  /* ─── VERDICT COLORS ─── */
  --notyet:        #dc2626;
  --almost:        #f59e0b;
  --yes:           #a85ec0;
  --strongyes:     #22c55e;

  /* ─── UTILITY ACCENTS ─── */
  /* Used by initLiveScoring (Section 7 Bento) for live score colorization.
     Distinct from verdict tokens (notyet/almost/yes/strongyes) which are
     intentionally muted brick/sage for verdict pills. Accents stay pop. */
  --accent-rose:   #f43f5e;
  --accent-amber:  #f59e0b;
  --accent-emerald:#10b981;
  --accent-blue:   #3b82f6;

  /* ─── GLASS / GRADIENTS ─── */
  --glass-bg:      linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.010));
  --glass-bg-strong:linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  --grad-primary:  linear-gradient(135deg, #7B2D8E 0%, #9b35b0 50%, #E8651A 100%);
  --grad-text:     linear-gradient(135deg, #a85ec0 0%, #c060de 40%, #E8651A 100%);

  /* ─── SHADOWS ─── */
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg:     0 12px 40px rgba(0,0,0,0.5);
  --shadow-glow-violet: 0 4px 20px rgba(123,45,142,0.25);
  --shadow-glow-violet-strong: 0 8px 32px rgba(123,45,142,0.4);

  /* ─── RADII ─── */
  --radius-xs:     5px;     /* App : nav items, search input, small chips */
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --radius-pill:   999px;

  /* ─── SPACING ─── */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */
  --space-10:4rem;      /* 64px */

  /* ─── MOTION ─── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.22, 1.36, 0.36, 1);
  --dur-fast:    150ms;
  --dur:         240ms;
  --dur-slow:    600ms;

  /* ─── TYPE FAMILIES ─── */
  --font-sans:   'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:   'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* ─── TYPE SCALE (semantic) ─── */
  --fs-display:  clamp(48px, 5.5vw, 84px);   /* hero */
  --fs-h1:       clamp(38px, 4vw, 56px);
  --fs-h2:       clamp(26px, 3vw, 40px);     /* section */
  --fs-h3:       22px;
  --fs-h4:       17px;                       /* card title */
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-small:    13px;
  --fs-xs:       12px;
  --fs-kicker:   10.5px;
  --fs-mono-num: 28px;
}

/* ─────────────────────────────────────────────────────────────
   Semantic typography classes — use these instead of raw sizes.
   ───────────────────────────────────────────────────────────── */

.t-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text-1);
}

.t-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-1);
}

.t-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--text-1);
}

.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text-1);
}

.t-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-1);
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-1);
}

.t-body-2 {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-2);
}

.t-small {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-2);
}

.t-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}

.t-kicker--violet { color: var(--violet-2); }
.t-kicker--orange { color: var(--orange); }

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--text-1);
}

.t-mono-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-mono-num);
  letter-spacing: -0.02em;
  color: var(--text-1);
}

.t-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Reset for cards (so they can be embedded anywhere) */
.flaynn-scope {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.flaynn-scope *, .flaynn-scope *::before, .flaynn-scope *::after { box-sizing: border-box; }