:root{

    /* ======================================================
       Body Classes
    ======================================================= */

    .world-grand-hall {
        --osf-world-color: #B08A3E;
    }

    .gateway-iron {
        --osf-accent-color: #6D747C;
    }

    .gateway-oak {
        --osf-accent-color: #7B5E35;
    }

    .gateway-dragon {
        --osf-accent-color: #8B2F2F;
    }

    --osf-header-brand-color:#D8D0C2;

    --osf-gold:#d6ae4a;

    --osf-dark:#080808;

    --osf-text:#f5f5f5;

    --osf-transition:.35s ease;

    --osf-header-active-color:#B89146;

    --osf-gate-color:#B08A3E;

    /* ======================================================
       Palette
       ------------------------------------------------------
       Raw color tokens.
       Never use these directly in components.
    ====================================================== */

    --gold-500: #A8853B;
    --gold-700: #7A5F28;

    --stone-100: #F5F2EB;
    --stone-200: #EDE8DC;
    --stone-500: #B8AD9A;

    --oak-700:       #463728;
    --charcoal-900:  #2D2A24;
    --black-950:     #111111


    /* ======================================================
       Guild Theme
       ------------------------------------------------------
       Project identity.
       These should be used throughout the site.
    ====================================================== */

    --guild-gold: var(--gold-500);
    --guild-bronze: var(--gold-700);

    --guild-parchment: var(--stone-100);
    --guild-stone: var(--stone-200);

    --guild-oak: var(--oak-700);
    --guild-charcoal: var(--charcoal-900);
    --guild-black: var(--black-950);


    /* ======================================================
       Semantic UI Colors
       ------------------------------------------------------
       Generic interface colors.
       These reference the Guild theme.
    ====================================================== */

    --color-background: var(--guild-charcoal);
    --color-surface: var(--guild-oak);

    --color-text: var(--guild-parchment);
    --color-heading: var(--guild-parchment);

    --color-accent: var(--guild-gold);
    --color-accent-hover: var(--guild-bronze);



    /* ======================================================
       Typography
    ====================================================== */

    --font-heading: "Cormorant Garamond", serif;
    --font-body: "Source Sans Pro", sans-serif;

    --header-brand-size: 1.25rem;

    --header-subtitle-size: 0.875rem;

    --navigation-size:1rem;

    --nav-font: "Marcellus", serif;

    --hero-title-size:2rem;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 2rem;



    /* ======================================================
       Layout
    ====================================================== */

    /* Header */
    --osf-header-height: 150px;
    --osf-header-emblem-size: 78px;
    --osf-header-padding-x: 48px;

    /* Header Identity */
    --header-brand-font: var(--font-heading);

    --header-brand-size: 1.35rem;

    --header-brand-weight: 600;

    --header-brand-spacing: .08em;

    --header-brand-line-height: .92;

    --header-subtitle-size: .72rem;

    --header-subtitle-spacing: .32em;

    /* Content */
    --container-width: 1280px;
    --reading-width: 760px;

    --hall-center: 50%;


    /* ======================================================
       Spacing
    ====================================================== */

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 4rem;



    /* ======================================================
       Borders & Radius
    ====================================================== */

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;



    /* ======================================================
       Shadows
    ====================================================== */

    --shadow-sm: 0 2px 4px rgb(0 0 0 / 8%);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 12%);



    /* ======================================================
       Motion
    ====================================================== */

    --transition-fast: 0.2s;
    --transition-normal: 0.35s;
    --transition-slow: 0.5s;


    /* ======================================================
       Effects
    ====================================================== */

    --glow-gold-sm:
        drop-shadow(0 0 6px rgb(214 174 74 / .15));

    --glow-gold-md:
        drop-shadow(0 0 10px rgb(214 174 74 / .28));

}