Design Tokens

:root {
  /* Surfaces */
  --bg: #ffffff;
  --bg-subtle: #f8f8f8;
  --bg-sunken: #f3f3f3;
  --app: #fafafa;
  --panel: #ffffff;
  --panel-2: #f6f6f7;
  --side: #fafafa;
  --surface: var(--bg);

  /* Text */
  --ink: #0a0a0b;
  --soft: #3f3f46;
  --muted: #6b6b6b;
  --faint: #a1a1aa;

  /* Lines */
  --line: #f0f0f0;
  --line-2: #e2e2e6;

  /* Accent — default Indigo */
  --acc: #4f46ff;
  --acc-press: #3a32d6;
  --acc-soft: #a5a0ff;
  --acc-ink: #fff;
  --acc-bg: #eeedff;
  --acc-br: #dcd9ff;
  --tint: #eeedff;
  --ring: color-mix(in srgb, var(--acc) 32%, transparent);

  /* Semantic */
  --green: #16a34a;
  --green-bg: #e7f6ec;
  --green-tint: #e7f6ec;
  --amber: #d97706;
  --amber-bg: #fdf2e3;
  --amber-tint: #fdf2e3;
  --red: #dc2626;
  --red-bg: #fdeced;
  --red-tint: #fdeced;

  /* Elevation */
  --sh: 0 1px 2px rgba(10,10,11,.05);
  --sh-sm: 0 1px 2px rgba(10,10,11,0.05);
  --sh-md: 0 4px 16px rgba(10,10,11,0.06);
  --sh-lg: 0 24px 60px rgba(10,10,11,0.13);
  --sh-acc: 0 8px 24px color-mix(in srgb, var(--acc) 26%, transparent);

  /* Radii — flat */
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-xl: 0px;
  --r-pill: 0px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Navigation glass */
  --nav-glass: rgba(255,255,255,0.82);
  --nav-glass-hero: rgba(255,255,255,0.9);
  --nav-mobile-bg: rgba(255,255,255,0.96);
  --nav-blur: 24px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces — deep black */
  --bg: #08080a;
  --bg-subtle: #0f0f13;
  --bg-sunken: #16161c;
  --app: #000000;
  --panel: #0a0a0a;
  --panel-2: #161616;
  --side: #0a0a0a;
  --surface: #121217;

  /* Text — off-white */
  --ink: #f4f4f5;
  --soft: #d4d4d8;
  --muted: #a1a1aa;
  --faint: #6f6f78;

  /* Lines — hairline */
  --line: #1f1f26;
  --line-2: #2c2c35;

  /* Accent — default Indigo dark */
  --acc: #4f46ff;
  --acc-press: #3a32d6;
  --acc-soft: #8b85ff;
  --acc-ink: #fff;
  --acc-bg: rgba(79,70,255,.14);
  --acc-br: rgba(79,70,255,.42);
  --tint: #1a1833;

  /* Semantic — brighter for dark */
  --green: #4ade80;
  --green-bg: rgba(74,222,128,.13);
  --green-tint: #142318;
  --amber: #f5a623;
  --amber-bg: rgba(245,166,35,.14);
  --amber-tint: #241c0e;
  --red: #ff5c62;
  --red-bg: rgba(255,92,98,.14);
  --red-tint: #2a1416;

  /* Elevation */
  --sh: none;
  --sh-sm: 0 1px 2px rgba(0,0,0,0.35);
  --sh-md: 0 16px 50px rgba(0,0,0,.7);
  --sh-lg: 0 24px 60px rgba(0,0,0,0.5);
  --sh-acc: 0 8px 24px color-mix(in srgb, var(--acc) 22%, transparent);

  /* Nav glass */
  --nav-glass: rgba(7,7,10,0.9);
  --nav-glass-hero: rgba(7,7,10,0.94);
  --nav-mobile-bg: rgba(7,7,10,0.97);
}