/* ============================================================================ * Bible Quiz — brand color tokens (GENERATED — do not edit) * Source of truth: brand/biblequiz.tokens.json • Regenerate: cd brand && npm run gen * v1.0.0 * * Defines the --bq-* custom properties consumed across the landing (main.css). * Linked before main.css in every page's ; the var() names are kept stable * across regenerations. To change a value, edit the tokens JSON and run the * generator — never hand-edit this file. * ========================================================================== */ :root { /* ─── Brand ─── */ --bq-navy: #122444; /* Primary brand — ground, headings, the mark */ --bq-gold: #e0a836; /* Accent / illumination — frames, rules, the spark */ --bq-blue: #1f6fe0; /* Primary action — buttons, links, live state */ /* ─── Navy scale ─── */ --bq-navy-900: #0f1f3d; /* Deepest — gradient floor, vignettes */ --bq-navy-800: #122444; /* Scripture Navy (base) */ --bq-navy-700: #16294c; /* Raised dark surface */ --bq-navy-600: #182f5a; /* Dark surface on dark */ --bq-on-navy: #eaf1ff; /* Text / marks on navy */ --bq-on-navy-muted: #aabad8; /* Secondary text on navy */ --bq-on-navy-line: rgba(234, 241, 255, 0.16); /* Hairlines on navy */ /* ─── Blue scale ─── */ --bq-blue-300: #5b9bf0; /* Bright accent on dark */ --bq-blue-500: #1f6fe0; /* Competition Blue (base) — CTA top */ --bq-blue-600: #1860c9; /* CTA bottom / link on light */ --bq-blue-700: #114a9f; /* Pressed / deep */ /* ─── Gold scale ─── */ --bq-gold-300: #f3c562; /* Gold Soft — spark, accents on dark */ --bq-gold-500: #e0a836; /* Scripture Gold (base) */ --bq-gold-700: #b9821e; /* Gold Deep — kicker text, rules on light */ /* ─── Neutrals — cool paper ─── */ --bq-paper: #f4f7fc; /* Default page background */ --bq-paper-high: #ffffff; /* Cards, raised surfaces */ --bq-paper-low: #eaf0fa; /* Sunken / alternate band */ --bq-surface: #ffffff; /* Card surface */ --bq-ink: #16202f; /* Primary body text */ --bq-ink-soft: #2b3a52; /* Strong secondary text */ --bq-muted: #56657f; /* Muted text / captions */ --bq-line: #dbe3f1; /* Borders / dividers */ --bq-line-soft: #e8eef8; /* Faint dividers */ /* ─── Signature gradients ─── */ --bq-grad-action: linear-gradient(180deg, var(--bq-blue-500), var(--bq-blue-600)); --bq-grad-navy: linear-gradient(135deg, #142a52, var(--bq-navy-900)); --bq-grad-gild: linear-gradient(90deg, transparent, var(--bq-gold), transparent); }