/* tokens.css - BigBongo design system v2 (19-10-2026, spec 351)
   One colour family for every neutral: indigo navy, hue ~240, low saturation.
   Colours are R G B channels so Tailwind opacity works: bg-surface/50, ring-ring/30.
   Contrast figures are measured on surface; every text token also passes 4.5:1 on panel-hover.
   Designed in the Claude Design project "BigBongo design system round one"; this file is the source of truth. */
:root {
  color-scheme: dark;                /* native controls and scrollbars draw dark */

  /* Layers - each step is one lightness step up the same indigo. Page has no gradient. */
  --base:        16 16 32;           /* page background, behind everything #101020 */
  --sidebar:     16 16 32;           /* app sidebar and top bar - same as base, split by a border #101020 */
  --surface:     22 22 42;           /* section, page-level card, modal, drawer, menu #16162a */
  --panel:       30 30 54;           /* card inside a section, input, table header, row hover in a section #1e1e36 */
  --panel-hover: 38 38 66;           /* hover on anything clickable that is not a row in a section #262642 */

  /* Edges - always 1px, always opaque */
  --border:        43 43 72;         /* every section, card, input and divider #2b2b48 */
  --border-strong: 58 58 92;         /* hovered input, overlay edge, unchecked control edge #3a3a5c */

  /* Text - four tiers, all AA on base, surface, panel and panel-hover */
  --copy:    237 237 245;            /* headings, figures, primary content #ededf5 - 15.3:1 */
  --muted:   194 194 214;            /* body and reading text #c2c2d6 - 10.1:1 */
  --subtle:  162 162 192;            /* supporting lines, captions, help text #a2a2c0 - 7.2:1 */
  --faint:   142 142 174;            /* eyebrows, column headers, dates, placeholders #8e8eae - 5.6:1, 4.6:1 on panel-hover */

  /* Brand */
  --primary:            109 92 250;  /* brand violet: primary button, selected, active tab line #6d5cfa */
  --primary-hover:      125 110 251; /* primary button hover #7d6efb */
  --primary-light:      164 151 255; /* violet as text (text-primary-light): links, active nav icon #a497ff - 7.2:1 */
  --primary-foreground: 255 255 255; /* text on a violet fill - 4.6:1 */
  --ring:               139 124 255; /* focus ring #8b7cff */

  /* State - only when something genuinely succeeded, needs attention or failed */
  --success:       34 197 94;        /* done, documented, good grade #22c55e */
  --success-light: 110 231 183;      /* a success value drawn as a large figure #6ee7b7 */
  --warning:       234 179 8;        /* needs attention, middling grade #eab308 */
  --error:         248 113 113;      /* failed, blocked, destructive, bad grade #f87171 - 6.4:1, 5.3:1 on panel-hover */

  /* Category - interview types and priority. Only as badge text on its own tint, a dot or a fill */
  --deepdive:      224 122 168;      /* Process Deep Dive - rose #e07aa8 */
  --explore:       77 191 174;       /* Deep Dive - teal #4dbfae */
  --investigation: 214 164 65;       /* Process Investigation - amber #d6a441 */
  --mapping:       91 157 224;       /* Mapping - blue #5b9de0 */
  --high:          224 101 95;       /* High priority #e0655f */

  /* Staff - every control only BigBongo staff can see. Nothing else */
  --ghost:         240 92 166;       /* staff-only pink #f05ca6 - 5.7:1, 4.7:1 on panel-hover */

  /* Group identity - tells groups apart (report problem groups, plan phases). Never a state.
     A group keeps its slot by its key; slots cycle 1-5. Used as a dot, a 2px top line, a figure.
     Values from develop (spec 300-27, 21-10-2026): late retention's coral replaces the green that read as good news. */
  --group-1:   214 164 65;           /* amber #d6a441 */
  --group-2:   91 157 224;           /* blue #5b9de0 */
  --group-3:   224 122 168;          /* rose #e07aa8 */
  --group-4:   240 132 92;           /* coral #f0845c */
  --group-5:   77 191 174;           /* teal #4dbfae */

  /* Kinds of change on the Optimizations tab (spec 328): one hue per family of change, for its type
     badges and its sub-tabs only. Clear of the problem groups, the states, primary and ghost. */
  --kind-1:    34 211 238;           /* cyan #22d3ee */
  --kind-2:    129 140 248;          /* indigo #818cf8 */
  --kind-3:    251 146 60;           /* orange #fb923c */
  --kind-4:    163 230 53;           /* lime #a3e635 */
  --kind-5:    214 188 150;          /* sand #d6bc96 */

  /* Chart series - team comparison, max four teams next to Everyone (spec 290). Ordered so the
     first teams picked sit furthest from mapping and success (Everyone) and from warning. */
  --series-1:  217 70 239;           /* fuchsia */
  --series-2:  45 212 191;           /* teal */
  --series-3:  249 115 22;           /* orange */
  --series-4:  56 189 248;           /* sky */

  /* Overlay backdrop */
  --backdrop:  6 6 14;               /* behind a modal, used at /70 #06060e */

  /* Shadows - full values, not channels. Depth reads from lightness first */
  --shadow-card:    0 1px 2px 0 rgb(0 0 0 / 0.35), inset 0 1px 0 0 rgb(255 255 255 / 0.03); /* section and page-level card */
  --shadow-overlay: 0 16px 40px -12px rgb(0 0 0 / 0.7), 0 4px 12px -4px rgb(0 0 0 / 0.4);     /* menu, popover, tooltip, drawer, modal, toast */

  /* Breathing room (owner 20-10-2026: option A, roomier). The ONE place to make pages tighter or roomier:
     p-section / gap-section / space-y-section use --space-section; mt-title uses --space-title. */
  --space-section: 32px;             /* inside a section, between sections, page header to tabs to content */
  --space-title:   20px;             /* a section title to its body */

  /* Corners */
  --radius-sm: 6px;                  /* rounded-md: badge, checkbox, segment, menu item, tooltip */
  --radius:    8px;                  /* rounded-lg: button, input, card inside a section */
  --radius-lg: 12px;                 /* rounded-xl: section, page-level card, modal, menu, popover, toast */

  /* The unfold motion (spec 300-27): one motion for every expand of the analysis report. Open grows on an
     ease-out, close shrinks on an ease-in, the content fades in a little after the open starts. */
  --motion-open: 240ms;
  --motion-open-ease: cubic-bezier(.2, 0, 0, 1);
  --motion-close: 180ms;
  --motion-close-ease: cubic-bezier(.4, 0, 1, 1);
  --motion-fade-in: 160ms;
  --motion-fade-delay: 60ms;
  --motion-fade-out: 100ms;

  /* Mock - the light client-app prototypes inside the Report only (spec 284), so a prototype of
     the software we would build never reads as BigBongo's own UI */
  --mock-frame:      31 42 68;       /* navy frame around the window #1f2a44 */
  --mock-bar:        243 243 246;    /* the window's top bar #f3f3f6 */
  --mock-pill:       238 238 243;    /* neutral pills #eeeef3 */
  --mock-page:       255 255 255;    /* the window #ffffff */
  --mock-card:       255 255 255;    /* cards, inputs #ffffff */
  --mock-line:       231 231 238;    /* borders #e7e7ee */
  --mock-ink:        29 30 38;       /* main text #1d1e26 */
  --mock-ink-soft:   107 111 125;    /* secondary text #6b6f7d */
  --mock-ink-faint:  148 152 166;    /* labels #9498a6 */
  --mock-brand:      37 99 235;      /* neutral main action #2563eb */
  --mock-accept:     22 163 74;      /* accept, submit, done #16a34a */
  --mock-reject:     220 38 38;      /* reject, send back #dc2626 */
  --mock-wait:       217 119 6;      /* late, needs attention #d97706 */
  /* The client's look (spec 324 client look in windows) may set every value above per window; these follow from
     it. The text on a filled button and on the frame is worked out by code from that colour. */
  --mock-on-brand:   255 255 255;    /* text on the main action */
  --mock-on-accept:  255 255 255;    /* text on accept */
  --mock-on-reject:  255 255 255;    /* text on reject */
  --mock-on-frame:   255 255 255;    /* text on the frame around the window */
  --mock-panel:      31 42 68;       /* a screen's summary panel, when the client's look has one #1f2a44 */
  --mock-on-panel:   255 255 255;    /* text on the summary panel */
  --mock-brand-text:  37 99 235;     /* the main action as text, readable on the page */
  --mock-accept-text: 22 163 74;     /* done as text */
  --mock-wait-text:   217 119 6;     /* late as text */
  --mock-reject-text: 220 38 38;     /* sent back as text */
  --mock-radius:     0.5rem;         /* cards and inputs */
  --mock-radius-btn: 9999px;         /* buttons */
  --mock-font:       "Inter";
  --mock-type:       1;              /* the client's type size against ours */
  --mock-space:      1;              /* the client's spacing against ours */
}

/* TEMPORARY - removed by design system v2, kept only until every page is moved to it (the lock,
   spec 351). Pages already moved never use these; scripts/check_design_system.py fails them if they do.
   --primary-text   old text-primary meant near-white. Moved pages write text-copy or text-primary-foreground,
                    and violet text as text-primary-light. At the lock text-primary becomes violet.
   --page-gradient  the violet glow is gone everywhere: an empty image keeps old markup valid.
   --accent-*, --card-*  legacy tints outside the layer model; moved pages use surface / panel / group-1..4. */
:root {
  --primary-text:   240 240 240;
  --page-gradient:  none;
  --accent-orange:  255 85 0;
  --accent-blue:    0 150 255;
  --card-secondary: 45 35 65;
  --card-info:      58 55 48;
  --card-accent:    42 46 65;
  --card-code:      2 3 12;
  --card-warning:   60 45 20;
}

/* TEMPORARY - old modals only. Moved overlays use border-border-strong + shadow-overlay. */
.modal-dialog {
  border-color: rgba(255, 255, 255, 0.25) !important;
}