/* ==========================================================================
   Design tokens -- the whole visual language of funartech.com in one place.
   Change a value here and every page follows.
   ========================================================================== */
:root {
    /* --- colour ------------------------------------------------------------ */
    --color-navy: #10283b;          /* headings, logo, footer */
    --color-navy-deep: #0a1c2a;
    --color-blue: #63a2d4;          /* research / secondary accent */
    --color-blue-soft: #e8f0f7;
    --color-blue-dark: #4a8bc0;
    --color-amber: #d99537;         /* primary action, enterprise accent */
    --color-amber-soft: #fef3e8;
    --color-amber-dark: #c77f2a;
    --color-teal: #19a690;          /* third accent */
    --color-teal-soft: #e8f7f4;

    --color-paper: #fafaf9;         /* page background */
    --color-surface: #fff;          /* cards, nav */
    --color-border: #e5e5e0;
    --color-border-strong: #ddd;

    --color-text: #333;
    --color-text-muted: #666;
    --color-text-subtle: #999;
    --color-text-inverse: #fff;
    --color-text-inverse-muted: rgba(255, 255, 255, 0.62);

    --color-danger: #c0392b;
    --color-success: #19a690;

    /* Default accent; sections override it with .accent-* */
    --accent: var(--color-amber);
    --accent-soft: var(--color-amber-soft);

    /* --- type -------------------------------------------------------------- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --text-hero: 48px;
    --text-title: 32px;
    --text-section: 28px;
    --text-subtitle: 22px;
    --text-lead: 18px;
    --text-body: 16px;
    --text-small: 14px;
    --text-tiny: 13px;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    --leading-tight: 1.2;
    --leading-normal: 1.6;
    --leading-relaxed: 1.7;
    --leading-loose: 1.8;

    /* --- space ------------------------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-15: 60px;
    --space-20: 80px;

    /* --- shape ------------------------------------------------------------- */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    --border-thin: 1px solid var(--color-border);
    --border-accent: 3px;
    --border-accent-side: 4px;

    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-menu: 0 8px 24px rgba(16, 40, 59, 0.12);

    /* --- layout ------------------------------------------------------------ */
    --width-prose: 760px;
    --width-narrow: 700px;
    --width-medium: 1000px;
    --width-wide: 1200px;
    --gutter: 40px;

    --transition: 0.2s ease;
    --header-height: 68px;
}

/* Accent modifiers: a card decides its own colour instead of inheriting it
   from its position in the DOM. */
.accent-amber { --accent: var(--color-amber); --accent-soft: var(--color-amber-soft); }
.accent-blue  { --accent: var(--color-blue);  --accent-soft: var(--color-blue-soft); }
.accent-teal  { --accent: var(--color-teal);  --accent-soft: var(--color-teal-soft); }
.accent-navy  { --accent: var(--color-navy);  --accent-soft: var(--color-blue-soft); }

@media (max-width: 768px) {
    :root {
        --text-hero: 32px;
        --text-title: 26px;
        --text-section: 24px;
        --gutter: 20px;
        --space-20: 48px;
        --space-15: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root { --transition: 0s; }
    * { animation: none !important; scroll-behavior: auto !important; }
}