/* ==========================================================================
   AlfaHesap — Gaming Design Tokens (Roda-Inspired Esport Storefront)
   ========================================================================== */

:root {
  /* --- Canvas & Backgrounds --- */
  --bg-deep: #06090e;
  --bg-page: #080c14;
  --bg-surface: #0c121d;
  --bg-surface-elevated: #111927;
  --bg-surface-hover: #162134;
  --bg-glass: rgba(12, 18, 29, 0.85);

  /* --- Brand & Accents (Vivid Emerald / Cyan Esport Energy) --- */
  --accent-green: #00e6a8;
  --accent-green-bright: #00f0a8;
  --accent-green-dark: #009e74;
  --accent-glow: rgba(0, 230, 168, 0.35);
  --accent-glow-subtle: rgba(0, 230, 168, 0.12);
  --accent-cyan: #00d2ff;
  --accent-cyan-glow: rgba(0, 210, 255, 0.25);
  --accent-gold: #f4c430;

  /* --- Text & Typography --- */
  --text-primary: #f6f8fb;
  --text-body: #cbd5e1;
  --text-muted: #94a3b8;
  --text-dark: #070b10;

  /* --- Borders & Geometric Dividers --- */
  --border-hairline: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.14);
  --border-accent: rgba(0, 230, 168, 0.4);
  --border-accent-solid: #00e6a8;

  /* --- Typography Font Families --- */
  --font-display: 'Unbounded', 'Rajdhani', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* --- Polygon Clip-Paths (Sharp Geometric / Cut Corners) --- */
  --clip-btn: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  --clip-btn-sm: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  --clip-btn-reverse: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  --clip-card: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  --clip-card-top-cut: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  --clip-badge: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  --clip-tag: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  --clip-hero-mask: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);

  /* --- Transitions --- */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.45s cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Spacing System --- */
  --space-unit: 8px;
  --container-max: 1380px;
  --container-pad: 32px;
}