/* ==========================================================================
   CyberBuzz — Design Tokens
   Single source of truth for colors, typography, spacing, motion.
   ========================================================================== */

:root {
    /* Brand colors */
    --cb-green-500: #39FF14;
    --cb-green-600: #2BD80F;
    --cb-green-400: #6FFF4D;
    --cb-green-glow: rgba(57, 255, 20, 0.45);

    --cb-yellow-500: #FFD700;
    --cb-orange-500: #FFA500;
    --cb-red-500: #FF3B3B;

    /* Typography scale */
    --cb-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --cb-font-display: 'Inter', sans-serif;
    --cb-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;

    --cb-text-xs:    0.75rem;   /* 12px */
    --cb-text-sm:    0.875rem;  /* 14px */
    --cb-text-base:  1rem;      /* 16px */
    --cb-text-lg:    1.125rem;  /* 18px */
    --cb-text-xl:    1.25rem;   /* 20px */
    --cb-text-2xl:   1.5rem;    /* 24px */
    --cb-text-3xl:   1.875rem;  /* 30px */
    --cb-text-4xl:   2.25rem;   /* 36px */
    --cb-text-5xl:   3rem;      /* 48px */
    --cb-text-6xl:   3.75rem;   /* 60px */

    --cb-leading-tight:   1.15;
    --cb-leading-snug:    1.35;
    --cb-leading-normal:  1.55;
    --cb-leading-relaxed: 1.7;

    --cb-tracking-tight:  -0.02em;
    --cb-tracking-normal: 0;
    --cb-tracking-wide:   0.05em;
    --cb-tracking-wider:  0.1em;

    /* Spacing scale (8px base) */
    --cb-space-1:  0.25rem;  /*  4px */
    --cb-space-2:  0.5rem;   /*  8px */
    --cb-space-3:  0.75rem;  /* 12px */
    --cb-space-4:  1rem;     /* 16px */
    --cb-space-5:  1.25rem;  /* 20px */
    --cb-space-6:  1.5rem;   /* 24px */
    --cb-space-8:  2rem;     /* 32px */
    --cb-space-10: 2.5rem;   /* 40px */
    --cb-space-12: 3rem;     /* 48px */
    --cb-space-16: 4rem;     /* 64px */
    --cb-space-20: 5rem;     /* 80px */
    --cb-space-24: 6rem;     /* 96px */

    /* Layout */
    --cb-container-max: 1200px;
    --cb-container-pad: clamp(1rem, 4vw, 2rem);
    --cb-radius-sm:  6px;
    --cb-radius-md:  10px;
    --cb-radius-lg:  16px;
    --cb-radius-xl:  24px;

    /* Motion */
    --cb-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --cb-ease-out:    cubic-bezier(0, 0, 0.2, 1);
    --cb-duration-fast:   150ms;
    --cb-duration-base:   250ms;
    --cb-duration-slow:   400ms;

    /* Z-index */
    --cb-z-header:   100;
    --cb-z-modal:    200;
    --cb-z-toast:    300;
}

/* --- Dark theme (default) --- */
:root,
[data-theme="dark"] {
    --cb-bg:           #0A0F0A;
    --cb-bg-elevated:  #0F1812;
    --cb-bg-card:      #0D140E;
    --cb-bg-input:     #131C14;

    --cb-border:       #1F2A1F;
    --cb-border-strong:#2A3A2A;
    --cb-border-accent:var(--cb-green-500);

    --cb-text:         #E8F5E8;
    --cb-text-muted:   #8FA68F;
    --cb-text-dim:     #5A6E5A;
    --cb-text-inverse: #0A0F0A;

    --cb-accent:       var(--cb-green-500);
    --cb-accent-hover: var(--cb-green-400);
    --cb-accent-text:  #0A0F0A;

    --cb-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
    --cb-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
    --cb-shadow-glow:0 0 24px var(--cb-green-glow);
}

/* --- Light theme --- */
[data-theme="light"] {
    --cb-bg:           #F4F8F4;
    --cb-bg-elevated:  #FFFFFF;
    --cb-bg-card:      #FFFFFF;
    --cb-bg-input:     #F0F4F0;

    --cb-border:       #D5DFD5;
    --cb-border-strong:#B5C5B5;
    --cb-border-accent:#1BAE00;

    --cb-text:         #0F1A0F;
    --cb-text-muted:   #4A5A4A;
    --cb-text-dim:     #8A9A8A;
    --cb-text-inverse: #FFFFFF;

    --cb-accent:       #1BAE00;
    --cb-accent-hover: #169000;
    --cb-accent-text:  #FFFFFF;

    --cb-shadow-sm:  0 1px 2px rgba(15, 26, 15, 0.06);
    --cb-shadow-md:  0 4px 12px rgba(15, 26, 15, 0.08);
    --cb-shadow-glow:0 0 24px rgba(27, 174, 0, 0.25);
}

/* Respect system preference unless user has set explicit theme */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;
    }
}