/*
 * Precision — design tokens.
 *
 * The single declaration of colour, radius, type and spacing for all three
 * NeuroStudio platforms: the Novasyne CTMS, the EEG workbench and the wearable
 * workbench. Nothing outside this file should name a colour.
 *
 * It is deliberately one file and not three. The two workbenches began as
 * standalone dark applications with palettes of their own, which is how a
 * channel ended up one colour in a Plotly trace and another in the topomap
 * beside it. One light theme, everywhere.
 *
 * The BOOTSTRAP BRIDGE section is what makes the framework agree with these
 * tokens rather than being overridden by them — it sets Bootstrap's own --bs-*
 * variables from ours, so there is one radius scale in play instead of two
 * competing through !important.
 *
 * Companion file: buttons.css, which builds the control hierarchy on top.
 */

/* ========================================
   DESIGN SYSTEM - CSS Custom Properties
   ======================================== */
:root {
  /* --- Brand -------------------------------------------------------------
     One colour, three depths. Deep petrol reads as clinical rather than
     corporate, and holds white text at every size. */
  --primary: #10506f;
  --primary-light: #17688e;
  --primary-dark: #0b3d55;
  --primary-soft: #e3eef4;

  /* --- Accent ------------------------------------------------------------
     Used for interactive emphasis only — links, focus, an active filter.
     Not a second brand colour and never used to mean "good". */
  --accent: #0a7d8c;
  --accent-light: #159aab;
  --accent-dark: #06616d;

  /* --- Semantic ----------------------------------------------------------
     What is happening to the data. Chosen to hold contrast on white at 12px,
     which is the size they appear at in a table chip. */
  --success: #16704f;
  --success-soft: #e2f1ea;
  --danger: #a52016;
  --danger-soft: #f8e6e4;
  --warning: #8a6100;
  --warning-soft: #f8efdc;
  --info: #0f5f86;
  --info-soft: #e2eef5;

  /* --- Surfaces ----------------------------------------------------------
     The neutral is biased toward the brand's cyan rather than pure grey, so
     it reads as chosen. Flat, not a gradient. */
  --surface: #ffffff;
  --surface-alt: #f2f6f9;
  --surface-hover: #eaf1f6;
  --background: #f7f9fb;

  /* --- Borders ---------------------------------------------------------- */
  --border: #d7e0e8;
  --border-light: #e8eef3;
  --border-strong: #b9c8d4;

  /* --- Chart axes ---------------------------------------------------------
     Separate from --border-strong, which is a decorative hairline and exempt
     from the 3:1 non-text rule. A chart's axis and zero line are not
     decoration — they are how a value is read off the plot — so they get a
     token that meets it. */
  --axis: #7b98ae;

  /* --- Type colours ----------------------------------------------------- */
  --text-primary: #14202b;
  --text-secondary: #566878;
  /* Was #8598a7, which measured 2.98:1 on white and 2.74:1 on --surface-alt —
     below WCAG AA for body text, and this token carries timestamps, helper
     text and every chart annotation. Darkened along the same hue until it
     passes on the harder of the two grounds. */
  --text-muted: #5f7383;
  --text-inverse: #ffffff;

  /* --- Typefaces ---------------------------------------------------------
     Plex Sans is a workhorse with unambiguous figures; Plex Mono is its
     companion, so numerals match in colour and weight across the two. Every
     figure that appears in a column — subject codes, values, timestamps —
     is set in the mono. */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --- Shadows -----------------------------------------------------------
     Barely there. An instrument does not float. */
  --shadow-sm: 0 1px 1px rgba(20, 32, 43, .04);
  --shadow: 0 1px 2px rgba(20, 32, 43, .06);
  --shadow-lg: 0 2px 6px rgba(20, 32, 43, .08);
  --shadow-xl: 0 8px 24px -12px rgba(20, 32, 43, .22);

  /* --- Radius ------------------------------------------------------------
     Sharp. These are also fed to Bootstrap below, so there is exactly one
     scale in play rather than ours competing with the framework's. */
  --radius-sm: 3px;
  --radius: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-pill: 999px;

  /* --- Navigation rail --------------------------------------------------- */
  --rail-width: 60px;
  --rail-bg: #0e3f57;
  --rail-ink: #b9d3e0;
  --rail-active: #ffffff;

  /* --- Transitions ------------------------------------------------------- */
  --transition-fast: 0.12s ease;
  --transition: 0.16s ease;
  --transition-slow: 0.24s ease;
}

/* ========================================
   BOOTSTRAP BRIDGE
   
   Bootstrap 5 reads its own custom properties. Setting them from our tokens
   is what makes the framework agree with the design system instead of being
   overridden by it — which is why the old button-group !important block that
   used to sit further down this file is gone.
   ======================================== */
:root {
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius: var(--radius);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-2xl: var(--radius-xl);
  --bs-border-radius-pill: var(--radius-pill);

  --bs-border-color: var(--border);
  --bs-border-width: 1px;

  --bs-body-bg: var(--background);
  --bs-body-color: var(--text-primary);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 14px;
  --bs-secondary-color: var(--text-secondary);
  --bs-secondary-bg: var(--surface-alt);
  --bs-tertiary-bg: var(--surface-alt);

  /* Both halves of every pair are needed. Bootstrap's utility classes —
     .bg-info, .text-bg-info, .badge.bg-* — resolve
     rgba(var(--bs-info-rgb), var(--bs-bg-opacity)), NOT var(--bs-info). Setting
     only the named token leaves those utilities on Bootstrap's own palette,
     which is how .badge.bg-info kept rendering in #0dcaf0 cyan while every
     other surface used the brand's petrol. */
  --bs-primary: var(--primary);
  --bs-primary-rgb: 16, 80, 111;
  --bs-secondary: var(--text-secondary);
  --bs-secondary-rgb: 86, 104, 120;
  --bs-success: var(--success);
  --bs-success-rgb: 22, 112, 79;
  --bs-danger: var(--danger);
  --bs-danger-rgb: 165, 32, 22;
  --bs-warning: var(--warning);
  --bs-warning-rgb: 138, 97, 0;
  --bs-info: var(--info);
  --bs-info-rgb: 15, 95, 134;

  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-dark);
  --bs-focus-ring-color: rgba(16, 80, 111, .28);
}

/* ========================================
   DATA COLOUR

   Separate from both the brand and the semantic colours, and it has to be:
   a channel plotted in --danger red would read as an alarm, and a band in
   --primary would read as chrome. These say "this series, not that one".

   Two sets, because the two encode different things:

     * regions are categorical — no order, so hues are spread evenly around
       the wheel at a common lightness, and neighbours stay distinguishable;
     * frequency bands are a sequence — delta through gamma is low to high, so
       a ramp is truthful where a rainbow would imply categories.

   Phase 7 applies these to Plotly, Bokeh and matplotlib so a channel is the
   same colour in every renderer.
   ======================================== */
:root {
  /* Categorical — scalp regions. */
  --series-1: #1f6f8b;
  --series-2: #b5652b;
  --series-3: #2f7d55;
  --series-4: #7a4b8f;
  --series-5: #a03a4e;
  --series-6: #46707f;
  --series-7: #7a7f4b;
  --series-neutral: #8598a7;

  /* Sequential — frequency, low to high. */
  --band-1: #123f63;
  --band-2: #1f6f8b;
  --band-3: #3f8f7a;
  --band-4: #97803a;
  --band-5: #a8552b;
}