/* FUTURISE — THE CORE · drop-in design tokens + self-hosted fonts. Canonical: https://futurise-brand-system.vercel.app/tokens.css USAGE: copy /fonts/*.woff2 from the brand host into your project's /fonts, import this file, use the --fz-* custom properties. Supports light + dark: set data-theme="dark" on (or rely on prefers-color-scheme). */ /* ---- Unitea Sans (workhorse: headlines, body, UI) ---- */ @font-face { font-family:"Unitea Sans"; src:url("/fonts/UniteaSans-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"Unitea Sans"; src:url("/fonts/UniteaSans-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:"Unitea Sans"; src:url("/fonts/UniteaSans-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:"Unitea Sans"; src:url("/fonts/UniteaSans-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:"Unitea Sans"; src:url("/fonts/UniteaSans-ExtraBold.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; } @font-face { font-family:"Unitea Sans"; src:url("/fonts/UniteaSans-Black.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; } /* ---- RCL Morland (editorial serif — 1–2 emphasis words only, never body/UI) ---- */ @font-face { font-family:"RCL Morland"; src:url("/fonts/RCLMorland-Light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; } @font-face { font-family:"RCL Morland"; src:url("/fonts/RCLMorland-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"RCL Morland"; src:url("/fonts/RCLMorland-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:"RCL Morland"; src:url("/fonts/RCLMorland-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:"RCL Morland"; src:url("/fonts/RCLMorland-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:"RCL Morland"; src:url("/fonts/RCLMorland-Italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; } @font-face { font-family:"RCL Morland"; src:url("/fonts/RCLMorland-MediumItalic.woff2") format("woff2"); font-weight:500; font-style:italic; font-display:swap; } @font-face { font-family:"RCL Morland"; src:url("/fonts/RCLMorland-SemiBoldItalic.woff2") format("woff2"); font-weight:600; font-style:italic; font-display:swap; } :root { /* ---- brand constants (identical in both modes) ---- */ --fz-yellow: #FFC20E; /* THE Core — lead colour, signal, CTA */ --fz-black: #000000; --fz-white: #FFFFFF; /* secondary — support only, never lead */ --fz-amber: #FAA61A; /* gradient/step support ONLY — never the lead yellow */ --fz-amber-deep:#E0861A; --fz-graphite: #414042; --fz-slate: #58595B; --fz-grey: #E6E7E8; --fz-offwhite: #F1F2F2; /* accent — depth/data only, never a CTA */ --fz-twilight: #231E60; /* functional UI states (product UI only — never brand surfaces) */ --fz-ok: #2E7D51; --fz-warn: #E0861A; --fz-err: #C93B3B; /* data-viz series (in order; grid/axes use --line, labels use --muted) */ --fz-chart-1: #FFC20E; /* the subject series — always yellow */ --fz-chart-2: #231E60; /* comparison — twilight (light mode) */ --fz-chart-3: #58595B; --fz-chart-4: #FAA61A; /* app chrome */ --fz-app-sidebar-w: 224px; --fz-app-topbar-h: 48px; --fz-app-pocket-max: 448px; /* ---- type ---- */ --fz-sans: "Unitea Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --fz-serif: "RCL Morland", Georgia, "Times New Roman", serif; --fz-display: clamp(44px, 7.4vw, 92px); /* Unitea 900 / 1.02 / -1% */ --fz-h1: 38px; /* Unitea 800 / 1.08 */ --fz-h2: 27px; /* Unitea 700 / 1.15 */ --fz-body: 17px; /* Unitea 400–500 / 1.6 */ --fz-small: 14px; /* Unitea 500 / 1.5 */ --fz-label: 11.5px; /* Unitea 600 / caps / +8% tracking */ /* ---- space & shape ---- */ --s1:6px; --s2:10px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:104px; --fz-r-card: 22px; /* cards & tiles */ --fz-r-pill: 999px; /* buttons & chips are capsules (the Core stretched) */ /* ---- themed surfaces · LIGHT (default) ---- */ --bg: #FFFFFF; --ink: #000000; --surface: #F1F2F2; --line: #E6E7E8; --muted: #58595B; --card: #FFFFFF; } /* ---- DARK ---- */ [data-theme="dark"] { --bg: #000000; --ink: #FFFFFF; --surface: #141414; --line: #2B2B2E; --muted: #A7A9AC; --card: #0C0C0C; --fz-chart-2: #FFFFFF; /* twilight is invisible on black — series 2 flips to white */ --fz-chart-3: #A7A9AC; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#000000; --ink:#FFFFFF; --surface:#141414; --line:#2B2B2E; --muted:#A7A9AC; --card:#0C0C0C; --fz-chart-2:#FFFFFF; --fz-chart-3:#A7A9AC; } } /* helper: the serif-italic emphasis word (max 1–2 per headline) */ .fz-em { font-family:var(--fz-serif); font-style:italic; font-weight:500; color:var(--fz-yellow); } /* helper: never-stretch image frame — set --r to the image's NATIVE ratio */ .fz-frame { height:46vh; aspect-ratio:var(--r,1.5); width:auto; overflow:hidden; } .fz-frame img { width:100%; height:100%; object-fit:cover; }