/* ============================================================
LegacyApp - Design Tokens
------------------------------------------------------------
Single source of truth for colours, type, spacing, radii,
shadows and motion. Import this file FIRST, everywhere.
Everything else references these CSS custom properties via
var(--token). Change a value here and the whole system follows.
Fonts: Inter is self-hosted (./fonts/*.ttf, copied with this
bundle). Playfair Display (the editorial serif) loads from
Google Fonts - keep the in your , or self-host it.
Responsive breakpoints (used by foundation.css, documented here
because CSS variables cannot be used inside @media conditions):
--bp-nav : 920px header switches inline-nav <-> hamburger
--bp-mobile : 760px general layout reflows to single column
============================================================ */
/* ---------- Inter (self-hosted, body + display optical sizes) ---------- */
@font-face{font-family:"Inter";src:url("../fonts/Inter_18pt-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("../fonts/Inter_18pt-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Inter";src:url("../fonts/Inter_18pt-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("../fonts/Inter_18pt-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("../fonts/Inter_18pt-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("../fonts/Inter_18pt-BoldItalic.ttf") format("truetype");font-weight:700;font-style:italic;font-display:swap;}
@font-face{font-family:"Inter Display";src:url("../fonts/Inter_24pt-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter Display";src:url("../fonts/Inter_24pt-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter Display";src:url("../fonts/Inter_24pt-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter Display XL";src:url("../fonts/Inter_28pt-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter Display XL";src:url("../fonts/Inter_28pt-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter Display XL";src:url("../fonts/Inter_28pt-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
:root{
/* ========== BRAND PALETTE (locked: blue / gray / orange / black / white) ========== */
--blue-50:#E6EFFA; --blue-100:#C2D6F1; --blue-200:#92B6E5; --blue-300:#5E92D6;
--blue-400:#2974C8; --blue-500:#0057B7; /* primary */ --blue-600:#014B98;
--blue-700:#013E80; --blue-800:#013168; --blue-900:#00224A;
--gray-0:#FFFFFF; --gray-50:#F5F5F5; --gray-100:#ECECEC; --gray-200:#D8D8D8;
--gray-300:#BFBFBF; --gray-400:#A0A0A0; --gray-500:#808080; --gray-600:#5F5F5F;
--gray-700:#404040; --gray-800:#1F1F1F; --gray-900:#000000;
--orange-50:#FDECE3; --orange-100:#FCD3BD; --orange-200:#F9B190; --orange-300:#F58E63;
--orange-400:#F37246; --orange-500:#F15A24; /* accent */ --orange-600:#D04610; --orange-700:#A93808;
--green-500:#16794D; --green-50:#E5F2EC;
--red-500:#C8341A; --red-50:#FBE5DC;
--amber-500:#C97B22; --amber-50:#FBEFD9;
/* ========== SEMANTIC COLOUR TOKENS ========== */
--color-bg:var(--gray-0);
--color-bg-subtle:var(--gray-50);
--color-bg-muted:var(--gray-100);
--color-surface:var(--gray-0);
--color-header-from:#0057B7; --color-header-to:#014B98;
--color-brand-from:#0057B7; --color-brand-to:#013E80; /* full brand-blue surface ("apla") */
--color-fg:var(--gray-900);
--color-fg-strong:var(--gray-900);
--color-fg-muted:var(--gray-500);
--color-fg-subtle:var(--gray-400);
--color-fg-on-brand:var(--gray-0);
--color-border:var(--gray-200);
--color-border-strong:var(--gray-300);
--color-border-focus:var(--blue-500);
--color-link:var(--blue-500);
--color-link-hover:var(--blue-600);
--color-success:var(--green-500); --color-success-bg:var(--green-50);
--color-danger:var(--red-500); --color-danger-bg:var(--red-50);
--color-warning:var(--amber-500); --color-warning-bg:var(--amber-50);
--color-info:var(--blue-500); --color-info-bg:var(--blue-50);
--color-accent:var(--orange-500); --color-accent-bg:var(--orange-50);
--color-premium:var(--orange-500);
--color-disabled-bg:var(--gray-200);
--color-disabled-fg:var(--gray-400);
/* ========== TYPOGRAPHY ========== */
--font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--font-display:"Inter Display","Inter",system-ui,sans-serif;
--font-display-xl:"Inter Display XL","Inter Display","Inter",system-ui,sans-serif;
--font-serif:"Playfair Display","Source Serif Pro",Georgia,"Times New Roman",serif;
--font-mono:ui-monospace,"SF Mono","JetBrains Mono",Consolas,monospace;
--fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-md:18px; --fs-lg:20px;
--fs-xl:24px; --fs-2xl:28px; --fs-3xl:32px; --fs-4xl:40px; --fs-5xl:56px; --fs-6xl:72px;
--fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
--lh-tight:1.15; --lh-snug:1.3; --lh-normal:1.5; --lh-loose:1.65;
--ls-tight:-0.02em; --ls-snug:-0.01em; --ls-normal:0; --ls-wide:0.04em;
/* ========== SPACING (4px base scale) ========== */
--space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
--space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
--space-16:64px; --space-20:80px;
/* Page gutter + max content width */
--gutter:clamp(20px,5vw,48px);
--content-max:1200px;
--prose-max:760px;
/* ========== RADII ========== */
--radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
--radius-xl:20px; --radius-2xl:24px; --radius-pill:999px;
/* ========== SHADOWS (soft, blue-tinted) ========== */
--shadow-xs:0 1px 2px rgba(1,64,138,0.05);
--shadow-sm:0 2px 6px rgba(1,64,138,0.07);
--shadow-md:0 6px 16px rgba(1,64,138,0.10);
--shadow-lg:0 18px 40px rgba(1,64,138,0.14);
--shadow-focus:0 0 0 4px rgba(0,87,183,0.22);
/* ========== MOTION ========== */
--ease-out:cubic-bezier(0.22,1,0.36,1);
--ease-in-out:cubic-bezier(0.45,0,0.55,1);
--dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
}