/* ============================================================================ CIRCLE SQUARED, AI READINESS DIAGNOSTIC Design Tokens · v1.0 Single source of truth. Every value in the product references a token here. ========================================================================== */ :root { /* -------------------------------------------------------------------------- 1. BRAND · the three confirmed colours ----------------------------------------------------------------------- */ --brand-ink: #080b16; /* primary dark, hero & results backgrounds */ --brand-red: #f0344b; /* action + accent, used sparingly, as punctuation*/ --brand-white: #ffffff; /* -------------------------------------------------------------------------- 2. INK SCALE · derived cool near-blacks (the dark world) Built from --brand-ink. Hue ~225, climbing in lightness. ----------------------------------------------------------------------- */ --ink-1000: #05070f; /* deepest, page base behind hero */ --ink-900: #080b16; /* = brand ink. default dark surface */ --ink-800: #0d1120; /* raised surface on dark */ --ink-700: #141a2d; /* card surface on dark */ --ink-600: #1d243b; /* hover surface */ --ink-500: #2a3350; /* borders on dark */ --ink-400: #3c4767; /* strong divider */ --ink-300: #5b6685; /* muted text on dark */ --ink-200: #828ca8; /* secondary text on dark */ --ink-100: #b9c0d2; /* near-white body on dark */ /* -------------------------------------------------------------------------- 3. PAPER SCALE · the light world (question screens) Cool-tinted greys so light & dark share a temperature. ----------------------------------------------------------------------- */ --paper-0: #ffffff; /* pure card / input surface */ --paper-50: #f6f7fa; /* light page background */ --paper-100: #eef0f5; /* default option-card surface */ --paper-200: #e3e6ee; /* borders on light / disabled fill */ --paper-300: #ced3df; /* strong border */ --paper-400: #aab2c4; /* muted icon / disabled text */ /* text on light */ --text-strong: #080b16; /* headings, question text */ --text-body: #3c4763; /* body copy on light */ --text-muted: #7b8398; /* secondary / captions on light */ --text-soft: #9aa1b3; /* placeholders, fine print */ /* -------------------------------------------------------------------------- 4. RED SCALE · states & tints derived from --brand-red ----------------------------------------------------------------------- */ --red-600: #c01f37; /* pressed / active */ --red-550: #d92740; /* hover */ --red-500: #f0344b; /* = brand red. default action */ --red-300: #f87a8a; /* light-mode focus partner */ --red-tint-12: rgba(240, 52, 75, 0.12); /* selected card fill (light) */ --red-tint-16: rgba(240, 52, 75, 0.16); /* selected card fill (dark) */ --red-tint-24: rgba(240, 52, 75, 0.24); /* focus ring */ --red-line: #f0344b; /* the case-study accent line */ /* -------------------------------------------------------------------------- 5. RAG · Circle Squared's traffic lights Desaturated, value-matched to live inside the brand world, not stoplight. Red reuses --brand-red (it is already the brand's note of urgency). ----------------------------------------------------------------------- */ --rag-low: #f0344b; /* RED , needs attention */ --rag-low-soft: rgba(240, 52, 75, 0.14); --rag-mid: #e4a13a; /* AMBER, partial / inconsistent */ --rag-mid-soft: rgba(228, 161, 58, 0.16); --rag-high: #2eb27c; /* GREEN, established */ --rag-high-soft: rgba(46, 178, 124, 0.16); /* -------------------------------------------------------------------------- 6. GROUP COLOURS · the five diagnostic groups (radar data colours) One cohesive family, equal lightness, curated hues, not a rainbow. ----------------------------------------------------------------------- */ --group-strategy: #f0344b; /* Strategy & Intent (anchor = brand red)*/ --group-foundations: #e4843a; /* Foundations (warm amber) */ --group-governance: #7a6cf0; /* Governance & Standards (indigo) */ --group-practice: #2aa7c6; /* Practice & Quality (cyan) */ --group-people: #34b67c; /* People & Culture (green) */ --group-strategy-soft: rgba(240, 52, 75, 0.14); --group-foundations-soft: rgba(228, 132, 58, 0.14); --group-governance-soft: rgba(122, 108, 240, 0.14); --group-practice-soft: rgba(42, 167, 198, 0.14); --group-people-soft: rgba(52, 182, 124, 0.14); /* -------------------------------------------------------------------------- 7. TYPOGRAPHY Plus Jakarta Sans exclusively. Variable weights 200-800. ----------------------------------------------------------------------- */ --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --w-extralight: 200; --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-extrabold: 800; /* Type scale, fluid mobile→desktop. Fixed equivalents documented in the size table on the Foundations page. */ --fs-display: clamp(3rem, 11vw, 6.5rem); /* hero headline 48 → 104px */ --fs-h1: clamp(2.25rem, 6vw, 3.5rem); /* results headline 36 → 56px */ --fs-h2: clamp(1.75rem, 4vw, 2.5rem); /* section title 28 → 40px */ --fs-h3: clamp(1.375rem, 3vw, 1.75rem);/* question text 22 → 28px */ --fs-lead: 1.125rem; /* 18px, intro / lead paragraph */ --fs-body: 1rem; /* 16px, default body */ --fs-sm: 0.875rem; /* 14px, secondary / card meta */ --fs-caption: 0.75rem; /* 12px, captions, fine print */ --fs-eyebrow: 0.8125rem; /* 13px, uppercase labels */ --lh-tight: 0.98; /* display */ --lh-snug: 1.1; /* headings */ --lh-heading: 1.2; /* h3 / question */ --lh-body: 1.6; /* body copy */ --lh-relaxed: 1.7; /* long-form narrative */ --ls-display: -0.03em; --ls-heading: -0.02em; --ls-body: 0; --ls-eyebrow: 0.14em; /* tracked uppercase */ /* -------------------------------------------------------------------------- 8. SPACING · 4px base unit ----------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /*128 */ /* layout */ --container-max: 1200px; /* desktop shell */ --content-max: 720px; /* single-column reading / question width */ --gutter-mobile: 1.25rem; /* 20px, page padding at 375px */ --gutter-desk: 2.5rem; /* 40px, page padding on desktop */ /* -------------------------------------------------------------------------- 9. RADIUS ----------------------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 12px; /* inputs, buttons */ --radius-lg: 16px; /* option cards */ --radius-xl: 20px; /* group score cards */ --radius-2xl: 28px; /* hero panels */ --radius-pill: 999px; /* -------------------------------------------------------------------------- 10. ELEVATION · restrained. Shadows tuned for light surfaces; on dark we elevate with borders + surface lightness, not shadow. ----------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(8, 11, 22, 0.06); --shadow-sm: 0 2px 8px rgba(8, 11, 22, 0.06); --shadow-md: 0 8px 24px rgba(8, 11, 22, 0.08); --shadow-lg: 0 18px 48px rgba(8, 11, 22, 0.12); --shadow-red: 0 12px 32px rgba(240, 52, 75, 0.28); /* primary CTA lift */ /* -------------------------------------------------------------------------- 11. MOTION · purposeful, calm, never makes the user wait ----------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* arrivals / reveals */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* transitions */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* selection pop */ --dur-instant: 120ms; /* hover, taps */ --dur-fast: 220ms; /* card select, button states */ --dur-base: 360ms; /* question handoff, field arrival */ --dur-slow: 600ms; /* radar draw segment, hero settle */ --dur-reveal: 900ms; /* full radar draw */ --z-base: 0; --z-sticky: 100; --z-overlay: 500; --z-modal: 1000; }