/* Obsidian & Bronze design tokens. Every colour on the site comes from this file. */
:root {
    color-scheme: dark;

    /* Surfaces */
    --color-bg: #15100B;
    --color-surface: #1C150E;
    --color-surface-raised: #241A11;

    /* Bronze accent */
    --color-bronze: #C98B4E;
    --color-bronze-light: #E7B677;
    --gradient-bronze: linear-gradient(180deg, #E7B677, #C98B4E);
    --gradient-headline: linear-gradient(95deg, #E7B677, #C98B4E 55%, #8FAE7B);

    /* Circuit green */
    --color-green: #4A6B3A;
    --color-green-light: #8FAE7B;

    /* Text */
    --color-text-strong: #FFF8EE;
    --color-text: #F2E9DC;
    --color-text-muted: #CBBBA5;
    --color-on-bronze: #15100B;
    --color-danger: #FFB4A2;

    /* Lines. --color-line-strong keeps 3:1 against every surface for control borders. */
    --color-line: #3A2C1E;
    --color-line-strong: #8C7760;

    /* Translucent tints of the palette */
    --tint-bronze-glow: rgba(201, 139, 78, .22);
    --tint-bronze-edge: rgba(201, 139, 78, .55);
    --tint-bronze-trace: rgba(201, 139, 78, .3);
    --tint-green-glow: rgba(74, 107, 58, .2);
    --tint-green-trace: rgba(143, 174, 123, .3);

    /* Type */
    --font-heading: 'Space Grotesk Variable', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Inter Variable', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono Variable', ui-monospace, Consolas, monospace;

    /* Layout */
    --header-height: 72px;
    --gutter: 16px;
    --container-width: 1200px;
    --container-narrow-width: 760px;
    --section-space: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
    --radius: 6px;
    --radius-large: 10px;
}

@media (min-width: 600px) {
    :root { --gutter: 32px; }
}

@media (min-width: 960px) {
    :root {
        --header-height: 88px;
        --gutter: 44px;
    }
}