/* ===================================================================== Scanda Enterprises — tokens.css Design Token System v1.0 (sampled from brand marks, 17 Jun 2026). Two layers: raw primitives (50–900 ramps) + semantic intent tokens. Re-skin once at the semantic layer and the whole product follows. Light is default; add data-theme="dark" on for the dark skin. ===================================================================== */ :root { /* ---- 01 · PRIMITIVES ------------------------------------------- */ /* Teal — primary · banner */ --teal-50:#EBF3F3; --teal-100:#D6E8E7; --teal-200:#ADD0CE; --teal-300:#7AB3B0; --teal-400:#3D908B; --teal-500:#006D67; --teal-600:#005F59; --teal-700:#00514C; --teal-800:#00423D; --teal-900:#00332F; /* Forest — ink · chip / wordmark */ --forest-50:#ECEFEE; --forest-100:#D9DFDD; --forest-200:#B3C0BB; --forest-300:#849890; --forest-400:#4C695D; --forest-500:#13392A; --forest-600:#103225; --forest-700:#0E2C20; --forest-800:#0B251A; --forest-900:#081E15; /* Gold — accent · peacock */ --gold-50:#F7EDD6; --gold-100:#F3E7CA; --gold-200:#EBDAB2; --gold-300:#E1C993; --gold-400:#D5B66F; --gold-500:#C9A24B; --gold-600:#B69141; --gold-700:#A28038; --gold-800:#8E6E2E; --gold-900:#7A5C24; /* Slate — secondary text */ --slate-50:#F3F4F5; --slate-100:#E7E9EB; --slate-200:#CFD3D8; --slate-300:#B1B7C0; --slate-400:#8D96A2; --slate-500:#697585; --slate-600:#5C6876; --slate-700:#4F5A67; --slate-800:#424C58; --slate-900:#343E48; /* Neutral — ivory ground (neutral-0 = ivory surface) */ --neutral-0:#FBFDFC; --neutral-50:#F7F9F8; --neutral-100:#F2F5F4; --neutral-200:#E9ECEB; --neutral-300:#D7DCDA; --neutral-400:#BEC4C2; --neutral-500:#7C8784; --neutral-600:#67726F; --neutral-700:#515C59; --neutral-800:#384340; --neutral-900:#1F2A27; /* ---- 02 · SEMANTICS (light) ------------------------------------ */ --color-brand: var(--teal-500); --color-brand-hover: var(--teal-600); --color-brand-on: var(--neutral-0); /* ivory on teal — never gold on teal */ --color-accent: var(--gold-500); --color-accent-on: var(--forest-900); --color-bg: var(--neutral-50); --color-surface: var(--neutral-0); --color-text: var(--forest-600); --color-text-muted: var(--slate-600); --color-border: var(--neutral-300); --color-link: var(--teal-600); /* Status — mapped to the catalog (deliberately muted) */ --color-success:#2E7D5B; --color-info:#2D6E8C; --color-warning:#C9882E; --color-danger:#C0463A; /* ---- 03 · TYPOGRAPHY ------------------------------------------- */ --font-display:"Marcellus", Georgia, "Times New Roman", serif; /* swap if licensed Trajan face available */ --font-sans:"Inter", system-ui, -apple-system, sans-serif; --font-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Scale — 1.250 major third */ --text-xs:12.8px; --text-sm:14px; --text-base:16px; --text-lg:20px; --text-xl:25px; --text-2xl:31.3px; --text-3xl:39px; --text-4xl:48.8px; /* ---- 04 · DIMENSIONS ------------------------------------------- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:22px; --radius-2xl:32px; /* Elevation — cool-tinted, never harsh black */ --shadow-xs:0 1px 2px rgba(19,57,42,.06); --shadow-sm:0 1px 3px rgba(19,57,42,.08), 0 1px 2px rgba(19,57,42,.06); --shadow-md:0 4px 12px rgba(19,57,42,.10), 0 2px 4px rgba(19,57,42,.06); --shadow-lg:0 12px 28px rgba(19,57,42,.14), 0 4px 10px rgba(19,57,42,.08); --shadow-gold:0 8px 24px rgba(201,162,75,.35); /* Motion */ --ease-brand:cubic-bezier(0.32,0.72,0,1); --dur-base:220ms; /* Premium gold gradient — reserve for ONE CTA per view */ --grad-gold:linear-gradient(135deg,#E1C993 0%,#C9A24B 55%,#A28038 100%); } /* ---- 02 · SEMANTICS (dark) --------------------------------------- */ [data-theme="dark"] { --color-brand: var(--teal-400); --color-brand-hover: var(--teal-300); --color-brand-on: var(--forest-900); --color-accent: var(--gold-400); --color-accent-on: var(--forest-900); --color-bg: var(--forest-900); --color-surface: var(--forest-800); --color-text: var(--neutral-100); --color-text-muted: var(--slate-300); --color-border: var(--forest-600); --color-link: var(--teal-300); }