/**
 * Design tokens. A system font stack is used for Phase 1 so no font files
 * are referenced before real ones are chosen/added — swapping in a
 * self-hosted heading/body font pair later only means editing these two
 * variables, nothing structural.
 */

:root {
    /* Color */
    --color-ink: #0b1f33;
    --color-ink-soft: #1c3350;
    --color-surface: #ffffff;
    --color-surface-muted: #f4f6f8;
    --color-border: #dfe4ea;
    --color-text: #1a2733;
    --color-text-muted: #55636f;
    --color-accent: #e07f10;
    --color-accent-dark: #b8660a;
    --color-accent-contrast: #ffffff;
    --color-focus: #2f6fed;

    /* Brand wordmark only ("Sky Nets" in the header/footer logo lockup) —
       kept separate from --color-accent, which stays the site's one warm
       accent used everywhere else (buttons, icons, highlights). */
    --color-brand-sky: #0e7c93;
    --color-brand-sky-light: #14a8c2;

    /* Typography */
    --font-heading: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Spacing (8px base scale) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Shadow — kept subtle by design */
    --shadow-sm: 0 1px 2px rgba(11, 31, 51, 0.06);
    --shadow-md: 0 4px 16px rgba(11, 31, 51, 0.10);

    /* Layout */
    --container-max: 1200px;
    --header-height: 72px;

    /* Motion */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;

    /* Stacking */
    --z-header: 100;
    --z-mega: 110;
}