/* ============================================================
   01-variables.css — Kurvin Design Tokens
   Street art / graffiti visual language.
   Sharp angles. Neon on concrete. No softness.
   ============================================================ */

:root {
  /* ── Colour Palette ───────────────────────────────────────── */
  --color-bg:           #0e0e0e;
  --color-bg-panel:     #0a0a0a;
  --color-bg-surface:   #181818;
  --color-bg-surface-2: #202020;

  --color-accent:       #ff1493;  /* spray paint neon pink */
  --color-accent-blue:  #00bfff;  /* electric blue */
  --color-accent-gold:  #ffd700;  /* hazard yellow */
  --color-accent-hover: #ff4db3;  /* lighter pink for hover states */

  --color-text:         #f5f5f5;  /* fresh paint white */
  --color-text-muted:   #666666;  /* faded stencil */
  --color-text-faint:   #3a3a3a;  /* ghost on concrete */
  --color-text-inverse: #111111;  /* text on accent bg */

  --color-border:       #333333;  /* crack in concrete */
  --color-border-hover: #ff1493;  /* accent on hover */
  --color-border-focus: #ff1493;

  --color-error:        #ff4444;
  --color-success:      #44ff88;
  --color-warning:      #ffd700;

  /* ── Surfaces (no glass/blur — solid, textured) ──────────── */
  /* Accent-tinted overlays for active states */
  --accent-tint-sm: rgba(255, 20, 147, 0.06);
  --accent-tint-md: rgba(255, 20, 147, 0.12);
  --accent-tint-lg: rgba(255, 20, 147, 0.20);

  --blue-tint-sm:   rgba(0, 191, 255, 0.06);
  --gold-tint-sm:   rgba(255, 215, 0, 0.06);

  /* ── Border Radius (sharp — NO blobs) ────────────────────── */
  --radius-none: 0;
  --radius-xs:   2px;  /* maximum softness anywhere */
  --radius-sm:   4px;  /* used only on small utility elements */
  --radius-full: 9999px; /* tags/chips only, used sparingly */

  /* ── Typography ──────────────────────────────────────────── */
  --font-display:  'Wickhop', cursive;
  --font-sans:     'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  --font-size-xs:   0.70rem;   /* 11px */
  --font-size-sm:   0.8125rem; /* 13px */
  --font-size-base: 0.9375rem; /* 15px */
  --font-size-md:   1.0625rem; /* 17px */
  --font-size-lg:   1.25rem;   /* 20px */
  --font-size-xl:   1.5rem;    /* 24px */
  --font-size-2xl:  2rem;      /* 32px — Bebas section titles */
  --font-size-3xl:  2.75rem;   /* 44px */
  --font-size-4xl:  3.5rem;    /* 56px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi:   600;
  --font-weight-bold:   700;

  --line-height-tight:   1.15;
  --line-height-normal:  1.55;
  --line-height-relaxed: 1.75;

  /* ── Layout ──────────────────────────────────────────────── */
  --sidebar-width:     240px;
  --sidebar-collapsed:  56px;
  --top-bar-height:     56px;
  --page-padding:       24px;
  --content-max-width: 1400px;

  /* ── Spacing (8-point grid) ──────────────────────────────── */
  --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-16: 64px;

  /* ── Shadows (sharp, directional — no soft glow) ─────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.6);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.7);
  --shadow-lg:  0 4px 20px rgba(0,0,0,0.8);
  --shadow-accent: 0 0 20px rgba(255, 20, 147, 0.15);
  --shadow-accent-strong: 0 0 32px rgba(255, 20, 147, 0.3);

  /* ── Animations ──────────────────────────────────────────── */
  --dur-instant:  80ms;
  --dur-fast:    150ms;
  --dur-normal:  220ms;
  --dur-slow:    380ms;
  --dur-slower:  550ms;

  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-in:     cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1.0);

  /* ── Z-Index Scale ───────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-player:   600;
  --z-toast:    700;
  --z-cursor:   800;
  --z-loading:  900;

  /* ── Concrete noise texture (3% opacity) ─────────────────── */
  --noise-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");

  /* ── API endpoint ────────────────────────────────────────── */
  /* Overridden by window.API_BASE if present */
}