/* #####################################################################
   GENERATED DESIGN TOKENS
   Edit files in /design rather than editing this renderer's output.
   ##################################################################### */
:root {
    --palette-rosewood: #B1657C;
    --palette-soft-periwinkle: #AE9DED;
    --palette-dust-grey: #D7D7D7;
    --palette-sunflower-gold: #F4C369;
    --palette-midnight-violet: #201829;
    --palette-muted-grey: #777777;
    --palette-visited-violet: #7045A0;
    --palette-code-green: #7CFC7C;
    --palette-code-background: #11101A;
    --palette-error-pink: #FF9A9A;
    --palette-red: #FF0000;
    --palette-yellow: #FFD700;
    --palette-blue: #0066FF;
    --palette-orange: #FF7F00;
    --palette-green: #00A651;
    --palette-purple: #8000FF;
    --palette-red-orange: #FF4500;
    --palette-yellow-orange: #FFB000;
    --palette-yellow-green: #9ACD32;
    --palette-blue-green: #009999;
    --palette-blue-purple: #5A4FCF;
    --palette-red-purple: #C71585;

    --site-color-primary: var(--palette-rosewood);
    --site-color-secondary: var(--palette-soft-periwinkle);
    --site-color-text: var(--palette-dust-grey);
    --site-color-accent: var(--palette-sunflower-gold);
    --site-color-background: var(--palette-midnight-violet);
    --site-color-muted: var(--palette-muted-grey);
    --site-color-visited: var(--palette-visited-violet);
    --site-color-code: var(--palette-code-green);
    --site-color-code-background: var(--palette-code-background);
    --site-color-error: var(--palette-error-pink);

    --semantic-success: #2E7D32;
    --semantic-information: #1565C0;
    --semantic-warning: #ED8B00;
    --semantic-danger: #C62828;
    --semantic-pending: #D4A017;
    --semantic-neutral: #6B7280;

    --semantic-success-surface: color-mix(in srgb, var(--semantic-success) 12%, var(--site-color-background));
    --semantic-information-surface: color-mix(in srgb, var(--semantic-information) 12%, var(--site-color-background));
    --semantic-warning-surface: color-mix(in srgb, var(--semantic-warning) 14%, var(--site-color-background));
    --semantic-danger-surface: color-mix(in srgb, var(--semantic-danger) 12%, var(--site-color-background));
    --semantic-pending-surface: color-mix(in srgb, var(--semantic-pending) 14%, var(--site-color-background));
    --semantic-neutral-surface: color-mix(in srgb, var(--semantic-neutral) 12%, var(--site-color-background));

    --color-primary: var(--site-color-primary);
    --color-secondary: var(--site-color-secondary);
    --color-accent: var(--site-color-accent);
    --color-text: var(--site-color-text);
    --color-background: var(--site-color-background);
    --site-color-stroke: color-mix(in srgb, var(--site-color-text) 16%, transparent);
    --color-stroke: var(--site-color-stroke);
    --color-border: var(--site-color-secondary);
    --color-border-light: color-mix(in srgb, var(--site-color-text) 55%, transparent);
    --color-focus: var(--site-color-accent);
    --color-link-visited: var(--site-color-visited);
    /* Derived interface colors. Core editable values remain in /design. */
    --color-shadow-heading: color-mix(in srgb, black 60%, transparent);
    --color-code: var(--site-color-code);
    --color-code-background: var(--site-color-code-background);
    --color-error: var(--site-color-error);
    --surface-faint: color-mix(in srgb, var(--site-color-text) 1.8%, transparent);
    --surface-soft: color-mix(in srgb, var(--site-color-text) 2.5%, transparent);
    --surface-medium: color-mix(in srgb, var(--site-color-text) 4.5%, transparent);
    --surface-strong: color-mix(in srgb, var(--site-color-text) 8%, transparent);
    --surface-stroke: color-mix(in srgb, var(--site-color-text) 16%, transparent);
    --overlay-dark: color-mix(in srgb, black 35%, transparent);
    --debug-outline: color-mix(in srgb, red 65%, transparent);
    --debug-spacing: color-mix(in srgb, var(--site-color-accent) 20%, transparent);

    /* v0.8.3.8 header and navbar presentation tokens. */
    --navbar-shadow-color: color-mix(in srgb, var(--site-color-code-background) 36%, transparent);
    --navbar-shadow: 0 .35rem 1.25rem var(--navbar-shadow-color);
    --navbar-stroke-width: 3px;
    --navbar-stroke-color: var(--site-color-accent);

    /* v0.8.3.6 compatibility aliases generated from Monarch tokens. */
    --border-color: var(--color-border);
    --color-text-muted: var(--site-color-muted);
    --color-white: #ffffff;
    --font-family-heading: var(--font-primary);
    --font-heading: var(--font-primary);
    --font-size-xs: var(--fs-xs);
    --font-size-lg: var(--fs-lg);
    --font-weight-semibold: var(--fw-semibold);
    --font-weight-bold: var(--fw-bold);
    --cluster-space: var(--space-md);
    --stack-space: var(--space-md);

    --space-0: 0;
    --space-xs: .25rem;
    --space-sm: .5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --border-width-hairline: 1px;
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 4px;
    --border-width-default: 1px;
    --border-width-default: 1px;
    --radius-none: 0;
    --radius-sm: .25rem;
    --radius-md: .5rem;
    --radius-lg: .75rem;
    --radius-xl: 1rem;
    --radius-full: 999px;
    --radius-pill: 999px;
    --shadow-sm: 0 2px 6px rgba(0,0,0,.18);
    --shadow-md: 0 10px 24px rgba(0,0,0,.25);
    --shadow-lg: 0 18px 48px rgba(0,0,0,.35);
    --transition-fast: 120ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 360ms ease;
    --size-content-sm: 40rem;
    --size-content-md: 52rem;
    --size-content-lg: 64rem;
    --size-content-xl: 80rem;
    --size-18: 4.5rem;
    --size-control-sm: 2.25rem;
    --size-control-md: 2.75rem;
    --size-control-lg: 3.25rem;
    --breakpoint-sm: 30rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 80rem;
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --font-primary: "Aleo", serif;
    --font-secondary: "Roboto Slab", serif;
    --font-text: "Halant", serif;
    --font-accent: "Kumar One Outline", cursive;
    --font-mono: "JetBrains Mono", Consolas, monospace;
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-md: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 2rem;
    --fs-xxl: 2rem;
    --fs-3xl: 2.5rem;
    --fs-xxxl: 2.5rem;
    --fs-4xl: 3rem;
}

