/* ui/css/tokens.css
   Design tokens: colours, spacing, radius, shadows, timing. Brand changes start here.
   Loaded: every page. Registered in core/assets.php. */

/* ═══════════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Brand */
    --accent:          #f97316;
    --accent-hover:    #ea6c0a;
    --accent-soft:     #fb923c;
    --accent-light:    rgba(249,115,22,0.10);
    --accent-glow:     rgba(249,115,22,0.22);
    --blue:            #3b82f6;
    --blue-hover:      #2563eb;
    --blue-light:      rgba(59,130,246,0.12);
    --purple:          #8b5cf6;
    --purple-light:    rgba(139,92,246,0.12);
    --green:           #22c55e;
    --green-light:     rgba(34,197,94,0.12);
    --red:             #ef4444;
    --yellow:          #eab308;

    /* Tier colors */
    --tier-free:       #9ca3af;
    --tier-basic:      #60a5fa;
    --tier-pro:        #f97316;
    --tier-advanced:   #a78bfa;

    /* Backgrounds */
    --bg-base:         #08080f;
    --bg-surface:      #0c0c17;
    --bg-card:         #11111d;
    --bg-card-hover:   #161624;
    --bg-input:        #0a0a14;
    --bg-hover:        rgba(255,255,255,0.04);
    --bg-nav:          rgba(8,8,15,0.82);
    --bg-overlay:      rgba(8,8,15,0.85);

    /* Borders */
    --border:          rgba(255,255,255,0.08);
    --border-hover:    rgba(255,255,255,0.16);
    --border-strong:   rgba(255,255,255,0.22);
    --border-accent:   rgba(249,115,22,0.38);
    --border-blue:     rgba(59,130,246,0.4);

    /* Text */
    --text-primary:    #f4f4f8;
    --text-secondary:  #a3a3bd;
    --text-muted:      #6f6f8c;
    --text-accent:     #fb8b3d;

    /* Spacing */
    --gap-xs:  8px;
    --gap-sm:  16px;
    --gap-md:  24px;
    --gap-lg:  40px;
    --gap-xl:  64px;
    --gap-2xl: 96px;

    /* Radius */
    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  20px;
    --radius-full: 999px;

    /* Shadows */
    --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
    --shadow-md:   0 8px 24px rgba(0,0,0,0.35);
    --shadow-lg:   0 24px 60px rgba(0,0,0,0.5);
    --shadow-accent: 0 0 0 1px rgba(249,115,22,0.25), 0 12px 40px rgba(249,115,22,0.10);
    --shadow-blue:   0 0 40px rgba(59,130,246,0.15);

    /* Transitions */
    --t-fast:   0.15s ease;
    --t-normal: 0.25s ease;
    --t-slow:   0.4s ease;

    /* Container */
    --container: 1200px;
    --container-sm: 800px;
    --nav-h: 68px;
}

@media (max-width: 640px) {
    :root { --gap-xl: 48px; --gap-2xl: 72px; --nav-h: 62px; }
}