/* ═══════════════════════════════════════════════════════════════════════════════
 * GoSiteMe Design System — Tokens v1.0
 * ═══════════════════════════════════════════════════════════════════════════════
 * Single source of truth for all design tokens.
 * Import BEFORE site.css: <link rel="stylesheet" href="/assets/css/design-tokens.css">
 *
 * Naming: --gds-{category}-{name}[-{variant}]
 * Categories: color, space, radius, font, shadow, z, timing, breakpoint
 * ══════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Core Palette ─────────────────────────────────────────────────────── */
    --gds-color-primary:       #0074D9;
    --gds-color-primary-light: #00A8FF;
    --gds-color-primary-dark:  #0059a8;

    --gds-color-cyan:          #00D4FF;
    --gds-color-cyan-light:    #22d3ee;

    --gds-color-purple:        #7D00FF;
    --gds-color-purple-light:  #9D4EDD;
    --gds-color-purple-mid:    #a78bfa;
    --gds-color-purple-soft:   #c084fc;

    --gds-color-indigo:        #6c5ce7;
    --gds-color-indigo-light:  #a29bfe;

    --gds-color-blue:          #3b82f6;
    --gds-color-blue-mid:      #0984e3;
    --gds-color-teal:          #06b6d4;

    /* ── Semantic Colors ──────────────────────────────────────────────────── */
    --gds-color-success:       #10b981;
    --gds-color-success-light: #34d399;
    --gds-color-success-dark:  #059669;

    --gds-color-warning:       #f59e0b;
    --gds-color-warning-light: #fbbf24;
    --gds-color-warning-soft:  #fdcb6e;

    --gds-color-danger:        #ef4444;
    --gds-color-danger-light:  #f87171;
    --gds-color-danger-soft:   #e17055;

    --gds-color-info:          #06b6d4;
    --gds-color-info-light:    #22d3ee;

    --gds-color-pink:          #ec4899;
    --gds-color-green-alt:     #00b894;
    --gds-color-green-bright:  #22c55e;
    --gds-color-violet:        #8b5cf6;
    --gds-color-violet-light:  #a855f7;

    /* ── Surface / Background ─────────────────────────────────────────────── */
    --gds-color-bg:            #0a0a14;
    --gds-color-bg-raised:     #12121f;
    --gds-color-bg-card:       #1a1a2e;
    --gds-color-bg-card-hover: #222240;
    --gds-color-bg-input:      #16162b;
    --gds-color-bg-overlay:    rgba(10, 10, 20, 0.85);
    --gds-color-bg-modal:      rgba(0, 0, 0, 0.6);

    /* ── Text ─────────────────────────────────────────────────────────────── */
    --gds-color-text:          #e0e0e0;
    --gds-color-text-bright:   #e8e8f0;
    --gds-color-text-muted:    #a8b2d1;
    --gds-color-text-dim:      #94a3b8;
    --gds-color-text-subtle:   #64748b;

    /* ── Borders ──────────────────────────────────────────────────────────── */
    --gds-color-border:        rgba(255, 255, 255, 0.08);
    --gds-color-border-strong:  rgba(255, 255, 255, 0.15);
    --gds-color-border-focus:  var(--gds-color-cyan);
    --gds-color-border-error:  var(--gds-color-danger);

    /* ── Gradients ────────────────────────────────────────────────────────── */
    --gds-gradient-primary:    linear-gradient(135deg, #0074D9, #00A8FF);
    --gds-gradient-purple:     linear-gradient(135deg, #7D00FF, #00A8FF);
    --gds-gradient-glow:       linear-gradient(135deg, #7D00FF, #00D4FF, #0074D9);
    --gds-gradient-warm:       linear-gradient(135deg, #f59e0b, #ef4444);
    --gds-gradient-success:    linear-gradient(135deg, #10b981, #06b6d4);
    --gds-gradient-card:       linear-gradient(135deg, #1a1a2e, #12121f);

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

    /* ── Border Radius ────────────────────────────────────────────────────── */
    --gds-radius-xs:   4px;
    --gds-radius-sm:   6px;
    --gds-radius-md:   8px;
    --gds-radius-lg:   12px;
    --gds-radius-xl:   16px;
    --gds-radius-2xl:  20px;
    --gds-radius-pill: 50px;
    --gds-radius-full: 50%;

    /* ── Typography ───────────────────────────────────────────────────────── */
    --gds-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --gds-font-mono:  'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --gds-font-xs:    0.75rem;   /* 12px */
    --gds-font-sm:    0.8rem;    /* 12.8px */
    --gds-font-base:  0.85rem;   /* 13.6px */
    --gds-font-md:    0.9rem;    /* 14.4px */
    --gds-font-lg:    1rem;      /* 16px */
    --gds-font-xl:    1.1rem;    /* 17.6px */
    --gds-font-2xl:   1.25rem;   /* 20px */
    --gds-font-3xl:   1.5rem;    /* 24px */
    --gds-font-4xl:   2rem;      /* 32px */
    --gds-font-5xl:   2.5rem;    /* 40px */

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

    --gds-line-height-tight:  1.25;
    --gds-line-height-normal: 1.5;
    --gds-line-height-relaxed: 1.75;

    /* ── Shadows ──────────────────────────────────────────────────────────── */
    --gds-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.3);
    --gds-shadow-sm:   0 2px 4px rgba(0, 0, 0, 0.3);
    --gds-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
    --gds-shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.5);
    --gds-shadow-xl:   0 12px 40px rgba(0, 0, 0, 0.6);
    --gds-shadow-glow: 0 0 20px rgba(0, 116, 217, 0.3);
    --gds-shadow-glow-purple: 0 0 20px rgba(125, 0, 255, 0.3);
    --gds-shadow-glow-cyan: 0 0 20px rgba(0, 212, 255, 0.3);
    --gds-shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.3);

    /* ── Z-Index Scale ────────────────────────────────────────────────────── */
    --gds-z-base:     0;
    --gds-z-dropdown: 100;
    --gds-z-sticky:   200;
    --gds-z-fixed:    300;
    --gds-z-backdrop: 400;
    --gds-z-modal:    500;
    --gds-z-popover:  600;
    --gds-z-tooltip:  700;
    --gds-z-toast:    800;
    --gds-z-max:      9999;

    /* ── Timing / Animation ───────────────────────────────────────────────── */
    --gds-timing-fast:   150ms;
    --gds-timing-normal: 250ms;
    --gds-timing-slow:   400ms;
    --gds-timing-ease:   cubic-bezier(0.4, 0, 0.2, 1);
    --gds-timing-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --gds-timing-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --gds-timing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Breakpoints (reference only — use in @media) ─────────────────────── */
    /* --gds-bp-sm:  640px   */
    /* --gds-bp-md:  768px   */
    /* --gds-bp-lg:  1024px  */
    /* --gds-bp-xl:  1280px  */
    /* --gds-bp-2xl: 1536px  */
}

/* ── Backward Compatibility (maps old vars → new tokens) ──────────────────── */
:root {
    --primary:         var(--gds-color-primary);
    --primary-light:   var(--gds-color-primary-light);
    --cyan:            var(--gds-color-cyan);
    --purple:          var(--gds-color-purple);
    --purple-light:    var(--gds-color-purple-light);
    --dark:            var(--gds-color-bg);
    --dark-light:      var(--gds-color-bg-raised);
    --dark-card:       var(--gds-color-bg-card);
    --text:            var(--gds-color-text);
    --text-muted:      var(--gds-color-text-muted);
    --success:         var(--gds-color-success);
    --warning:         var(--gds-color-warning);
    --gradient-primary: var(--gds-gradient-primary);
    --gradient-purple:  var(--gds-gradient-purple);
    --gradient-glow:    var(--gds-gradient-glow);
}

/* ── Reduced Motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --gds-timing-fast:   0ms;
        --gds-timing-normal: 0ms;
        --gds-timing-slow:   0ms;
    }
}