.color-rosewood { color: var(--palette-rosewood); }
.bg-rosewood { background-color: var(--palette-rosewood); }
.border-rosewood { border-color: var(--palette-rosewood); }
.color-soft-periwinkle { color: var(--palette-soft-periwinkle); }
.bg-soft-periwinkle { background-color: var(--palette-soft-periwinkle); }
.border-soft-periwinkle { border-color: var(--palette-soft-periwinkle); }
.color-dust-grey { color: var(--palette-dust-grey); }
.bg-dust-grey { background-color: var(--palette-dust-grey); }
.border-dust-grey { border-color: var(--palette-dust-grey); }
.color-sunflower-gold { color: var(--palette-sunflower-gold); }
.bg-sunflower-gold { background-color: var(--palette-sunflower-gold); }
.border-sunflower-gold { border-color: var(--palette-sunflower-gold); }
.color-midnight-violet { color: var(--palette-midnight-violet); }
.bg-midnight-violet { background-color: var(--palette-midnight-violet); }
.border-midnight-violet { border-color: var(--palette-midnight-violet); }
.color-muted-grey { color: var(--palette-muted-grey); }
.bg-muted-grey { background-color: var(--palette-muted-grey); }
.border-muted-grey { border-color: var(--palette-muted-grey); }
.color-visited-violet { color: var(--palette-visited-violet); }
.bg-visited-violet { background-color: var(--palette-visited-violet); }
.border-visited-violet { border-color: var(--palette-visited-violet); }
.color-code-green { color: var(--palette-code-green); }
.bg-code-green { background-color: var(--palette-code-green); }
.border-code-green { border-color: var(--palette-code-green); }
.color-code-background { color: var(--palette-code-background); }
.bg-code-background { background-color: var(--palette-code-background); }
.border-code-background { border-color: var(--palette-code-background); }
.color-error-pink { color: var(--palette-error-pink); }
.bg-error-pink { background-color: var(--palette-error-pink); }
.border-error-pink { border-color: var(--palette-error-pink); }
.color-red { color: var(--palette-red); }
.bg-red { background-color: var(--palette-red); }
.border-red { border-color: var(--palette-red); }
.color-yellow { color: var(--palette-yellow); }
.bg-yellow { background-color: var(--palette-yellow); }
.border-yellow { border-color: var(--palette-yellow); }
.color-blue { color: var(--palette-blue); }
.bg-blue { background-color: var(--palette-blue); }
.border-blue { border-color: var(--palette-blue); }
.color-orange { color: var(--palette-orange); }
.bg-orange { background-color: var(--palette-orange); }
.border-orange { border-color: var(--palette-orange); }
.color-green { color: var(--palette-green); }
.bg-green { background-color: var(--palette-green); }
.border-green { border-color: var(--palette-green); }
.color-purple { color: var(--palette-purple); }
.bg-purple { background-color: var(--palette-purple); }
.border-purple { border-color: var(--palette-purple); }
.color-red-orange { color: var(--palette-red-orange); }
.bg-red-orange { background-color: var(--palette-red-orange); }
.border-red-orange { border-color: var(--palette-red-orange); }
.color-yellow-orange { color: var(--palette-yellow-orange); }
.bg-yellow-orange { background-color: var(--palette-yellow-orange); }
.border-yellow-orange { border-color: var(--palette-yellow-orange); }
.color-yellow-green { color: var(--palette-yellow-green); }
.bg-yellow-green { background-color: var(--palette-yellow-green); }
.border-yellow-green { border-color: var(--palette-yellow-green); }
.color-blue-green { color: var(--palette-blue-green); }
.bg-blue-green { background-color: var(--palette-blue-green); }
.border-blue-green { border-color: var(--palette-blue-green); }
.color-blue-purple { color: var(--palette-blue-purple); }
.bg-blue-purple { background-color: var(--palette-blue-purple); }
.border-blue-purple { border-color: var(--palette-blue-purple); }
.color-red-purple { color: var(--palette-red-purple); }
.bg-red-purple { background-color: var(--palette-red-purple); }
.border-red-purple { border-color: var(--palette-red-purple); }

