/* * FURIOSA SUITE DESIGN TOKENS (single source of truth, v2026-09-19.2) * * Every Furiosa product copies THIS FILE VERBATIM and uses only these variables for colour, * type, spacing, radius, shadow and motion: furiosa.com, furiosagroup.com, furiosabackstage.com, * furiosasignal.com, furiosa.events, and the CRM, Signal, Events and Backstage apps. * Do not edit a copy. Change this file, bump the version above, then re-copy it everywhere. * `check-suite-tokens.sh` (next to this file) reports any product whose copy differs. * * Origin: furiosa.com v2 (assets/v2/css/v2.css :root), plus the fleet decisions of 19 Sep 2026: * one filled-button teal with white text (#007886, 5.21:1), the suite wordmark colours, and * Figtree 800 for FURIOSA. * * Fonts (load exactly this in , before any stylesheet that uses them): * https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,600..800&family=Figtree:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap */ :root { /* Brand teal */ --fs-teal: #00b0c6; /* accents, icons, large display text, chart primary. Never small text on white. */ --fs-teal-dark: #009aad; /* hover of teal accents */ --fs-teal-ink: #00707e; /* teal for text and links on white (AA) */ --fs-teal-light: #e6f8fa; /* tints, selected rows, soft backgrounds */ --fs-teal-mid: #c9eef3; --fs-glow: #7fe8f5; /* teal on navy: wordmark product name, highlights on dark */ /* Filled buttons: white text only (5.21:1) */ --fs-btn: #007886; --fs-btn-hover: #00626e; /* Navy */ --fs-navy: #082f3c; /* hero bands, sidebars, dark panels */ --fs-navy-light: #0f3e47; --fs-navy-deep: #061e28; /* Neutrals */ --fs-bg: #f0f7f8; /* app and page background */ --fs-white: #ffffff; /* cards */ --fs-text: #1a1a2e; /* body text */ --fs-muted: #545e6b; /* secondary text (AA on white and on --fs-bg) */ --fs-line: #dbe6e9; /* borders, dividers */ --fs-on-dark: #e8f7f9; /* text on navy */ --fs-on-dark-2: #a9c3ca; /* secondary text on navy */ --fs-dark-line: rgba(0, 176, 198, .25); /* Status (fills for pills/rows; use the -ink value for text) */ --fs-good: #16a34a; --fs-good-ink: #15803d; --fs-good-bg: #dcfce7; --fs-warn: #d97706; --fs-warn-ink: #b45309; --fs-warn-bg: #fef3c7; --fs-crit: #dc2626; --fs-crit-ink: #b91c1c; --fs-crit-bg: #fee2e2; /* Status text on navy (for pills/labels on dark bands; pass 4.5:1 on --fs-navy) */ --fs-good-on-dark: #6ee7a0; --fs-warn-on-dark: #fcd34d; --fs-crit-on-dark: #fca5a5; /* Info (neutral notices, info badges): teal family, not blue */ --fs-info: var(--fs-teal-ink); --fs-info-bg: var(--fs-teal-light); /* Chart series, in order. Use 1-2 for most charts; status colours only for status. */ --fs-chart-1: #00b0c6; /* teal */ --fs-chart-2: #082f3c; /* navy */ --fs-chart-3: #7fe8f5; /* glow */ --fs-chart-4: #00707e; /* teal ink */ --fs-chart-5: #9aa9b1; /* slate */ --fs-chart-6: #d97706; /* amber, use sparingly */ /* Suite wordmark: round F orb (inline SVG, width="30" height="30") + FURIOSA + product name */ --fs-wm-furiosa: #1C2434; /* "FURIOSA", Figtree 800, 15px, letter-spacing .2em; white on navy */ --fs-wm-product: #009aaa; /* product name, Archivo 700, 16.25px (15.4px when all caps, e.g. CRM); --fs-glow on navy */ /* Type */ --fs-font-display: 'Archivo', 'Figtree', system-ui, sans-serif; /* titles and numbers, weight 800, font-stretch 110-118% */ --fs-font-body: 'Figtree', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --fs-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* code, keys, snippets */ --fs-num: 'Archivo', 'Figtree', system-ui, sans-serif; /* with font-variant-numeric: tabular-nums */ /* Spacing scale (use only these) */ --fs-s1: 4px; --fs-s2: 8px; --fs-s3: 12px; --fs-s4: 16px; --fs-s5: 24px; --fs-s6: 32px; --fs-s7: 48px; --fs-s8: 64px; /* Radius, shadow, motion */ --fs-r-sm: 8px; --fs-r-md: 14px; --fs-r-lg: 22px; --fs-r-pill: 999px; --fs-shadow-sm: 0 1px 2px rgba(8, 47, 60, .06), 0 1px 1px rgba(8, 47, 60, .04); --fs-shadow-md: 0 6px 30px rgba(8, 47, 60, .08); --fs-shadow-lg: 0 20px 50px rgba(8, 47, 60, .18); --fs-ease: cubic-bezier(.2, .7, .2, 1); /* Buttons (heights; pill radius; Figtree 600) */ --fs-btn-h-sm: 36px; --fs-btn-h-md: 44px; --fs-btn-h-lg: 52px; }