/* Zyklus — Design Tokens (Arctic Ice) */

:root{
  /* Surfaces */
  --bg:            #0A1018;
  --bg-2:          #0C1420;
  --surface-1:     #0F1A26;
  --surface-2:     #13202E;
  --surface-glass: rgba(125,211,252,.06);
  --surface-glass-strong: rgba(125,211,252,.10);

  /* Ink / Text */
  --fg:            #EAF2FB;
  --fg-muted:      #9CAFC2;   /* AA on cards */
  --fg-faint:      #7A8BA0;   /* raised for WCAG AA (~5.5:1) on --bg */

  /* Accents */
  --accent:        #38BDF8;
  --accent-2:      #7DD3FC;
  --frost:         #BAE6FD;
  --frost-bright:  #E0F2FE;
  --on-accent:     #04121C;

  /* Structure */
  --border:        rgba(180,220,255,.10);
  --border-strong: rgba(180,220,255,.20);
  --border-stronger: rgba(180,220,255,.32);

  /* Signal */
  --success:       #34D399;
  --warning:       #FBBF24;
  --danger:        #F87171;

  /* Aurora accent nebulae (used sparingly) */
  --aurora-a:      rgba(56,189,248,.22);
  --aurora-b:      rgba(125,211,252,.16);
  --aurora-c:      rgba(94,140,255,.18);

  /* Typography */
  --font-display:  'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:     'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale */
  --fs-display: clamp(2.6rem, 6.5vw, 5.2rem);
  --fs-h1: clamp(2rem, 4vw, 3rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.1rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  /* Radius */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Spacing (8pt) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* Layout */
  --maxw: 1280px;
  --nav-h: 68px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur: 280ms;
  --dur-slow: 480ms;

  /* Elevation */
  --shadow-1: 0 2px 8px -2px rgba(0,0,0,.4);
  --shadow-2: 0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-3: 0 28px 64px -28px rgba(0,0,0,.8);
  --glow-accent: 0 0 24px rgba(56,189,248,.35);

  /* Z-index scale */
  --z-base: 0; --z-raised: 10; --z-nav: 40;
  --z-overlay: 80; --z-palette: 90; --z-intro: 100;
  --z-cursor: 10000; /* custom cursor stays above modals, fullscreen & intro */
}