/* ============================================================
   Lexicon base tokens — vanilla
   Copy of tokens.css trimmed to colors, spacing, typography,
   radius and shadow. Light mode only — no theming layer.
   ============================================================ */

:root {

  /* ── Color: Primary ── */
  --color-primary-d2: #004AD7;
  --color-primary-d1: #0053F0;
  --color-primary:    #0B5FFF;
  --color-primary-l0: #5791FF;
  --color-primary-l1: #80ACFF;
  --color-primary-l2: #B3CDFF;
  --color-primary-l3: #F0F5FF;

  /* ── Color: Secondary ── */
  --color-secondary:    #6B6C7E;
  --color-secondary-l0: #9393A4;
  --color-secondary-l1: #A7A9BC;
  --color-secondary-l2: #CDCED9;
  --color-secondary-l3: #E7E7ED;

  /* ── Color: Dark / Light ── */
  --color-dark-d2: #111116;
  --color-dark-d1: #1C1C24;
  --color-dark:    #272833;
  --color-dark-l1: #30313F;
  --color-dark-l2: #393A4A;
  --color-light-d2: #D3D6E0;
  --color-light-d1: #E2E4EA;
  --color-light:    #F1F2F5;
  --color-light-l1: #F7F8F9;
  --color-white:    #FFFFFF;

  /* Scrim — dim layer behind overlays (mobile drawer, dialogs). Kept as a
     stable dark tint in every skin (dark counterpart in tokens-dark.css), so
     it never inverts the way --color-dark does. */
  --color-scrim: rgba(57, 58, 74, 0.5);

  /* ── Color: Success ── */
  --color-success-d2: #1C5629;
  --color-success-d1: #226A33;
  --color-success:    #287D3C;
  --color-success-l1: #5ACA75;
  --color-success-l2: #EDF9F0;

  /* ── Color: Info ── */
  --color-info-d2: #234584;
  --color-info-d1: #294F98;
  --color-info:    #2E5AAC;
  --color-info-l1: #89A7E0;
  --color-info-l2: #EEF2FA;

  /* ── Color: Warning ── */
  --color-warning-d2: #863A00;
  --color-warning-d1: #9F4500;
  --color-warning:    #B95000;
  --color-warning-l1: #FF8F39;
  --color-warning-l2: #FFF4EC;

  /* ── Color: Danger ── */
  --color-danger-d2: #AB1010;
  --color-danger-d1: #C31212;
  --color-danger:    #DA1414;
  --color-danger-l1: #F48989;
  --color-danger-l2: #FEEFEF;

  /* ── Spacing ── */
  --spacing-1:   2px;
  --spacing-2:   4px;
  --spacing-2-5: 6px;
  --spacing-3:   8px;
  --spacing-4:   12px;
  --spacing-5:   16px;
  --spacing-6:   20px;
  --spacing-7:   24px;
  --spacing-8:   32px;
  --spacing-9:   40px;
  --spacing-10: 48px;

  /* ── Border radius ── */
  --rounded-sm:    4px;
  --rounded-md:    8px;
  --rounded-lg:    16px;
  --rounded-xl:    16px;
  --rounded-full:  9999px;

  /* ── Typography ── */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-xs:   10px;
  --font-size-sm:   12px;
  --font-size-base: 14px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   20px;
  --font-size-2xl:  28px;
  --font-size-3xl:  32px;
  /* Names are one step off Figma: Regular 400 = --semi, Semibold 600 = --bold.
     --normal is also Regular (400; was 300). See CLAUDE.md › Known caveats. */
  --font-weight-normal: 400;
  --font-weight-semi:   400;
  --font-weight-bold:   600;
  --line-height-base:   1.5;

  /* ── Shadow ── */
  --shadow-sm:         0 1px 2px rgba(39, 40, 51, 0.10);
  --shadow-card:       0 2px 4px rgba(39, 40, 51, 0.12);
  --shadow-md:         0 2px 8px rgba(39, 40, 51, 0.14);
  --shadow-dropdown:   0 4px 8px rgba(39, 40, 51, 0.12);
  --shadow-lg:         0 4px 16px rgba(39, 40, 51, 0.18);
  --shadow-alert:      0 8px 16px rgba(39, 40, 51, 0.20);
  /* Scroll shadows — a soft edge cast by sticky chrome (header / footer) over
     scrolling content, shown only while content is clipped past that edge. */
  --shadow-scroll-top:    0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-scroll-bottom: 0 -4px 24px rgba(0, 0, 0, 0.08);

  /* ── Focus ring ── */
  --focus-ring: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-l0);

  /* ── Navigation chrome (Top Bar / Side Menu / Global Menu satellites) ──
     --top-bar-height is the 32px toggle + 2×12px padding; components.css
     drops it to 48px (2×8px) below 768px. */
  --top-bar-height:    calc(var(--spacing-8) + 2 * var(--spacing-4));
  --side-menu-width:   280px;
  --global-menu-width: 240px;

  /* ── Chart colors ── */
  --blue-d4: #004799;
  --blue-d3: #0053B3;
  --blue-d2: #005FCC;
  --blue-d1: #006BE6;
  --blue:    #006EFF;
  --blue-l1: #338FFF;
  --blue-l2: #66ABFF;
  --blue-l3: #97C5FF;
  --blue-l4: #CCE3FF;
  --blue-l5: #E5F1FF;

  --orange-d4: #662700;
  --orange-d3: #803100;
  --orange-d2: #993B00;
  --orange-d1: #B34400;
  --orange:    #CC4E00;
  --orange-l1: #FF6200;
  --orange-l2: #FF8133;
  --orange-l3: #FFA166;
  --orange-l4: #FFC099;
  --orange-l5: #FFF0E5;

  --red-d4: #800000;
  --red-d3: #990000;
  --red-d2: #B30000;
  --red-d1: #CC0000;
  --red:    #E50000;
  --red-l1: #FF4D4D;
  --red-l2: #FF6666;
  --red-l3: #FF8080;
  --red-l4: #FF9999;
  --red-l5: #FFE5E5;

  --teal-d4: #092A25;
  --teal-d3: #0D3F37;
  --teal-d2: #125449;
  --teal-d1: #16695B;
  --teal:    #1B7E6E;
  --teal-l1: #24A892;
  --teal-l2: #42D7BE;
  --teal-l3: #6CE0CC;
  --teal-l4: #96E9DB;
  --teal-l5: #EAFBF8;

  --pink-d4: #800048;
  --pink-d3: #990057;
  --pink-d2: #B30065;
  --pink-d1: #CC0074;
  --pink:    #E50082;
  --pink-l1: #FF4DB2;
  --pink-l2: #FF80C8;
  --pink-l3: #FF99D3;
  --pink-l4: #FFB2DE;
  --pink-l5: #FFE5F4;

  --green-d4: #162D06;
  --green-d3: #22430A;
  --green-d2: #2E590D;
  --green-d1: #397010;
  --green:    #458613;
  --green-l1: #53A117;
  --green-l2: #67C91D;
  --green-l3: #81E236;
  --green-l4: #9DE963;
  --green-l5: #F1FCE9;

  --purple-d4: #7700CC;
  --purple-d3: #8600E6;
  --purple-d2: #9500FF;
  --purple-d1: #9F1AFF;
  --purple:    #AA33FF;
  --purple-l1: #BF66FF;
  --purple-l2: #CA80FF;
  --purple-l3: #D499FF;
  --purple-l4: #DFB3FF;
  --purple-l5: #F2E5FF;

  --yellow-d4: #997000;
  --yellow-d3: #B38900;
  --yellow-d2: #CC9600;
  --yellow-d1: #E6A800;
  --yellow:    #FFBB00;
  --yellow-l1: #FFC933;
  --yellow-l2: #FFD666;
  --yellow-l3: #FFE499;
  --yellow-l4: #FFF1CC;
  --yellow-l5: #FFF8E5;

  --cyan-d4: #00334D;
  --cyan-d3: #004466;
  --cyan-d2: #005580;
  --cyan-d1: #006699;
  --cyan:    #0077B3;
  --cyan-l1: #0099E6;
  --cyan-l2: #33BBFF;
  --cyan-l3: #66CCFF;
  --cyan-l4: #99DDFF;
  --cyan-l5: #E5F6FF;

  --indigo-d4: #0017E5;
  --indigo-d3: #001AFF;
  --indigo-d2: #1A30FF;
  --indigo-d1: #3347FF;
  --indigo:    #4D5FFF;
  --indigo-l1: #808CFF;
  --indigo-l2: #99A3FF;
  --indigo-l3: #B2BAFF;
  --indigo-l4: #CCD1FF;
  --indigo-l5: #E5E8FF;
}

