/*
 * Design tokens. Every colour, font, size, space and radius the engine uses
 * is defined here and nowhere else. The values here are the engine default
 * (the Civic skin). A theme file in themes/ redefines the skin tokens and
 * nothing else; a directory then overrides any token from its brand_tokens
 * row or its tokens.css file. New names use the American "color" spelling.
 *
 * The look is Solid Ground (see STYLE.md): solid fills instead of borders
 * and shadows, charcoal type on near-white paper, one accent used as paint.
 * --border-width and --shadow-card stay defined for brand token
 * compatibility but the component files no longer read them.
 */
:root {
    /* Paper, tiles and ink */
    --color-bg: #f8f8f7;
    --color-surface: #ebeae6;
    --color-surface-raised: #dcdad4;
    --color-text: #1c1b1a;
    --color-text-muted: #3c3b38;

    /* Accent as paint: primary carries buttons and bands, accent is the pop */
    --color-primary: #095643;
    --color-on-primary: #ffffff;
    --color-accent: #ffd166;
    --color-on-accent: #1c1b1a;
    --color-border: transparent;

    /* State colours and the fills behind state messages */
    --color-success: #095643;
    --color-warning: #8a5a00;
    --color-danger: #b3261e;
    --color-success-bg: #d9eee4;
    --color-warning-bg: #ffe9a8;
    --color-danger-bg: #f3dcd6;

    /* Header and hero fills */
    --color-header-bg: #1c1b1a;
    --color-header-fg: #f8f8f7;
    --color-header-mark: #ffd166;
    --color-hero-bg: #1c1b1a;
    --color-hero-fg: #f8f8f7;

    /* Browse tiles cycle through these six */
    --color-tile-1: #d9eee4;
    --color-tile-2: #ffe9a8;
    --color-tile-3: #dce8f5;
    --color-tile-4: #ebeae6;
    --color-tile-5: #f3dcd6;
    --color-tile-6: #e6e3f5;

    --font-body: 'Albert Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    --text-sm: 0.9rem;
    --text-base: 1.125rem;
    --text-lg: 1.3rem;
    --text-xl: 1.6rem;
    --text-2xl: 2.1rem;
    --text-3xl: 2.9rem;
    --text-4xl: 4rem;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    /* One radius per role: sm for controls, md for tiles and rows, lg for big panels */
    --radius-sm: 8px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    --border-width: 0;
    --shadow-card: none;
    --max-width: 1180px;
}