/* ============================================================
   DealSource Design System — Design Tokens
   Reconciled to the Figma token export ("Practical Task | Deal source | Sem").
   Import once at the app root:  <link rel="stylesheet" href="tokens.css">
   Values marked (inferred) were not in the export and are best-fit from the design.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand — Endeavour ---------- */
  --ds-primary:        #0B8CEC;  /* Endeavour 500 — primary brand blue */
  --ds-primary-200:    #B9DEFE;  /* Endeavour 200 — light stop / info fill */
  --ds-primary-hover:  #0A79CC;  /* (inferred) darker press */
  --ds-primary-tint:   #DCEEFC;  /* (inferred) active nav, focus halo, chips */
  --ds-grad-primary:   linear-gradient(135deg, #B9DEFE 0%, #0B8CEC 100%); /* primary button + "Ask AI" */

  /* ---------- Neutrals ---------- */
  --ds-ink:        #09090B;  /* Grey 950 — primary text */
  --ds-ink-2:      #1C1B1B;  /* Woodsmoke 950 — secondary dark text / numbers */
  --ds-slate:      #5B6474;  /* (inferred) body-secondary */
  --ds-muted:      #8A93A4;  /* (inferred) meta, placeholders, timestamps */
  --ds-label-fg:   #3E4657;  /* (inferred) ALL-CAPS section labels */
  --ds-surface:    #FFFFFF;  /* opaque cards */
  --ds-surface-glass:     rgba(255,255,255,0.40); /* neutral frosted card fill */
  --ds-surface-glass-row: rgba(255,255,255,0.80); /* inner list rows */
  --ds-glass-border:      rgba(255,255,255,1);    /* bright 1px glass edge (no drop shadow) */
  /* App-shell glass surfaces injected by navbar.html — tokenized so a
     [data-theme] can re-skin the whole app's frosted panels at once. */
  --ds-glass-card:        rgba(255,255,255,0.62);
  --ds-glass-card-border: rgba(255,255,255,0.75);
  --ds-glass-row:         rgba(255,255,255,0.78);
  --ds-nav-hover:         #F1F3F8;  /* sidebar link hover fill */
  --ds-grad-hero:  linear-gradient(135deg, #FDF1D7 0%, #0B8CEC 100%); /* AI Deal Assistant frame: Christine 100 → Endeavour 500 */
  --ds-canvas:     #F4F6FB;  /* (inferred) flat page fallback */

  /* ---------- Borders / strokes ---------- */
  --ds-border:        rgba(9,9,11,0.08);   /* (inferred) hairline card/row border */
  --ds-border-strong: rgba(9,9,11,0.14);   /* (inferred) inputs, stronger dividers */
  --ds-stroke-button: rgba(255,255,255,0.60); /* White 60% — primary button border */
  --ds-app-frame:     #9CC0FF;  /* (inferred) rounded light-blue border around the whole app */

  /* ---------- Gradients (page-level, inferred from the design) ---------- */
  --ds-grad-canvas:   linear-gradient(105deg, #DBE5F4 0%, #EBEEF2 48%, #F5EFE6 100%); /* dashboard wash: cool-blue → warm-cream */
  --ds-grad-ai-panel: linear-gradient(150deg, #F6EEE6 0%, #EAF0FA 42%, #FBFCFE 100%); /* AI assistant card */
  /* amorphous glow field behind the frosted glass panels — layer this on the app shell */
  --ds-bg-amorphous:
    radial-gradient(640px 460px at 12% 8%,  rgba(11,140,236,.12), transparent 60%),
    radial-gradient(520px 420px at 88% 14%, rgba(246,214,180,.28), transparent 62%),
    radial-gradient(560px 520px at 70% 95%, rgba(185,222,254,.30), transparent 60%),
    var(--ds-grad-canvas);

  /* ---------- Status (badge = solid light fill + darker same-hue text) ---------- */
  --ds-success:    #0E6B37;  --ds-success-bg: #B9F9B9;  /* Green 200 — match / positive / approved */
  --ds-info:       #0B5A9A;  --ds-info-bg:    #B9DEFE;  /* Endeavour 200 — new deal / in progress */
  --ds-warning:    #783A16;  --ds-warning-bg: #FDEBD0;  /* Christine 900 — pending */
  --ds-danger:     #B4231F;  --ds-danger-bg:  #FBE0E0;  /* closed / rejected / negative */
  --ds-purple:     #7A54C9;  --ds-purple-bg:  #EFEAFB;  /* (inferred) published / secondary */

  /* role badges (from current pipeline: admin / supervisor / analyst) */
  --ds-role-admin:      #B4231F; --ds-role-admin-bg:      #FBE0E0;
  --ds-role-supervisor: #783A16; --ds-role-supervisor-bg: #FDEBD0;
  --ds-role-analyst:    #0E6B37; --ds-role-analyst-bg:    #B9F9B9;

  /* ---------- Typography — Space Grotesk (single family) ---------- */
  --ds-font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* One family. --ds-font-mono kept as an alias so numeric rules stay explicit;
     pair with tabular figures (.ds-num) rather than a separate mono face. */
  --ds-font-mono: var(--ds-font-sans);

  --ds-text-caption: 12px;  /* line-height 16 */
  --ds-text-body:    16px;  /* line-height 20 — default */
  --ds-text-stat:    24px;  /* line-height 32 — large numbers */
  --ds-text-heading: 28px;  /* line-height 28 — page heading */

  --ds-weight-regular: 400;
  --ds-weight-medium:  500;
  --ds-weight-bold:    700;  /* Space Grotesk tops out at 700 */

  --ds-track: 0;             /* letter-spacing is 0% across the design */
  --ds-track-label: 0.08em;  /* (inferred) ALL-CAPS section labels only */
  --ds-leading-caption: 16px;
  --ds-leading-body: 20px;
  --ds-leading-stat: 32px;
  --ds-leading-heading: 28px;

  /* ---------- Spacing (multiples of ~2/4) ---------- */
  --ds-space-0-5: 2px;
  --ds-space-1:   4px;
  --ds-space-1-5: 6px;
  --ds-space-2:   8px;
  --ds-space-3:   12px;
  --ds-space-3-5: 14px;
  --ds-space-4:   16px;
  /* larger rhythm (inferred) for section/page layout */
  --ds-space-6:   24px;
  --ds-space-8:   32px;

  /* ---------- Radius ---------- */
  --ds-radius-sm: 4px;   /* badges / chips */
  --ds-radius-md: 8px;   /* buttons */
  --ds-radius-lg: 12px;  /* bars / cards / panels */
  --ds-radius-pill: 999px; /* AI pill; avatars use 50% */

  /* ---------- Elevation (inferred, ink-tinted — never black) ---------- */
  --ds-shadow-sm: 0 1px 2px  rgba(9,9,11,.05);
  --ds-shadow-md: 0 4px 16px rgba(9,9,11,.06);
  --ds-shadow-lg: 0 14px 34px rgba(9,9,11,.10);
  --ds-focus-ring: 0 0 0 3px var(--ds-primary-tint);

  /* ---------- Effects ---------- */
  --ds-glass-blur: blur(4px);  /* white-80 surface + 4px background blur */

  /* ---------- Motion (inferred) ---------- */
  --ds-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-dur-fast: 120ms;
  --ds-dur-base: 200ms;
}

/* ============================================================
   Base resets
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-body);
  line-height: var(--ds-leading-body);
  letter-spacing: var(--ds-track);
  color: var(--ds-ink);
  background: var(--ds-canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-track); }
h1 { font-size: var(--ds-text-heading); line-height: var(--ds-leading-heading); }

p { margin: 0; color: var(--ds-slate); }

a { color: var(--ds-primary); text-decoration: none; transition: color var(--ds-dur-fast) var(--ds-ease); }
a:hover { color: var(--ds-primary-hover); }

.ds-num { font-feature-settings: 'tnum' 1; }  /* tabular figures for tables */

.ds-label {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-caption);
  font-weight: var(--ds-weight-medium);
  letter-spacing: var(--ds-track-label);
  text-transform: uppercase;
  color: var(--ds-label-fg);
}

::selection { background: var(--ds-primary-tint); }

/* ============================================================
   ZEN THEMES — opt-in, calming muted palettes.
   Applied via <html data-theme="zen-*">. Each block only REMAPS the
   neutral/brand/glass tokens onto a muted palette; status colors
   (success/warning/danger/info) are intentionally left untouched so
   pills stay semantic and legible. Default (no data-theme) = DS blue.
   Palettes were taken from the approved zen prototype; that prototype has
   since been removed, so these values are now the source of truth.
   ============================================================ */

[data-theme="zen-sage"] {
  --ds-primary:#5E8C7D; --ds-primary-hover:#4E786A; --ds-primary-200:#BFD3CB; --ds-primary-tint:#DCE6E1;
  --ds-grad-primary:linear-gradient(135deg,#C9CDBD 0%,#5E8C7D 100%);
  --ds-ink:#2C362E; --ds-ink-2:#2C362E; --ds-slate:#4F5951; --ds-muted:#737D75; --ds-label-fg:#3B453D;
  --ds-surface:#EDEFE4; --ds-canvas:#BEC2B1;
  --ds-surface-glass:rgba(237,239,228,0.55); --ds-surface-glass-row:rgba(237,239,228,0.86);
  --ds-glass-card:rgba(237,239,228,0.72); --ds-glass-card-border:rgba(255,255,255,0.55); --ds-glass-row:rgba(237,239,228,0.88);
  --ds-border:rgba(44,54,46,0.10); --ds-border-strong:rgba(44,54,46,0.16); --ds-nav-hover:#DCE6E1;
  --ds-grad-canvas:linear-gradient(105deg,#C9CDBD 0%,#BEC2B1 48%,#CBCFBE 100%);
  --ds-bg-amorphous:
    radial-gradient(1000px 640px at 15% -8%, #C9CDBD 0%, transparent 60%),
    radial-gradient(820px 560px at 108% 6%, #CBCFBE 0%, transparent 55%),
    var(--ds-canvas);
}
[data-theme="zen-lavender"] {
  --ds-primary:#7E6F9E; --ds-primary-hover:#6C5D8C; --ds-primary-200:#CFC7DE; --ds-primary-tint:#E5E1EC;
  --ds-grad-primary:linear-gradient(135deg,#BDB7D0 0%,#7E6F9E 100%);
  --ds-ink:#332F3C; --ds-ink-2:#332F3C; --ds-slate:#57536A; --ds-muted:#807C8F; --ds-label-fg:#453F52;
  --ds-surface:#F0EFF5; --ds-canvas:#B2ACC6;
  --ds-surface-glass:rgba(240,239,245,0.55); --ds-surface-glass-row:rgba(240,239,245,0.86);
  --ds-glass-card:rgba(240,239,245,0.72); --ds-glass-card-border:rgba(255,255,255,0.55); --ds-glass-row:rgba(240,239,245,0.88);
  --ds-border:rgba(51,47,60,0.10); --ds-border-strong:rgba(51,47,60,0.16); --ds-nav-hover:#E5E1EC;
  --ds-grad-canvas:linear-gradient(105deg,#BDB7D0 0%,#B2ACC6 48%,#C3BCD6 100%);
  --ds-bg-amorphous:
    radial-gradient(1000px 640px at 15% -8%, #BDB7D0 0%, transparent 60%),
    radial-gradient(820px 560px at 108% 6%, #C3BCD6 0%, transparent 55%),
    var(--ds-canvas);
}
[data-theme="zen-mist"] {
  --ds-primary:#5E7F92; --ds-primary-hover:#4E6C7E; --ds-primary-200:#C3D2DA; --ds-primary-tint:#DDE6EB;
  --ds-grad-primary:linear-gradient(135deg,#BAC3CB 0%,#5E7F92 100%);
  --ds-ink:#2E353B; --ds-ink-2:#2E353B; --ds-slate:#4E5860; --ds-muted:#79838B; --ds-label-fg:#3C454C;
  --ds-surface:#EDF0F3; --ds-canvas:#ABB4BD;
  --ds-surface-glass:rgba(237,240,243,0.55); --ds-surface-glass-row:rgba(237,240,243,0.86);
  --ds-glass-card:rgba(237,240,243,0.72); --ds-glass-card-border:rgba(255,255,255,0.55); --ds-glass-row:rgba(237,240,243,0.88);
  --ds-border:rgba(46,53,59,0.10); --ds-border-strong:rgba(46,53,59,0.16); --ds-nav-hover:#DDE6EB;
  --ds-grad-canvas:linear-gradient(105deg,#BAC3CB 0%,#ABB4BD 48%,#BEC6CD 100%);
  --ds-bg-amorphous:
    radial-gradient(1000px 640px at 15% -8%, #BAC3CB 0%, transparent 60%),
    radial-gradient(820px 560px at 108% 6%, #BEC6CD 0%, transparent 55%),
    var(--ds-canvas);
}
[data-theme="zen-clay"] {
  --ds-primary:#A0765C; --ds-primary-hover:#8A644C; --ds-primary-200:#DAC7B7; --ds-primary-tint:#EDE2D9;
  --ds-grad-primary:linear-gradient(135deg,#CCC2B3 0%,#A0765C 100%);
  --ds-ink:#383129; --ds-ink-2:#383129; --ds-slate:#6A6055; --ds-muted:#948A7D; --ds-label-fg:#4A4136;
  --ds-surface:#F3EEE6; --ds-canvas:#C1B6A6;
  --ds-surface-glass:rgba(243,238,230,0.55); --ds-surface-glass-row:rgba(243,238,230,0.86);
  --ds-glass-card:rgba(243,238,230,0.72); --ds-glass-card-border:rgba(255,255,255,0.55); --ds-glass-row:rgba(243,238,230,0.88);
  --ds-border:rgba(56,49,41,0.10); --ds-border-strong:rgba(56,49,41,0.16); --ds-nav-hover:#EDE2D9;
  --ds-grad-canvas:linear-gradient(105deg,#CCC2B3 0%,#C1B6A6 48%,#CEC3B2 100%);
  --ds-bg-amorphous:
    radial-gradient(1000px 640px at 15% -8%, #CCC2B3 0%, transparent 60%),
    radial-gradient(820px 560px at 108% 6%, #CEC3B2 0%, transparent 55%),
    var(--ds-canvas);
}
[data-theme="zen-rose"] {
  --ds-primary:#9C6E79; --ds-primary-hover:#875E68; --ds-primary-200:#D8C1C8; --ds-primary-tint:#EEE0E4;
  --ds-grad-primary:linear-gradient(135deg,#CBBBC1 0%,#9C6E79 100%);
  --ds-ink:#372F33; --ds-ink-2:#372F33; --ds-slate:#6A5B60; --ds-muted:#948089; --ds-label-fg:#493E43;
  --ds-surface:#F4EDEF; --ds-canvas:#BEAEB4;
  --ds-surface-glass:rgba(244,237,239,0.55); --ds-surface-glass-row:rgba(244,237,239,0.86);
  --ds-glass-card:rgba(244,237,239,0.72); --ds-glass-card-border:rgba(255,255,255,0.55); --ds-glass-row:rgba(244,237,239,0.88);
  --ds-border:rgba(55,47,51,0.10); --ds-border-strong:rgba(55,47,51,0.16); --ds-nav-hover:#EEE0E4;
  --ds-grad-canvas:linear-gradient(105deg,#CBBBC1 0%,#BEAEB4 48%,#CDBCC2 100%);
  --ds-bg-amorphous:
    radial-gradient(1000px 640px at 15% -8%, #CBBBC1 0%, transparent 60%),
    radial-gradient(820px 560px at 108% 6%, #CDBCC2 0%, transparent 55%),
    var(--ds-canvas);
}