/* Gremgoyles Design Tokens */

:root {
    /* ── Brand Colors (Purple, Deep Mystical) ──────────────────────────── */
    --brand-300: hsl(270, 65%, 70%);
    --brand-500: hsl(270, 65%, 50%);      /* Primary */
    --brand-700: hsl(270, 65%, 30%);

    /* ── Trait Colors (Fixed, Non-Negotiable) ──────────────────────────── */
    --trait-blue:   hsl(215, 80%, 55%);   /* 🔵 */
    --trait-purple: hsl(270, 70%, 55%);   /* 🟣 */
    --trait-red:    hsl(355, 80%, 50%);   /* 🔴 */
    --trait-orange: hsl(25, 90%, 55%);    /* 🟠 */
    --trait-yellow: hsl(50, 90%, 55%);    /* 🟡 */
    --trait-green:  hsl(145, 65%, 45%);   /* 🟢 */

    /* ── Surfaces (Dark Gothic Theme) ──────────────────────────────────── */
    --surface-page:     #0a0a0a;           /* Page background */
    --surface-card:     rgba(255, 255, 255, 0.05);  /* Card/glass background */
    --surface-elevated: rgba(255, 255, 255, 0.08);  /* Elevated surface (modals, etc) */
    --surface-hover:    rgba(255, 255, 255, 0.12);  /* Hover state */

    /* ── Text Colors ────────────────────────────────────────────────────── */
    --text-primary:     #ffffff;
    --text-secondary:   #cccccc;
    --text-tertiary:    #999999;
    --text-muted:       #666666;

    /* ── Borders & Dividers ────────────────────────────────────────────── */
    --border-light:    rgba(255, 255, 255, 0.1);
    --border-medium:   rgba(255, 255, 255, 0.15);
    --border-dark:     rgba(255, 255, 255, 0.05);

    /* ── Accents ────────────────────────────────────────────────────────── */
    --accent-gold:     hsl(50, 90%, 55%);
    --accent-gold-glow: rgba(255, 215, 0, 0.3);

    /* ── 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:     0 0 20px rgba(255, 255, 255, 0.1);

    /* ── Glass Morphism ────────────────────────────────────────────────── */
    --glass-bg:        rgba(255, 255, 255, 0.05);
    --glass-border:    rgba(255, 255, 255, 0.1);
    --glass-blur:      10px;

    /* ── Typography ────────────────────────────────────────────────────── */
    --font-display:    'Oswald', sans-serif;
    --font-body:       'Outfit', sans-serif;
    --font-mono:       'JetBrains Mono', monospace;

    --size-h1:         3.5rem;
    --size-h2:         2.5rem;
    --size-h3:         2rem;
    --size-h4:         1.5rem;
    --size-h5:         1.25rem;
    --size-body:       1rem;
    --size-small:      0.875rem;
    --size-xs:         0.75rem;

    --weight-light:    300;
    --weight-normal:   400;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* ── 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;

    /* ── Transitions ────────────────────────────────────────────────────── */
    --transition-fast:  150ms ease;
    --transition-base:  300ms ease;
    --transition-slow:  500ms ease;

    /* ── Breakpoints (rem-based) ────────────────────────────────────────── */
    --bp-sm:  576px;
    --bp-md:  768px;
    --bp-lg:  992px;
    --bp-xl:  1200px;
    --bp-2xl: 1400px;

    /* ── Z-Index ────────────────────────────────────────────────────────── */
    --z-base:      1;
    --z-elevated:  10;
    --z-modal:     1000;
    --z-tooltip:   1100;
    --z-notification: 1200;
}

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

/* ── Base Styles Using Tokens ────────────────────────────────────────────── */

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--surface-page);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--size-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    line-height: 1.2;
    margin-bottom: var(--space-md);
}

h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }
h4 { font-size: var(--size-h4); }
h5 { font-size: var(--size-h5); }

p {
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
}

a {
    color: var(--brand-500);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--brand-300);
}

/* ── Utility Classes ────────────────────────────────────────────────────── */

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }

.bg-brand { background-color: var(--brand-500); }
.bg-gold { background-color: var(--accent-gold); }

.trait-glow-blue { box-shadow: 0 0 30px var(--trait-blue); }
.trait-glow-purple { box-shadow: 0 0 30px var(--trait-purple); }
.trait-glow-red { box-shadow: 0 0 30px var(--trait-red); }
.trait-glow-orange { box-shadow: 0 0 30px var(--trait-orange); }
.trait-glow-yellow { box-shadow: 0 0 30px var(--trait-yellow); }
.trait-glow-green { box-shadow: 0 0 30px var(--trait-green); }

.trait-border-blue { border-color: var(--trait-blue); }
.trait-border-purple { border-color: var(--trait-purple); }
.trait-border-red { border-color: var(--trait-red); }
.trait-border-orange { border-color: var(--trait-orange); }
.trait-border-yellow { border-color: var(--trait-yellow); }
.trait-border-green { border-color: var(--trait-green); }