/* ============================================================================
   Techno Orbits Canada — Design tokens
   Techno brand system — bright, premium, medical.
   Techno Red #ED1C24 (headings/accents/active), Royal Blue #243C91 + Deep Navy
   #172A68 (branding/nav/footer/badges), Brand Purple #4B2B83, purple→red gradient
   CTAs, white + soft-grey backgrounds, charcoal text. Legacy token names are
   ALIASED onto this palette so every existing var(--…) reference re-skins; new
   code should use the semantic --to-* / --color-* names.
   ========================================================================= */
:root {
    /* ---- Techno brand palette (spec) ------------------------------------ */
    --to-red: #E60024;
    --to-red-light: #F23842;
    --to-blue: #243C91;
    --to-navy: #172766;
    --to-purple: #4B2B83;
    /* Logo-derived medical accents (used by the hero medical-tech theme) */
    --to-med-blue: #3478D4;
    --to-cyan: #73D6FF;
    --to-ice: #F3F8FF;

    --to-text: #202124;
    --to-text-body: #30343B;
    --to-text-soft: #687386;
    --to-text-muted: #929AAA;

    --to-bg: #FFFFFF;
    --to-bg-soft: #F7F8FA;
    --to-bg-blue-soft: #EEF3F7;
    --to-bg-blue-light: #E7EFF7;

    --to-border: #DDE3EC;

    --to-gradient-primary: linear-gradient(90deg, #172766 0%, #6B1530 58%, #E60024 100%);
    --to-gradient-blue: linear-gradient(135deg, #172766 0%, #3478D4 100%);
    --to-badge-gradient: linear-gradient(135deg, rgba(36,60,145,.84), rgba(75,43,131,.68));
    /* Footer — brand purple→red (135deg) + a darker copyright bar variant. */
    --to-gradient-footer: linear-gradient(90deg, #172766 0%, #172766 34%, #6B1530 64%, #E60024 100%);
    --to-gradient-footer-dark: linear-gradient(90deg, #101B4A 0%, #5E1226 55%, #C51D28 100%);

    --to-shadow-soft: 0 12px 34px rgba(23, 42, 104, 0.10);
    --to-shadow-button: 0 12px 28px rgba(75, 43, 131, 0.20);

    /* ---- Phase-6 semantic names → brand palette ------------------------- */
    --color-primary: var(--to-blue);
    --color-primary-light: #3550B0;
    --color-navy: var(--to-navy);
    --color-deep-navy: var(--to-navy);
    --color-teal: var(--to-red);
    --color-teal-light: var(--to-red-light);

    --bg-page: var(--to-bg);
    --bg-sky: var(--to-bg-blue-soft);
    --bg-white: var(--to-bg);

    --text-primary: var(--to-text);
    --text-secondary: var(--to-text-body);
    --text-muted: var(--to-text-soft);

    --border: var(--to-border);

    --gradient-primary: var(--to-gradient-primary);
    --gradient-accent: var(--to-gradient-blue);

    /* ---- Legacy aliases (dark-theme names → brand palette) -------------- */
    /* Backgrounds */
    --bg-primary: var(--to-bg);
    --bg-secondary: var(--to-bg-soft);
    --bg-elevated: var(--to-bg);

    /* Glass surfaces — bright white glass + soft blue-grey fills */
    --surface-glass: rgba(255, 255, 255, 0.92);
    --surface-glass-strong: rgba(255, 255, 255, 0.95);
    --surface-glass-light: var(--to-bg-blue-soft);
    --surface-glass-hover: var(--to-bg-blue-light);
    --border-glass: var(--to-border);
    --border-glass-strong: rgba(36, 60, 145, 0.18);

    /* Accents (blue = workhorse links/nav/icons; red = highlight/active) */
    --primary-cyan: var(--to-blue);
    --primary-blue: var(--to-navy);
    --accent-red: var(--to-red);
    --accent-coral: var(--to-red-light);

    /* Status */
    --success: #16A34A;
    --warning: #D97706;
    --error: #DC2626;

    /* Gradients */
    --grad-cyan: var(--to-gradient-blue);
    --grad-coral: var(--to-gradient-primary);
    --grad-heading: var(--to-gradient-blue);

    /* Glows / shadows — soft, navy/purple-tinted for a light surface */
    --glow-cyan: var(--to-shadow-button);
    --glow-coral: 0 12px 28px rgba(237, 28, 36, 0.18);
    --shadow-panel: 0 18px 50px rgba(23, 42, 104, 0.12);
    --shadow-card: 0 12px 34px rgba(23, 42, 104, 0.10);
    --shadow-soft: 0 8px 20px rgba(23, 42, 104, 0.08);

    /* Radii */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* Blur */
    --blur: 16px;

    /* Layout — 80%-width container; high cap so 27–32" monitors keep ~10% side gutters */
    --container: 2400px;
    --gutter: clamp(1rem, 3vw, 2.5rem);

    /* Fluid typography scale (clamp: min → preferred vw → max). Root font-size also
       steps up on 27–32" monitors (see media queries in site.css) so the whole
       rem-based hierarchy scales +15–20% there.
       The vw multiplier is chosen relative to .container's own 80vw width, so
       title:container ratio stays constant while scaling (e.g. hero's old 5vw
       against an 80vw container = a flat 6.25% ratio). That old ratio maxed out
       (hit the rem ceiling) right around 1400-1440px viewport — precisely inside
       the common 13-22" laptop/monitor range (~1280-1920px) - so on every one of
       those screens the title was already pinned at its largest size, reading
       oversized relative to the (comparatively narrower, not-yet-wide) container.
       Lower multipliers here push the ceiling out to ~1750-1900px so the scale
       stays smooth (not flatlined) across that whole common range; only very wide
       monitors (>~1900px) now see the text sit at its capped max. */
    --fs-hero: clamp(2.5rem, 3.6vw, 4.25rem);
    --fs-page-title: clamp(2rem, 2.7vw, 3.1rem);
    --fs-section: clamp(1.7rem, 2.2vw, 2.4rem);
    --fs-card-title: clamp(1.05rem, 1.5vw, 1.35rem);
    --fs-body: clamp(1rem, 1.15vw, 1.125rem);
    --fs-small: clamp(0.82rem, 0.9vw, 0.92rem);
    --fs-eyebrow: clamp(0.75rem, 0.85vw, 0.85rem);

    /* Fonts */
    --font-sans: "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Manrope", "Inter", system-ui, sans-serif;

    /* Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 160ms;
    --t-med: 280ms;
    --t-slow: 420ms;
}