.color-primary { color: var(--site-color-primary); }
.bg-primary { background-color: var(--site-color-primary); }
.border-primary { border-color: var(--site-color-primary); }
.color-secondary { color: var(--site-color-secondary); }
.bg-secondary { background-color: var(--site-color-secondary); }
.border-secondary { border-color: var(--site-color-secondary); }
.color-text { color: var(--site-color-text); }
.bg-text { background-color: var(--site-color-text); }
.border-text { border-color: var(--site-color-text); }
.color-accent { color: var(--site-color-accent); }
.bg-accent { background-color: var(--site-color-accent); }
.border-accent { border-color: var(--site-color-accent); }
.color-background { color: var(--site-color-background); }
.bg-background { background-color: var(--site-color-background); }
.border-background { border-color: var(--site-color-background); }
.color-muted { color: var(--site-color-muted); }
.bg-muted { background-color: var(--site-color-muted); }
.border-muted { border-color: var(--site-color-muted); }
.color-visited { color: var(--site-color-visited); }
.bg-visited { background-color: var(--site-color-visited); }
.border-visited { border-color: var(--site-color-visited); }
.color-code { color: var(--site-color-code); }
.bg-code { background-color: var(--site-color-code); }
.border-code { border-color: var(--site-color-code); }
.color-code-background { color: var(--site-color-code-background); }
.bg-code-background { background-color: var(--site-color-code-background); }
.border-code-background { border-color: var(--site-color-code-background); }
.color-error { color: var(--site-color-error); }
.bg-error { background-color: var(--site-color-error); }
.border-error { border-color: var(--site-color-error); }