/*
 * Rhystic Bazaar visual tokens.
 * Light parchment system with blue and turquoise accents.
 */

:root {
    --rb-bg: #FFF4D0;
    --rb-bg-soft: #F1DFAE;
    --rb-bg-elevated: #D8BE7A;
    --rb-bg-teal: #B9D8E6;

    --rb-surface: #FFF9E8;
    --rb-surface-elevated: #FFFDF7;
    --rb-surface-muted: #F5E9C5;
    --rb-border: #7FA6B8;
    --rb-border-soft: rgba(12, 94, 158, 0.16);
    --rb-border-strong: rgba(53, 200, 242, 0.28);

    --rb-primary: #35C8F2;
    --rb-primary-light: #7DEBFF;
    --rb-primary-crystal: #1599D4;
    --rb-primary-dark: #0C5E9E;

    --rb-gold: #D8A43A;
    --rb-gold-light: #F2D47A;
    --rb-gold-dark: #B87B25;
    --rb-gold-warm: #FFE7A3;

    --rb-parchment: #F1DFAE;
    --rb-aged-paper: #D8BE7A;
    --rb-cream: #FFF4D0;

    --rb-text: #041018;
    --rb-text-secondary: #0B2A42;
    --rb-text-muted: #255C78;
    --rb-text-on-primary: #F7FBFF;
    --rb-text-on-gold: #1D1405;
    --rb-text-on-parchment: #20170A;

    --rb-success: #39D98A;
    --rb-warning: #F2B84B;
    --rb-error: #E45B5B;
    --rb-info: #35C8F2;

    --rb-bg-rgb: 255, 244, 208;
    --rb-bg-soft-rgb: 241, 223, 174;
    --rb-bg-elevated-rgb: 216, 190, 122;
    --rb-bg-teal-rgb: 185, 216, 230;
    --rb-surface-rgb: 255, 249, 232;
    --rb-surface-elevated-rgb: 255, 253, 247;
    --rb-primary-rgb: 53, 200, 242;
    --rb-primary-light-rgb: 125, 235, 255;
    --rb-gold-rgb: 216, 164, 58;
    --rb-gold-light-rgb: 242, 212, 122;
    --rb-parchment-rgb: 241, 223, 174;
    --rb-text-rgb: 4, 16, 24;

    --rb-glow-cyan: 0 0 24px rgba(53, 200, 242, 0.18);
    --rb-glow-gold: 0 0 22px rgba(216, 164, 58, 0.16);
    --rb-shadow-card: 0 18px 38px rgba(4, 16, 24, 0.12);
    --rb-shadow-soft: 0 12px 28px rgba(4, 16, 24, 0.1);

    --rb-gradient-header:
        linear-gradient(180deg, rgba(var(--rb-surface-elevated-rgb), 0.98) 0%, rgba(var(--rb-bg-rgb), 0.96) 100%);
    --rb-gradient-hero:
        radial-gradient(circle at top left, rgba(var(--rb-primary-light-rgb), 0.22), transparent 28%),
        radial-gradient(circle at bottom right, rgba(var(--rb-primary-rgb), 0.14), transparent 24%),
        linear-gradient(135deg, rgba(var(--rb-surface-elevated-rgb), 0.98), rgba(var(--rb-bg-rgb), 0.98));
    --rb-gradient-card:
        linear-gradient(180deg, rgba(var(--rb-surface-elevated-rgb), 0.98), rgba(var(--rb-surface-rgb), 0.98));
    --rb-gradient-card-muted:
        linear-gradient(180deg, rgba(var(--rb-surface-rgb), 0.98), rgba(var(--rb-bg-soft-rgb), 0.84));
    --rb-gradient-primary: linear-gradient(135deg, var(--rb-primary-dark) 0%, var(--rb-primary) 100%);
    --rb-gradient-gold: linear-gradient(135deg, var(--rb-gold) 0%, var(--rb-gold-light) 100%);

    --rb-link: var(--rb-primary-dark);
    --rb-link-hover: var(--rb-primary-crystal);
    --rb-input-bg: rgba(var(--rb-surface-elevated-rgb), 0.94);
    --rb-table-row-hover: rgba(var(--rb-primary-rgb), 0.08);
    --rb-card-hover-border: rgba(var(--rb-primary-rgb), 0.28);
    --rb-premium-badge-bg: rgba(var(--rb-gold-rgb), 0.14);
    --rb-magic-badge-bg: rgba(var(--rb-primary-rgb), 0.12);
    --rb-narrative-badge-bg: rgba(var(--rb-parchment-rgb), 0.92);
}

/*
 * Usage rules:
 * - Cream and parchment dominate large backgrounds.
 * - Blue and turquoise drive interaction, CTAs, focus, hover and active states.
 * - Gold is secondary and should be minimal if used at all.
 * - Dark navy is for text, depth and selective contrast, not the main page fill.
 * - Maintain AA contrast on text and critical controls.
 */