/* ============================================================
   BAKSTER — CSS Custom Properties  (Design Tokens)
   ============================================================ */

:root {
  /* ── Brand ── */
  --color-accent:         #CAFF43;
  --color-accent-light:   #B7FF2E;
  --color-accent-hover:   #B5F020;
  --color-accent-text:    #0F0F0F;

  /* ── Background ── */
  --color-topbar:         #050816;
  --color-bg-dark:        #050816;
  --color-bg-dark-alt:    #0C1421;
  --color-bg-dark-soft:   #14202E;
  --color-bg-light:       #FFFFFF;
  --color-bg-section:     #F6F7FB;
  --color-bg-hero-right:  #F2F4F7;

  /* ── Text ── */
  --color-text-primary:   #050816;
  --color-text-inverse:   #FFFFFF;
  --color-text-secondary: rgba(255,255,255,.50);
  --color-text-muted:     #8899A6;
  --color-text-medium:    #3D4D5C;
  --color-text-dark:      #050816;

  /* ── Borders ── */
  --color-border:         rgba(255,255,255,.08);
  --color-border-light:   rgba(0,0,0,.08);
  --color-border-medium:  rgba(0,0,0,.12);

  /* ── Status ── */
  --color-online:         #CAFF43;

  /* ── Inputs ── */
  --color-input-bg:       #0D1829;

  /* ── Typography ── */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;

  --fs-caption:  12px;
  --fs-xs:       12px;
  --fs-label-s:  13px;
  --fs-sm:       14px;
  --fs-base:     16px;
  --fs-md:       18px;
  --fs-lg:       20px;
  --fs-xl:       22px;
  --fs-2xl:      24px;
  --fs-h4:       28px;
  --fs-h3:       32px;
  --fs-h2:       36px;
  --fs-h1:       54px;
  --fs-hero:     82px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-hero:   1.032;
  --lh-h1:     1.333;
  --lh-h2:     1.222;
  --lh-h3:     1.25;
  --lh-h4:     1.357;
  --lh-tight:  1.08;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --ls-hero:  -0.04em;
  --ls-h1:    -0.02em;
  --ls-h2:    -0.02em;
  --ls-tight: -0.01em;
  --ls-body:   0;

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 60px;
  --space-16: 64px;
  --space-20: 80px;
  --space-22: 90px;
  --space-24: 96px;

  /* ── Layout ── */
  --container-max: 1920px;
  --header-h:      90px;
  --topbar-h:      36px;

  /* ── Radius ── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-card:    0 4px 32px rgba(0,0,0,.18);
  --shadow-btn:     0 2px 14px rgba(202,255,67,.30);
  --shadow-header:  0 1px 0 rgba(0,0,0,.08);
  --shadow-modal:   0 8px 48px rgba(0,0,0,.45);

  /* ── Transitions ── */
  --transition: 0.18s ease;
}