/* ==========================================================================
   Bright Design System — Design Tokens
   Version: 1.0.0
   Source of truth for the entire Bright ecosystem (brightcurios.com,
   brightlabs.com, and future projects).

   How to consume:
     @import "bright-design-system/tokens/design-tokens.css";
   OR copy this file into your project and import from there.
   ========================================================================== */

:root {
    /* ========== PALETTE — Full scales ========== */

    /* NAVY (primary background / dark surface scale) — slate family */
    --navy-50:  #f8fafc;
    --navy-100: #f1f5f9;
    --navy-200: #e2e8f0;
    --navy-300: #cbd5e1;
    --navy-400: #94a3b8;
    --navy-500: #64748b;
    --navy-600: #475569;
    --navy-700: #334155;
    --navy-800: #1e293b;
    --navy-900: #0f172a;
    --navy-950: #020617;

    /* GOLD (primary accent / brand) */
    --gold-50:  #fefce8;
    --gold-100: #fef9c3;
    --gold-200: #fef08a;
    --gold-300: #fde047;
    --gold-400: #facc15;
    --gold-500: #eab308;
    --gold-600: #ca8a04;
    --gold-700: #a16207;
    --gold-800: #854d0e;
    --gold-900: #713f12;

    /* CYAN (secondary accent / tech highlight) */
    --cyan-50:  #ecfeff;
    --cyan-100: #cffafe;
    --cyan-200: #a5f3fc;
    --cyan-300: #67e8f9;
    --cyan-400: #22d3ee;
    --cyan-500: #06b6d4;
    --cyan-600: #0891b2;
    --cyan-700: #0e7490;
    --cyan-800: #155e75;
    --cyan-900: #164e63;

    /* FEEDBACK (semantic) */
    --success-400: #4ade80;
    --success-600: #16a34a;
    --warning-400: #fbbf24;
    --warning-600: #d97706;
    --error-400:   #f87171;
    --error-600:   #dc2626;
    --info-400:    #60a5fa;
    --info-600:    #2563eb;

    /* ========== SEMANTIC TOKENS — Dark (default) ========== */
    --bg-base:          var(--navy-950);
    --bg-surface-1:     var(--navy-900);
    --bg-surface-2:     var(--navy-800);
    --bg-surface-3:     var(--navy-700);

    --text-primary:     #ffffff;
    --text-secondary:   #a1a1aa;
    --text-tertiary:    #8a8a96;
    --text-accent:      var(--gold-300);
    --text-link:        var(--cyan-400);

    --border-subtle:    rgba(255, 255, 255, 0.08);
    --border-default:   rgba(255, 255, 255, 0.16);
    --border-strong:    rgba(255, 255, 255, 0.32);
    --border-accent:    var(--gold-300);

    --accent-primary:   var(--gold-300);
    --accent-secondary: var(--cyan-400);

    --glass-panel:      rgba(15, 23, 42, 0.4);
    --glass-blur:       blur(25px) saturate(180%);

    --bg-gradient: radial-gradient(
        circle at 50% 50%,
        rgba(15, 23, 42, 1) 0%,
        rgba(2, 6, 23, 1) 100%
    );
    --gradient-gold: linear-gradient(135deg, #fde047 0%, #ca8a04 100%);
    --gradient-gold-hover: linear-gradient(135deg, #fef08a 0%, #ca8a04 100%);
    --gradient-text-gold: linear-gradient(135deg, #ffffff 30%, #fde047 100%);

    --glow-gold:  radial-gradient(circle, var(--gold-300), transparent 70%);
    --glow-cyan:  radial-gradient(circle, var(--cyan-400), transparent 70%);

    /* ========== TYPOGRAPHY ========== */
    --font-sans:  "Inter", system-ui, -apple-system, BlinkMacSystemFont,
                  "Segoe UI", sans-serif;
    --font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                  "Liberation Mono", "Courier New", monospace;
    --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Book Antiqua", Georgia, serif;

    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-base:  1rem;
    --text-lg:    1.125rem;
    --text-xl:    1.25rem;
    --text-2xl:   1.5rem;
    --text-3xl:   1.875rem;
    --text-4xl:   2.25rem;
    --text-5xl:   3rem;
    --text-6xl:   3.75rem;
    --text-7xl:   clamp(2.5rem, 10vw, 5rem);

    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-extrabold: 800;

    --tracking-tight:   -0.03em;
    --tracking-normal:  0em;
    --tracking-wide:    0.05em;
    --tracking-wider:   0.1em;
    --tracking-widest:  0.3em;

    --leading-none:     1;
    --leading-tight:    1.1;
    --leading-snug:     1.3;
    --leading-normal:   1.5;
    --leading-relaxed:  1.6;

    /* ========== SPACING ========== */
    --space-0:   0;
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;
    --space-24:  6rem;
    --space-32:  8rem;

    /* ========== RADIUS ========== */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-2xl:  32px;
    --radius-3xl:  40px;
    --radius-pill: 9999px;

    /* ========== ELEVATION / SHADOWS ========== */
    --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg:     0 10px 40px rgba(0, 0, 0, 0.4);
    --shadow-xl:     0 30px 60px rgba(0, 0, 0, 0.2);
    --shadow-gold:   0 4px 15px rgba(202, 138, 4, 0.2);
    --shadow-gold-lg:0 16px 32px rgba(243, 208, 96, 0.4);

    /* ========== MOTION ========== */
    --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast:  150ms;
    --duration-base:  300ms;
    --duration-slow:  600ms;

    /* ========== LAYOUT ========== */
    --container-max:   1200px;
    --container-prose: 720px;
    --gutter:          1.5rem;
    --gutter-lg:       2rem;
}

/* ==========================================================================
   LIGHT THEME — activated via [data-theme="light"]
   ========================================================================== */
[data-theme="light"] {
    --bg-base:          var(--navy-50);
    --bg-surface-1:     #ffffff;
    --bg-surface-2:     var(--navy-100);
    --bg-surface-3:     var(--navy-200);

    --text-primary:     var(--navy-900);
    --text-secondary:   var(--navy-600);
    --text-tertiary:    var(--navy-500);
    --text-accent:      var(--gold-700);
    --text-link:        var(--cyan-700);

    --border-subtle:    rgba(0, 0, 0, 0.08);
    --border-default:   rgba(0, 0, 0, 0.16);
    --border-strong:    rgba(0, 0, 0, 0.32);
    --border-accent:    var(--gold-700);

    --accent-primary:   var(--gold-700);
    --accent-secondary: var(--cyan-700);

    --glass-panel:      rgba(255, 255, 255, 0.5);
    --glass-blur:       blur(20px) saturate(180%);

    --bg-gradient: radial-gradient(circle at 50% 50%, #f1f5f9 0%, #f8fafc 100%);
    --gradient-text-gold: linear-gradient(135deg, var(--navy-900) 30%, var(--gold-700) 100%);
}

/* ==========================================================================
   UTILITY CLASSES — opt-in atalhos semânticos
   ========================================================================== */

.bc-glass-panel {
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.bc-btn-pill {
    background: var(--gradient-gold);
    color: #000;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-pill);
    font-weight: var(--fw-bold);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-in-out);
    text-decoration: none;
    display: inline-block;
    box-shadow: var(--shadow-gold);
}

.bc-btn-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(202, 138, 4, 0.4);
    background: var(--gradient-gold-hover);
}

.bc-text-gold-gradient {
    background: var(--gradient-text-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bc-status-tag {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent-primary);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    opacity: 0.8;
}

.bc-category-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-primary);
    font-weight: var(--fw-extrabold);
}