/* ============================================================
   ProspUp v30 — Design tokens
   Sobre, dense, pro. Inspired by Linear/Notion/Attio but original.
   ============================================================ */

:root {
  /* ─── Neutral ink scale (OKLCH — cool neutral) ─── */
  --ink-0:   oklch(0.995 0.002 258);   /* page bg light */
  --ink-50:  oklch(0.985 0.003 258);
  --ink-100: oklch(0.965 0.004 258);   /* surface-2 */
  --ink-150: oklch(0.945 0.005 258);   /* hover */
  --ink-200: oklch(0.918 0.006 258);   /* border-soft */
  --ink-300: oklch(0.870 0.008 258);   /* border */
  --ink-400: oklch(0.740 0.010 258);   /* icon muted */
  --ink-500: oklch(0.600 0.012 258);   /* text-tertiary */
  --ink-600: oklch(0.510 0.014 258);   /* text-secondary */
  --ink-700: oklch(0.395 0.015 258);
  --ink-800: oklch(0.265 0.015 258);   /* text dark on light */
  --ink-900: oklch(0.175 0.014 258);   /* headings light mode */
  --ink-950: oklch(0.115 0.012 258);   /* ink on light */
  --ink-1000: oklch(0.06  0.010 258);

  /* ─── Accent ─── */
  --accent:        oklch(0.58 0.17 258);
  --accent-hover:  oklch(0.52 0.18 258);
  --accent-soft:   oklch(0.94 0.04 258);
  --accent-fg:     oklch(0.99 0.01 258);

  /* ─── Signal ─── */
  --success:       oklch(0.62 0.14 155);
  --success-soft:  oklch(0.94 0.05 155);
  --warn:          oklch(0.74 0.15 75);
  --warn-soft:     oklch(0.95 0.06 75);
  --danger:        oklch(0.58 0.18 25);
  --danger-soft:   oklch(0.95 0.05 25);
  --info:          oklch(0.65 0.13 220);
  --info-soft:     oklch(0.94 0.04 220);

  /* ─── Semantic (light mode defaults) ─── */
  --bg:            var(--ink-0);
  --surface:       #ffffff;
  --surface-2:     var(--ink-100);
  --surface-3:     var(--ink-150);
  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --text:          var(--ink-950);
  --text-2:        var(--ink-700);
  --text-3:        var(--ink-500);
  --text-muted:    var(--ink-400);
  --surface-hover: var(--ink-150);   /* row/card hover background */

  --brand-linkedin:      #0a66c2;
  --brand-teams-hover:   oklch(0.35 0.18 270);
  --brand-outlook-hover: oklch(0.40 0.18 220);

  /* ─── Radius ─── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 20px;

  /* ─── Space ─── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-14: 56px;
  --s-20: 80px;

  /* ─── Shadow (very subtle) ─── */
  --shadow-1: 0 1px 0 oklch(0 0 0 / 0.04), 0 1px 2px oklch(0 0 0 / 0.04);
  --shadow-2: 0 2px 4px oklch(0 0 0 / 0.05), 0 4px 12px oklch(0 0 0 / 0.06);
  --shadow-3: 0 8px 24px oklch(0 0 0 / 0.10), 0 2px 6px oklch(0 0 0 / 0.06);
  --shadow-pop: 0 12px 40px oklch(0 0 0 / 0.14), 0 4px 12px oklch(0 0 0 / 0.08);

  /* ─── Type ─── */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* ─── Motion ─── */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-smooth: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;

  /* ─── Layout ─── */
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 56px;
  --topbar-h: 48px;
  --content-max: 1440px;

  /* ─── Breakpoints canoniques (Phase 8 — documentation) ───
     CSS ne supporte pas les vars dans @media. Ces valeurs sont
     LA référence. Toute breakpoint nouveau doit s'y aligner.
       --bp-sm   600px  : mobile portrait
       --bp-md   900px  : tablet
       --bp-lg   1100px : desktop étroit */
  --bp-sm: 600px;
  --bp-md: 900px;
  --bp-lg: 1100px;

  /* ─── Scrollbar ─── */
  --scrollbar-size:        10px;
  --scrollbar-thumb:       oklch(0.80 0.010 258 / 0.55);
  --scrollbar-thumb-hover: oklch(0.70 0.012 258 / 0.75);
  --scrollbar-track:       transparent;

  /* ============================================================
     Phase 0 — Tokens d'extension (ajouts uniquement)
     Aucune valeur visuelle en dur dans les feuilles de page :
     toujours référencer un token. Voir RECTIFICATION_PLAN.
     ============================================================ */

  /* ─── Radius : combler le palier 12px très utilisé ─── */
  --r-card: 12px;                /* cards (ent-card, kpi-card, etc.) */

  /* ─── Shadows : variantes pour popovers / dropdowns ─── */
  --shadow-popover: 0 4px 16px oklch(0 0 0 / 0.18);
  --shadow-dropdown: 0 12px 28px -10px oklch(0 0 0 / 0.24);

  /* ─── Page header : valeurs canoniques ─── */
  --page-header-py: var(--s-4);   /* padding vertical */
  --page-eyebrow-size: 11px;
  --page-title-size: 28px;
  --page-title-family: var(--font-serif);
  --page-title-style: italic;
  --page-title-weight: 400;
  --page-title-tracking: -0.4px;
  --page-sub-size: 13px;

  /* ─── KPI : taille canonique + variantes ─── */
  --kpi-value-size: 32px;
  --kpi-value-size-sm: 22px;
  --kpi-value-size-hero: 36px;    /* dashboard hero uniquement */
  --kpi-label-size: 11px;

  /* ─── Inputs : DEUX hauteurs maximum ─── */
  --input-h: 32px;                /* défaut, partout */
  --input-h-lg: 40px;             /* modales, formulaires importants */
  --input-radius: var(--r-md);    /* 8px — aligné sur --btn */
  --input-radius-lg: var(--r-lg); /* 10px — pour la variante lg */

  /* ─── Avatar ─── */
  --avatar-size-sm: 24px;
  --avatar-size: 32px;            /* canonique */
  --avatar-size-md: 36px;
  --avatar-size-lg: 44px;
  --avatar-size-xl: 52px;         /* mode-prosp hero uniquement */
  --avatar-radius: 50%;
  --avatar-radius-square: var(--r-md); /* logos d'entreprises */

  /* ─── Brand colors externes (calendrier) ─── */
  --brand-teams: oklch(0.40 0.18 270);
  --brand-outlook: oklch(0.45 0.18 220);

  /* ─── Cream / papier chaud (écran de connexion « Marquise ») ─── */
  --cream:       oklch(0.985 0.006 80);   /* page bg login */
  --cream-2:     oklch(0.965 0.008 80);   /* surface ticker */
  --hair-warm:   oklch(0.870 0.010 80);   /* hairline crème */
  --hair-warm-2: oklch(0.918 0.008 80);   /* hairline papier */
}

