/* =========================================================================
 * Design tokens — single source of truth for theming.
 *
 * Existing `src/assets/theme.css` already defines color tokens for light/dark
 * (--app-bg, --app-surface, --app-text, …). This file extends them with the
 * remaining tokens (spacing, radii, typography, motion, brand) so any UI
 * choice can be re-skinned in one place.
 *
 * Override per-page or per-component by re-declaring variables on a parent
 * selector — they cascade like any other CSS property.
 * ========================================================================= */

:root {
    /* ── Brand colors ──────────────────────────────────────────────────── */
    --brand-primary:        #2563eb;
    --brand-primary-hover:  #1d4ed8;
    --brand-primary-soft:   #dbeafe;
    --brand-secondary:      #7c3aed;
    --brand-success:        #16a34a;
    --brand-warning:        #d97706;
    --brand-danger:         #dc2626;
    --brand-info:           #0891b2;

    /* ── Typography ────────────────────────────────────────────────────── */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
                 "Inter", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
                 "Segoe UI Emoji", "Segoe UI Symbol";
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Menlo", "Monaco",
                 "Consolas", "Liberation Mono", "Courier New", monospace;

    --fs-xs:   12px;
    --fs-sm:   13px;
    --fs-base: 14px;
    --fs-md:   15px;
    --fs-lg:   17px;
    --fs-xl:   20px;
    --fs-2xl:  24px;
    --fs-3xl:  30px;

    --lh-tight:  1.2;
    --lh-base:   1.5;
    --lh-loose:  1.75;

    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* ── Spacing scale ─────────────────────────────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  32px;
    --space-8:  40px;
    --space-9:  56px;
    --space-10: 72px;

    /* ── Radii ─────────────────────────────────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-pill: 999px;

    /* ── Borders & focus ───────────────────────────────────────────────── */
    --border-width: 1px;
    --focus-ring:   0 0 0 3px rgba(37, 99, 235, 0.35);

    /* ── Motion ────────────────────────────────────────────────────────── */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 320ms ease;

    /* ── Z-index scale ─────────────────────────────────────────────────── */
    --z-nav:    100;
    --z-modal:  1050;
    --z-toast:  1080;
    --z-toggle: 1090;

    /* ── App chrome ────────────────────────────────────────────────────── */
    --header-height: 64px;
    --content-max:   1320px;
}

/* Dark-mode-only re-tunes (color tokens come from assets/theme.css). */
html[data-theme="dark"] {
    --brand-primary-soft: #1e3a8a;
    --focus-ring:         0 0 0 3px rgba(125, 180, 255, 0.35);
}

/* ── Base reset (kept minimal — Bootstrap already normalises) ─────────── */
html, body {
    height: 100%;
}

body.app-body {
    background: var(--app-bg);
    color: var(--app-text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
}

a {
    color: var(--app-link);
}

*:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}