/* =========================================
   RETASAN DESIGN TOKENS
   ========================================= */

:root {
    /* ── Background ── */
    --bg-primary:    #0a0a0f;
    --bg-secondary:  #12121a;
    --bg-tertiary:   #1a1a2e;
    --bg-elevated:   #222238;
    --bg-surface:    #16162a;

    /* ── Accent ── */
    --accent-red:    #e53935;
    --accent-red-hover: #ff5252;
    --accent-red-dark: #b71c1c;
    --accent-cyan:   #00e5ff;
    --accent-cyan-hover: #18ffff;
    --accent-green:  #00ff41;
    --accent-amber:  #f5ae18;

    /* ── Text ── */
    --text-primary:  #e8e8e8;
    --text-secondary:#8892a0;
    --text-muted:    #555e6e;
    --text-inverse:  #0a0a0f;
    --text-link:     #00e5ff;
    --text-link-hover: #18ffff;

    /* ── Borders ── */
    --border:        #2a2a3e;
    --border-light:  #3a3a52;
    --border-accent: #e53935;

    /* ── Shadows ── */
    --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow-red:   0 0 20px rgba(229, 57, 53, 0.3);
    --shadow-glow-cyan:  0 0 20px rgba(0, 229, 255, 0.2);

    /* ── Typography ── */
    --font-heading:  'JetBrains Mono', 'Share Tech Mono', 'Fira Code', monospace;
    --font-body:     'Courier New', Courier, 'Courier Prime', 'JetBrains Mono', monospace;
    --font-mono:     'Fira Code', 'JetBrains Mono', 'Consolas', monospace;

    /* ── Font Sizes ── */
    --fs-xs:   0.75rem;    /* 12px */
    --fs-sm:   0.8125rem;  /* 13px */
    --fs-base: 0.9375rem;  /* 15px */
    --fs-md:   1rem;       /* 16px */
    --fs-lg:   1.125rem;   /* 18px */
    --fs-xl:   1.25rem;    /* 20px */
    --fs-2xl:  1.5rem;     /* 24px */
    --fs-3xl:  1.875rem;   /* 30px */
    --fs-4xl:  2.25rem;    /* 36px */
    --fs-5xl:  3rem;       /* 48px */

    /* ── Spacing ── */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* ── Layout ── */
    --max-width:     1280px;
    --header-height: 60px;
    --border-radius: 6px;
    --border-radius-lg: 10px;

    /* ── Transitions ── */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;

    /* ── Z-Index ── */
    --z-matrix:    -1;
    --z-base:       1;
    --z-sticky:    100;
    --z-overlay:   500;
    --z-modal:    1000;
    --z-toast:    1500;
}