/* ─────────── Dark mode ─────────── */
:root[data-theme="dark"] {
  --bg:            oklch(0.14 0.010 258);
  --surface:       oklch(0.175 0.012 258);
  --surface-2:     oklch(0.205 0.013 258);
  --surface-3:     oklch(0.235 0.014 258);
  --border:        oklch(0.26 0.014 258);
  --border-strong: oklch(0.32 0.015 258);
  --text:          oklch(0.97 0.003 258);
  --text-2:        oklch(0.78 0.010 258);
  --text-3:        oklch(0.60 0.013 258);
  --text-muted:    oklch(0.48 0.013 258);

  --scrollbar-thumb:       oklch(0.42 0.012 258 / 0.55);
  --scrollbar-thumb-hover: oklch(0.56 0.014 258 / 0.85);

  --accent:        oklch(0.70 0.17 258);
  --accent-hover:  oklch(0.76 0.16 258);
  --accent-soft:   oklch(0.30 0.08 258);
  --accent-fg:     oklch(0.12 0.01 258);

  --success-soft:  oklch(0.28 0.06 155);
  --warn-soft:     oklch(0.30 0.08 75);
  --danger-soft:   oklch(0.28 0.07 25);
  --info-soft:     oklch(0.28 0.06 220);

  --shadow-1: 0 1px 0 oklch(0 0 0 / 0.20), 0 1px 2px oklch(0 0 0 / 0.20);
  --shadow-2: 0 2px 4px oklch(0 0 0 / 0.30), 0 4px 12px oklch(0 0 0 / 0.30);
  --shadow-3: 0 8px 24px oklch(0 0 0 / 0.45);
  --shadow-pop: 0 16px 48px oklch(0 0 0 / 0.55);

  /* Phase 0 — overrides dark pour les shadows popover/dropdown.
     Les autres tokens ajoutés en Phase 0 sont des dimensions non-couleur :
     pas besoin de variante dark. */
  --shadow-popover: 0 4px 16px oklch(0 0 0 / 0.45);
  --shadow-dropdown: 0 12px 28px -10px oklch(0 0 0 / 0.55);

  --surface-hover: var(--surface-3);
  --brand-linkedin: oklch(0.60 0.17 248);  /* lighter on dark bg */
}

/* ─────────── Base ─────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03";
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* ─────────── Scrollbars (v30) ─────────── */
body[data-v30] {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
body[data-v30] ::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
body[data-v30] ::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
body[data-v30] ::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  transition: background-color var(--dur-2) var(--ease);
}
body[data-v30] ::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}
body[data-v30] ::-webkit-scrollbar-corner {
  background: transparent;
}