/* ============================================================
   retention — Design System Tokens
   Kryptonite scheme · dark + light modes.
   ============================================================ */

:root {
  /* ── Typography ── */
  --font-sans:  'Golos Text', system-ui, -apple-system, sans-serif;
  --font-mono:  'Fragment Mono', 'Menlo', 'Consolas', monospace;

  /* ── Type scale ── */
  --text-3xs:  9px;
  --text-2xs: 10px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  14px;
  --text-base:15px;
  --text-lg:  16px;
  --text-xl:  18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 32px;
  --text-5xl: 48px;

  /* ── Line heights ── */
  --leading-none:   1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;

  /* ── Spacing (4px base unit, fractional steps with underscore) ── */
  --space-0_5:  2px;
  --space-1:    4px;
  --space-1_5:  6px;
  --space-2:    8px;
  --space-2_5: 10px;
  --space-3:   12px;
  --space-3_5: 14px;
  --space-4:   16px;
  --space-4_5: 18px;
  --space-5:   20px;
  --space-5_5: 22px;
  --space-6:   24px;
  --space-7:   28px;
  --space-7_5: 30px;
  --space-8:   32px;
  --space-9:   36px;
  --space-9_5: 38px;
  --space-10:  40px;
  --space-10_5:42px;
  --space-11:  44px;
  --space-12:  48px;
  --space-13:  52px;
  --space-15:  60px;
  --space-24:  96px;

  /* ── Border radii ── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:  10px;
  --radius-xl:  14px;
  --radius-2xl: 18px;
  --radius-full:9999px;

  /* ── Colors: defaults = kryptonite · dark ── */
  --color-bg:            #0B0912;
  --color-surface:       #1C182F;
  --color-surface-2:     #2D2749;
  --color-border:        #342B55;
  --color-border-strong: #403569;
  --color-fg:            #FFFFFF;
  --color-fg-muted:      #9E97B2;

  --color-primary:       #5B1BFE;
  --color-primary-hover: #3800C7;
  --color-primary-press: #2A0094;
  --color-primary-fg:    #FFFFFF;
  --color-primary-soft:  #362267;
  --color-primary-text:  #DED1FF;

  --color-accent:        #42FF87;
  --color-accent-hover:  #00BD45;
  --color-accent-fg:     #1F2606;
  --color-accent-soft:   #124038;

  --color-success:       #64CE66;
  --color-warning:       #FFC24B;
  --color-danger:        #FF6477;
  --color-info:          #5BA8FF;

  --color-graph-success: #5B1BFE;
  --color-graph-failed:  #F2734B;
  --color-graph-nodata:  #2c9583;

  /* ── Shadows ── */
  --shadow-card:    0 1px 0 rgba(255,255,255,.025) inset, 0 10px 30px rgba(0,0,0,.5);
  --shadow-popover: 0 10px 40px rgba(0,0,0,.58), 0 2px 8px rgba(0,0,0,.36);

  /* ── Glows ── */
  --glow-primary: 0 0 0 3px rgba(91,27,254,.30), 0 2px 12px rgba(91,27,254,.20);
  --glow-accent:  0 0 0 3px rgba(66,255,135,.28), 0 2px 10px rgba(66,255,135,.20);
}

/* ============================================================
   KRYPTONITE — dark mode
   ============================================================ */
[data-scheme="kryptonite"][data-mode="dark"],
[data-scheme="kryptonite"]:not([data-mode]),
[data-mode="dark"]:not([data-scheme]) {
  --color-bg:            #0B0912;
  --color-surface:       #1C182F;
  --color-surface-2:     #2D2749;
  --color-border:        #342B55;
  --color-border-strong: #403569;
  --color-fg:            #FFFFFF;
  --color-fg-muted:      #9E97B2;
  --color-primary:       #5B1BFE;
  --color-primary-hover: #3800C7;
  --color-primary-press: #2A0094;
  --color-primary-fg:    #FFFFFF;
  --color-primary-soft:  #362267;
  --color-primary-text:  #DED1FF;
  --color-accent:        #42FF87;
  --color-accent-hover:  #00BD45;
  --color-accent-fg:     #1F2606;
  --color-accent-soft:   #124038;
  --color-success:       #64CE66;
  --color-warning:       #FFC24B;
  --color-danger:        #FF6477;
  --color-info:          #5BA8FF;
  --color-graph-success: #5B1BFE;
  --color-graph-failed:  #F2734B;
  --color-graph-nodata:  #2c9583;
  --shadow-card:    0 1px 0 rgba(255,255,255,.025) inset, 0 10px 30px rgba(0,0,0,.5);
  --shadow-popover: 0 10px 40px rgba(0,0,0,.58), 0 2px 8px rgba(0,0,0,.36);
  --glow-primary:   0 0 0 3px rgba(91,27,254,.30), 0 2px 12px rgba(91,27,254,.20);
  --glow-accent:    0 0 0 3px rgba(66,255,135,.28), 0 2px 10px rgba(66,255,135,.20);
}

/* ============================================================
   KRYPTONITE — light mode
   ============================================================ */
[data-scheme="kryptonite"][data-mode="light"],
[data-mode="light"]:not([data-scheme]) {
  --color-bg:            #FBFAFE;
  --color-surface:       #FFFFFF;
  --color-surface-2:     #F3F0FB;
  --color-border:        #E8E3F3;
  --color-border-strong: #D4CCE8;
  --color-fg:            #140033;
  --color-fg-muted:      #5E576E;
  --color-primary:       #5B1BFE;
  --color-primary-hover: #3800C7;
  --color-primary-press: #2A0094;
  --color-primary-fg:    #FFFFFF;
  --color-primary-soft:  #EFE9FF;
  --color-primary-text:  #6E3AE6;
  --color-accent:        #42FF87;
  --color-accent-hover:  #00BD45;
  --color-accent-fg:     #1F2606;
  --color-accent-soft:   #D1FFE2;
  --color-success:       #49D04B;
  --color-warning:       #DB8000;
  --color-danger:        #D65766;
  --color-info:          #5594DD;
  --color-graph-success: #5B1BFE;
  --color-graph-failed:  #D9542E;
  --color-graph-nodata:  #76AD8A;
  --shadow-card:    0 1px 4px rgba(20,0,51,.08), 0 1px 2px rgba(20,0,51,.04);
  --shadow-popover: 0 8px 28px rgba(20,0,51,.14), 0 2px 6px rgba(20,0,51,.08);
  --glow-primary:   0 0 0 3px rgba(91,27,254,.22), 0 2px 10px rgba(91,27,254,.12);
  --glow-accent:    0 0 0 3px rgba(66,255,135,.20), 0 2px 10px rgba(66,255,135,.10);
}