/* Crank shared design tokens: the colours, surfaces, borders, shadows and radius every client
 * report uses, for the dark theme (default) and the light theme. Change them HERE, never in a
 * page. Before this file each report carried its own copy, some pages used variables they never
 * defined, and one darkened the brand colours (Architecture/shared_report_library_spec_v1.md).
 *
 * Load it in <head> BEFORE the page's own <style>, so a page can still add a token of its own:
 *   <link rel="stylesheet" href="/Crank-platform/shared/tokens.css">
 * The light theme applies when <html data-theme="light"> is set (the pages' theme toggle and the
 * pre-paint script in each <head>); dark is the default. Tokens only: no element styles here.
 */
:root {
  /* ── Brand colours. Fixed: never altered, not even for contrast (CLAUDE.md critical rule 10).
        The same in both themes. ── */
  --crank-blue:  #34A5DA;
  --crank-blue2: #53AEEF;
  --crank-green: #85C515;
  --crank-amber: #FDBD17;
  --crank-red:   #D51F29;
  /* The same colours as "r,g,b", for tints: background: rgba(var(--accent-rgb), .12) */
  --accent-rgb: 52,165,218;
  --green-rgb:  133,197,21;
  --amber-rgb:  253,189,23;
  --red-rgb:    213,31,41;

  /* ── What the brand colours are used for ── */
  --accent: var(--crank-blue);   /* links, active states, primary buttons, selected ranges */
  --blue2:  var(--crank-blue2);  /* hover on accent buttons */
  --green:  var(--crank-green);  /* good / up */
  --amber:  var(--crank-amber);  /* warning / comparison period */
  --red:    var(--crank-red);    /* bad / down */

  /* ── Ad platforms' own colours ── */
  --meta:     #1877f2;
  --google:   #ea4335;
  --linkedin: #0a66c2;

  /* ── Dark theme (default) ── */
  --bg:      #0D1B2A;   /* page background */
  --mid:     #162433;   /* header, bars, modals */
  --white:   #1E2F3E;   /* cards and inputs: the card surface, whatever the name says */
  --border:  rgba(74,96,112,.35);
  --border2: rgba(74,96,112,.2);
  --text:    #ffffff;
  --muted:   #9BBBD4;
  --light:   #4A6070;   /* faint text: disabled, other-month days */
  --radius:  8px;
  --shadow:    0 2px 8px rgba(0,0,0,.25);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.4);
  --hover-overlay:        rgba(255,255,255,.05);
  --hover-overlay-subtle: rgba(255,255,255,.03);
  --chart-grid: rgba(74,96,112,.15);   /* chart gridlines (charts.js) */

  /* ── Older names some pages still use. Same values; use the names above in new code. ── */
  --blue:   var(--accent);
  --card:   var(--white);
  --subtle: var(--light);
  --r:      var(--radius);
}

:root[data-theme="light"] {
  --bg:      #F1F3F5;
  --mid:     #FFFFFF;
  --white:   #FFFFFF;
  --border:  rgba(13,27,42,.12);
  --border2: rgba(13,27,42,.08);
  --text:    #1B2733;
  --muted:   #62727E;
  --light:   #8A99A3;
  --shadow:    0 1px 3px rgba(13,27,42,.08);
  --shadow-lg: 0 8px 24px rgba(13,27,42,.12);
  --hover-overlay:        rgba(13,27,42,.05);
  --hover-overlay-subtle: rgba(13,27,42,.03);
  --chart-grid: rgba(13,27,42,.08);
}