/* Sensible defaults for the document */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-dark);
  background: var(--color-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  margin: 0;
}

p { margin: 0; }

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-d1); }

/* ============================================================
   SKELETON tokens — loading-state shapes and shimmer sweep.
   Shape and surface resolve from the semantic scale (they flip
   per skin automatically); the shimmer gradient needs raw RGB
   components, overridden for dark skins in tokens-dark.css.
   ============================================================ */
:root {
  --skeleton-shape: var(--color-secondary-l3);
  --skeleton-surface: var(--color-light-l1);
  --skeleton-shimmer-rgb: 247, 248, 249;  /* light-l1 */
  --skeleton-shimmer-alpha: 0.6;
}

/* ============================================================
   CHART tokens — categorical series, sequential buckets and
   plot structure.
   Categorical series alias the base chart hues (--yellow, --blue,
   …) in a fixed order chosen for maximum adjacent contrast and
   accessibility; the base hues already carry per-skin overrides,
   so charts reskin for free. (Never point a series at a -l2/-l3
   tint — those collapse to near-white in the HC skins.) The
   sequential buckets alias the --blue scale, and the structural
   tokens alias the semantic scale so grid / track / halo / axis /
   land flip per skin automatically.
   ============================================================ */
:root {
  /* Categorical series — bar (stacked), pie, multi-series line.
     Ordered for maximum adjacent contrast + accessibility; alias
     the base chart hues so each series reskins per skin. */
  --chart-1:  var(--yellow);
  --chart-2:  var(--blue);
  --chart-3:  var(--orange);
  --chart-4:  var(--teal);
  --chart-5:  var(--pink);
  --chart-6:  var(--cyan);
  --chart-7:  var(--red);
  --chart-8:  var(--purple);
  --chart-9:  var(--green);
  --chart-10: var(--indigo);

  /* Sequential buckets — single hue, less → more (map, heat) */
  --chart-seq-1: var(--blue-l4);
  --chart-seq-2: var(--blue-l2);
  --chart-seq-3: var(--blue);

  /* Plot structure — flip per skin through the semantic scale */
  --chart-track:     var(--color-light-d1);   /* bar track / gridlines (#E2E4EA) */
  --chart-grid:      var(--color-light-d1);   /* axis gridlines */
  --chart-halo:      var(--color-white);      /* marker + segment separators */
  --chart-axis:      var(--color-secondary);  /* axis + tick labels */
  --chart-land:      var(--color-light);      /* map land fill (#F1F2F5) */
  --chart-land-line: var(--color-light-d1);   /* map land borders (#E2E4EA) */
}