/* faxB2B design tokens. Source of truth for colour, type, radius, shadow and spacing. Derived from design/reference (the mFax-style clone). Light is the default; dark applies with [data-theme="dark"] on (set only by the theme toggle; the OS preference is not used). */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Display fallback where Arial Black / Segoe UI Black are not installed (Linux, Android). Only downloaded when the first two families are missing. */ @font-face { font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/archivo-black-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/archivo-black-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } :root { /* Ground and surfaces */ --bg-0: #f3f8ff; --bg-1: #eaf3fe; --bg-2: #dbeafc; --surface: #ffffff; --surface-muted: #e6f0fc; --surface-raised: #ffffff; --border: #cddcf0; --border-strong: #7489a6; /* Text */ --fg: #0a1d38; --fg-muted: #33476a; --fg-subtle: #3b5073; --fg-dim: #2d5a96; --fg-faint: #4a5f82; /* Brand */ --primary: #115fc6; --primary-ink: #0b4d9e; --primary-bright: #1a73e3; --on-primary: #ffffff; --primary-soft: #dcebfd; --solid: #1467d6; --on-solid: #ffffff; /* Status: soft backgrounds with ink text (pills), strong fills (big status badges) */ --ok: #1f9d4c; --ok-strong: #2fc955; --on-ok-strong: #06300f; --ok-soft: #e3f6e9; --ok-ink: #17703a; --warn: #f59f0a; --on-warn: #3a2400; --warn-soft: #fff1d6; --warn-ink: #8a5100; --danger: #c9302c; --on-danger: #ffffff; --danger-soft: #fde8e8; --danger-ink: #b0262b; --info-soft: #dcebfd; --info-ink: #0b55a8; --neutral-soft: #e3edf9; --neutral-ink: #33476a; /* Films and hairlines */ --film-1: #1467d60c; --film-2: #1467d613; --film-3: #1467d61b; --hair: #0a2a5a21; --hair-soft: #0a2a5a13; --glass: #ffffffb8; --glass-thick: #ffffffeb; --glass-shine: inset 0 1px 0 #ffffffe6; --nav-active: #cfe3fc; --nav-active-ink: #0b4d9e; --paper: #ffffff; --paper-ink: #1a1a1c; --paper-line: #e6e7ea; --backdrop: #0a1d3866; --ground: radial-gradient(ellipse 52% 62% at 12% 105%, #2f86f02b, transparent 70%), radial-gradient(ellipse 46% 40% at 92% -6%, #2f86f017, transparent 70%), radial-gradient(ellipse 70% 60% at 50% -20%, #ffffff, transparent 65%), linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 62%, var(--bg-2) 100%); --bloom: radial-gradient(46% 42% at 50% 40%, #ffffffd9, transparent 70%), radial-gradient(60% 54% at 50% 52%, #2f86f033, transparent 76%); --shadow-card: 0 30px 60px -30px #1a4f943d, 0 2px 6px #1a4f9414, 0 0 0 1px #0a2a5a08; --shadow-float: 0 18px 40px -18px #1a4f9459, 0 2px 8px #1a4f941f, 0 0 0 1px #0a2a5a0f; --shadow-object: drop-shadow(0 28px 48px #1a4f9442) drop-shadow(0 2px 6px #1a4f9429); --shadow-solid: 0 12px 28px -12px #1467d68c; --shadow-inset: 0 0 0 1px var(--hair), 0 1px 2px #0d15260d; /* Type */ --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Arial Black", "Segoe UI Black", "Archivo Black", "Inter", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Radius, layout, spacing */ --r-xs: 6px; --r-sm: 10px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px; --container: 1120px; --gutter: 24px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --touch: 44px; --focus-ring: 0 0 0 3px #1467d659; --ease-out: cubic-bezier(.2, .7, .2, 1); color-scheme: light; } /* Dark tokens. Declared twice on purpose: once for an explicit choice and once for the system preference when no explicit choice exists (first paint without JS). */ :root[data-theme="dark"] { --bg-0: #06101f; --bg-1: #0a1628; --bg-2: #0d1b30; --surface: #102038; --surface-muted: #162a46; --surface-raised: #13243e; --border: #25405f; --border-strong: #6f89ab; --fg: #f2f7ff; --fg-muted: #aabdd8; --fg-subtle: #9fb3cf; --fg-dim: #9cc3f0; --fg-faint: #91a7c6; --primary: #62b1ff; --primary-ink: #8fc8ff; --primary-bright: #4ea5f7; --on-primary: #04111f; --primary-soft: #3f9cff2e; --solid: #7cc0ff; --on-solid: #04111f; --ok: #3fd46a; --ok-strong: #2fc955; --on-ok-strong: #06300f; --ok-soft: #30d15829; --ok-ink: #5fe27f; --warn: #ffb02e; --on-warn: #2c1b00; --warn-soft: #ff9f0a29; --warn-ink: #ffc04d; --danger: #ff5a52; --on-danger: #1f0000; --danger-soft: #ff453a29; --danger-ink: #ff8a83; --info-soft: #3f9cff2e; --info-ink: #8fc8ff; --neutral-soft: #ffffff14; --neutral-ink: #c3d0e2; --film-1: #ffffff06; --film-2: #ffffff0b; --film-3: #ffffff12; --hair: #bcd8ff1f; --hair-soft: #bcd8ff12; --glass: #0d1a2ec2; --glass-thick: #0d1a2ef0; --glass-shine: inset 0 1px 0 #ffffff12; --nav-active: #173a63; --nav-active-ink: #d6eaff; --backdrop: #020812a6; --ground: radial-gradient(ellipse 49.5% 64.8% at 12% 105%, #2f86f02e, transparent 70%), radial-gradient(ellipse 62.5% 74.1% at 50% -20%, #ffffff0d, transparent 65%), linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 62%, var(--bg-2) 100%); --bloom: radial-gradient(46% 42% at 50% 40%, #ffffff1a, transparent 70%), radial-gradient(60% 54% at 50% 52%, #2f86f094, transparent 76%); --shadow-card: 0 12px 34px -22px #000000e6, 0 2px 6px #0006, 0 0 0 1px #ffffff0f; --shadow-float: 0 24px 60px #0009, 0 2px 8px #0006, 0 0 0 1px #ffffff14; --shadow-object: drop-shadow(0 26px 46px #0000008c) drop-shadow(0 3px 8px #0006); --shadow-solid: 0 14px 40px -12px #7cc0ff4d; --shadow-inset: 0 0 0 1px var(--hair); --focus-ring: 0 0 0 3px #62b1ff66; color-scheme: dark; }