:root {
    --bg-body: #fdfdfd;
    --bg-panel: #ffffff;
    --nav-color: #ffffff;
    
    --text-main: #333333;
    --text-muted: #888888;
    --text-hint: #666666;
    
    --gold: #C5A028;
    --gold-light: #fcf8e3;
    --gold-text: #856812;
    
    --border: #cccccc;        
    --border-gold: #e6c860;
    
    --success: #28a745;
    --danger: #dc3545;
    --info: #17a2b8;
    --warn: #8a5300;
    --danger-text: var(--danger);
    --ok: #2f9e63;

    --bg-alt: #f7f7f5;
    --bg-card: #ffffff;
    --bg-input: #ffffff;

    --nav-h: 70px;

    --r-sm: 6px;
    --r-md: 9px;
    --r-lg: 14px;

    --r-btn: 0;
    --r-panel: 0;
    --r-field: 0;
    --card-color: var(--bg-panel);
    --float-color: var(--card-color);
    --op-panel: 100%;
    --op-nav: 100%;
    --op-float: 100%;
    --panel-bg: color-mix(in srgb, var(--card-color) var(--op-panel), transparent);
    --bg-nav: color-mix(in srgb, var(--nav-color) var(--op-nav), transparent);
    --bg-float: color-mix(in srgb, var(--float-color) var(--op-float), transparent);
    --panel-border: var(--border);
    --h1-transform: uppercase;
    --h1-tracking: 2px;
    --h1-weight: 300;
    --h1-color: var(--gold-text);
    --h2-rule: 1px solid var(--gold);
    --h2-rule-gap: 15px;
    --h2-tracking: 1px;
    --btn-weight: 400;
    --on-gold: #fff;

    --shadow-card: 0 4px 20px rgba(0,0,0,0.03);
    --shadow-hover: 0 8px 30px rgba(197, 160, 40, 0.15);

    --backdrop: url('/assets/bgs/lone_silver_haired_knight.webp');

    --paper-ink: 255, 255, 255;
    --paper-centre: 0.72;
    --paper-mid: 0.84;
    --paper-edge: 1;
    --paper-footer: 0.68;

    --paper-wash: radial-gradient(ellipse 82% 76% at 50% 46%,
        rgba(var(--paper-ink), var(--paper-centre)) 0%,
        rgba(var(--paper-ink), var(--paper-mid)) 46%,
        rgba(var(--paper-ink), var(--paper-edge)) 84%);
}