/* ========================================================================== GATE CAPITAL — V3 REFINED 01 · FOUNDATIONS — Design tokens -------------------------------------------------------------------------- Two themes of ONE system. Layout, spacing, radius, type and component architecture are theme-invariant. Only the semantic colour layer swaps. Layers: 1. Primitive --g-* raw values, never used directly in components 2. Semantic --c-* role-based, theme-aware, used by components 3. Scale --t-* --s-* --r-* --e-* type / space / radius / elevation ========================================================================== */ /* -------------------------------------------------------------------------- 1 · PRIMITIVES (theme-invariant raw ramps) -------------------------------------------------------------------------- */ :root { /* Neutral — warm-cool grey, tuned so light surfaces read as paper and dark surfaces read as graphite rather than pure black. */ --g-white: #ffffff; --g-paper: #fbfbfc; --g-n-25: #f7f7f9; --g-n-50: #f1f1f4; --g-n-100: #e7e7ec; --g-n-200: #d8d8e0; --g-n-300: #b9b9c6; --g-n-400: #8f8fa1; --g-n-450: #696969; /* AA-safe "faint" on every light ground */ --g-n-500: #6b6b7d; --g-n-550: #5f5f5f; /* AA-safe 'muted' on white */ --g-n-600: #555555; /* V3 secondary text */ --g-n-700: #3a3a48; --g-n-800: #26262f; --g-n-900: #16161c; --g-ink: #111111; /* V3 primary text */ /* Midnight — the dark-theme foundation. Deliberately navy-biased graphite, NOT an inversion of the neutral ramp. */ --g-mid-1000: #06070c; /* deepest — page edge, footer */ --g-mid-950: #0a0c14; /* page ground */ --g-mid-900: #0e111a; /* raised ground / alternating band */ --g-mid-850: #131622; /* surface */ --g-mid-800: #191d2b; /* surface raised */ --g-mid-750: #202536; /* surface high */ --g-mid-700: #2a3042; /* hairline strong */ --g-mid-600: #3a4257; --g-mid-500: #566079; --g-mid-400: #7d879f; /* AA-safe 'faint' on midnight */ --g-mid-350: #8d97ae; /* AA-safe 'muted' on midnight */ --g-mid-300: #a4adc2; --g-mid-200: #c9cfdd; --g-mid-100: #e4e8f0; /* Brand — violet is the primary expressive colour, blue the structural accent, pink the atmospheric one. Green is reserved for verification. */ --g-violet-50: #f2f0ff; --g-violet-100: #e5e1ff; --g-violet-200: #cdc5ff; --g-violet-300: #ada0ff; --g-violet-400: #8f7dfb; --g-violet-500: #7663f2; /* core violet */ --g-violet-600: #6249dd; --g-violet-700: #4f38b8; --g-violet-800: #3d2b8c; --g-blue-50: #eef2ff; --g-blue-100: #dbe3ff; --g-blue-200: #b8c6ff; --g-blue-300: #8ba1ff; --g-blue-400: #5e7bff; --g-blue-500: #3d5bfa; /* core blue — the V3 split panel */ --g-blue-600: #2c45e0; --g-blue-700: #2135b4; --g-pink-50: #fff0f7; --g-pink-100: #ffe0ef; --g-pink-200: #ffc2df; --g-pink-300: #ff9bca; --g-pink-400: #f871b3; --g-pink-500: #e8509c; --g-pink-600: #cc357f; --g-cyan-400: #34c8e0; --g-cyan-500: #17aecb; /* Verification green — USDT / on-chain confirmation only. Never decorative. */ --g-green-300: #5fe0a8; --g-green-400: #2fc98a; --g-green-500: #1faa72; /* USDT mark */ --g-green-600: #16855a; --g-green-700: #127a52; /* AA-safe verify text on light grounds */ --g-green-term: #3ddc84; /* terminal text on dark */ --g-amber-400: #f5b544; --g-amber-500: #dc9a26; --g-red-400: #f26d6d; --g-red-500: #d94a4a; /* -------------------------------------------------------------------- TYPE SCALE — theme-invariant. Display ramp is tight-tracked and set at 0.94 line-height so the editorial headline moments hold together as shapes. -------------------------------------------------------------------- */ /* Outfit is the approved V3 typeface, read from the Figma source (Outfit Regular / SemiBold / Bold). Do not substitute. */ --font-display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, "Roboto Mono", monospace; /* fluid display sizes: min at 360px, max at 1440px */ --t-d1: clamp(2.75rem, 1.42rem + 5.93vw, 5.75rem); /* 44 → 92 hero */ --t-d2: clamp(2.25rem, 1.19rem + 4.72vw, 4.625rem); /* 36 → 74 section editorial (V3 74.88) */ --t-d3: clamp(1.75rem, 1.28rem + 2.13vw, 2.75rem); /* 28 → 44 section standard */ --t-h1: clamp(1.50rem, 1.28rem + 0.98vw, 2.00rem); /* 24 → 32 V3 card heading */ --t-h2: clamp(1.25rem, 1.11rem + 0.62vw, 1.375rem); /* 20 → 22 V3 sub-heading */ --t-h3: 1.125rem; /* 18 */ --t-h4: 1rem; /* 16 */ --t-body: 1rem; /* 16 V3 body */ --t-sm: 0.9375rem; /* 15 V3 small */ --t-xs: 0.875rem; /* 14 */ --t-2xs: 0.75rem; /* 12 */ --t-3xs: 0.6875rem; /* 11 — caps badge (V3 'PLAN') */ --t-eyebrow: 1rem; /* 16 — V3 eyebrow, sentence case */ /* Ledger numerals — used ONLY for financial evidence figures */ --t-fig-xl: clamp(3rem, 1.60rem + 6.22vw, 6.25rem); /* 48 → 100 Net Flow (dominant) */ --t-fig-lg: clamp(1.75rem, 1.36rem + 1.74vw, 2.625rem); /* 28 → 42 */ --t-fig-md: clamp(1.375rem, 1.15rem + 1.00vw, 1.875rem);/* 22 → 30 */ --lh-display: 1.0; /* V3: 64/67.2 and 74.88/74.88 */ --lh-tight: 1.12; --lh-snug: 1.35; --lh-body: 1.6; --lh-relaxed: 1.7; --tr-display: -0.04em; /* V3: -3px at 74.88px */ --tr-tight: -0.02em; --tr-normal: -0.01em; --tr-wide: 0.02em; --tr-caps: 0.04em; /* V3 caps badge: +0.44px at 11px */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* -------------------------------------------------------------------- SPACE — 4px base, geometric above 32 -------------------------------------------------------------------- */ --s-0: 0; --s-1: 0.25rem; /* 4 */ --s-2: 0.5rem; /* 8 */ --s-3: 0.75rem; /* 12 */ --s-4: 1rem; /* 16 */ --s-5: 1.25rem; /* 20 */ --s-6: 1.5rem; /* 24 */ --s-8: 2rem; /* 32 */ --s-10: 2.5rem; /* 40 */ --s-12: 3rem; /* 48 */ --s-16: 4rem; /* 64 */ --s-20: 5rem; /* 80 */ --s-24: 6rem; /* 96 */ --s-32: 8rem; /* 128 */ --s-40: 10rem; /* 160 */ /* Section rhythm — three deliberate densities. tight : evidence / data sections (V2 restraint) normal : standard loose : editorial / atmospheric moments */ --sec-pad-tight: clamp(3.5rem, 2.5rem + 4.4vw, 6rem); --sec-pad-normal: clamp(4.5rem, 3.0rem + 6.7vw, 8.5rem); --sec-pad-loose: clamp(6rem, 4.0rem + 8.9vw, 12rem); /* -------------------------------------------------------------------- GRID -------------------------------------------------------------------- */ --grid-cols: 12; --grid-gutter: clamp(1rem, 0.5rem + 2.2vw, 2rem); --stage-max: 1360px; /* default content stage */ --stage-wide: 1560px; /* full-bleed atmospheric / data stages */ --stage-narrow: 1080px; /* editorial / reading stages */ --stage-reading: 680px; /* long-form prose max measure */ --page-gutter: clamp(1.25rem, 0.6rem + 2.8vw, 2.5rem); /* -------------------------------------------------------------------- RADIUS — restrained. Rounding signals interactivity, not decoration. -------------------------------------------------------------------- */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; --r-pill: 999px; /* -------------------------------------------------------------------- MOTION -------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --dur-1: 120ms; /* state echo — hover, focus */ --dur-2: 200ms; /* control change — tab, chip, toggle */ --dur-3: 320ms; /* surface change — dropdown, sheet */ --dur-4: 520ms; /* entrance — section reveal */ --header-h: 68px; --rail-h: 52px; } /* -------------------------------------------------------------------------- 2 · SEMANTIC LAYER — LIGHT (default on bare :root) -------------------------------------------------------------------------- */ :root { color-scheme: light; /* Grounds & surfaces */ --c-bg: var(--g-paper); --c-bg-alt: var(--g-n-25); /* alternating band */ --c-bg-sunken: var(--g-n-50); /* inset wells, data stages */ --c-surface: var(--g-white); /* crisp financial surface */ --c-surface-raised: var(--g-white); --c-surface-muted: var(--g-n-25); --c-surface-inverse: var(--g-ink); /* black panels, terminal */ --c-scrim: rgba(10, 10, 14, 0.42); /* Translucent material — used sparingly, only where content scrolls beneath */ --c-material: rgba(255, 255, 255, 0.78); --c-material-strong: rgba(255, 255, 255, 0.92); --c-material-blur: saturate(180%) blur(20px); /* Text */ --c-text: var(--g-ink); --c-text-secondary: var(--g-n-600); /* 8.1:1 on white */ --c-text-muted: var(--g-n-550); /* 6.3:1 */ --c-text-faint: var(--g-n-450); /* 4.9:1 — the floor, still AA */ --c-text-inverse: var(--g-white); --c-text-inverse-secondary: rgba(255, 255, 255, 0.72); --c-text-on-accent: var(--g-white); --c-text-link: var(--g-ink); /* Borders — restrained. Hairline is the default; strong is opt-in. */ --c-border: var(--g-n-100); --c-border-strong: var(--g-n-200); --c-border-subtle: var(--g-n-50); --c-border-inverse: rgba(255, 255, 255, 0.14); --c-rule: var(--g-n-100); /* section dividers */ /* Accents */ --c-accent: var(--g-violet-500); --c-accent-hover: var(--g-violet-600); --c-accent-soft: var(--g-violet-50); --c-accent-border: var(--g-violet-200); --c-accent-text: var(--g-violet-700); --c-accent-solid: var(--g-violet-600); /* 6.0:1 with white text */ --c-blue: var(--g-blue-500); --c-blue-soft: var(--g-blue-50); --c-pane-blue: var(--g-blue-500); /* 5.2:1 with white text */ --c-pink: var(--g-pink-500); --c-pink-soft: var(--g-pink-50); /* Verification — on-chain / confirmed */ --c-verify: #127a52; /* 5.0:1 on --c-bg-alt */ --c-verify-bg: #eafaf2; --c-verify-border: #b6e8cf; --c-verify-term: var(--g-green-term); --c-warn: var(--g-amber-500); --c-warn-bg: #fff7e8; --c-warn-border: #f5dfae; --c-danger: var(--g-red-500); /* Controls */ --c-control-bg: var(--g-n-25); --c-control-bg-hover: var(--g-n-50); --c-control-border: var(--g-n-100); --c-control-selected-bg: var(--g-ink); --c-control-selected-text: var(--g-white); --c-control-selected-border: var(--g-ink); --c-btn-primary-bg: var(--g-ink); --c-btn-primary-text: var(--g-white); --c-btn-primary-hover: var(--g-n-800); --c-btn-secondary-bg: var(--g-white); --c-btn-secondary-text: var(--g-ink); --c-btn-secondary-border: var(--g-n-200); --c-focus: var(--g-violet-500); --c-focus-ring: rgba(118, 99, 242, 0.32); /* Data visualisation — ordered categorical ramp. Sequence is fixed so charts read as one system across the site. */ --c-viz-1: var(--g-violet-500); --c-viz-2: var(--g-blue-500); --c-viz-3: var(--g-pink-400); --c-viz-4: var(--g-cyan-500); --c-viz-5: var(--g-n-400); --c-viz-in: var(--g-ink); /* inflow */ --c-viz-out: var(--g-n-300); /* outflow */ --c-viz-net: var(--g-violet-500); --c-viz-grid: var(--g-n-100); --c-viz-track: var(--g-n-100); /* Elevation — light theme uses soft, wide, low-opacity shadows. Financial surfaces get shadow only when they float above atmosphere. */ --e-0: none; --e-1: 0 1px 2px rgba(16, 16, 30, 0.04), 0 1px 1px rgba(16, 16, 30, 0.03); --e-2: 0 4px 12px rgba(16, 16, 30, 0.05), 0 1px 3px rgba(16, 16, 30, 0.04); --e-3: 0 12px 32px rgba(16, 16, 30, 0.08), 0 2px 8px rgba(16, 16, 30, 0.04); --e-4: 0 24px 64px rgba(16, 16, 30, 0.12), 0 4px 16px rgba(16, 16, 30, 0.05); /* Dimensional objects — exact approved V3 values (Figma 32:8889 / 8905 / 8907 / 8912). The signature is a LARGE drop shadow tinted to the object's own hue, plus a satin inset material. Not a generic box-shadow. */ --e-dim: 0 60px 100px -36px rgba(87, 84, 212, 0.55); /* hero note object */ --e-dim-violet: 0 30px 44px -18px rgba(87, 84, 212, 0.50); --e-dim-green: 0 28px 23.5px rgba(34, 145, 108, 0.20); --e-dim-ink: 0 21px 18px rgba(22, 24, 47, 0.20); --e-dim-pink: 0 19px 15.5px rgba(198, 79, 148, 0.50); --e-dim-blue: 0 30px 44px -18px rgba(52, 80, 232, 0.45); --e-dim-cyan: 0 30px 44px -18px rgba(23, 174, 203, 0.45); /* satin/acrylic material: dark inner base + bright top edge */ --dim-material: inset 0 -5px 12px 0 rgba(10, 12, 30, 0.26), inset 0 1px 0 0 rgba(255, 255, 255, 0.55); /* Atmosphere — the violet/pink/blue fields behind editorial sections */ --atm-violet: rgba(150, 128, 255, 0.30); --atm-pink: rgba(255, 145, 205, 0.26); --atm-blue: rgba(110, 145, 255, 0.22); --atm-opacity: 1; } /* -------------------------------------------------------------------------- 2b · SEMANTIC LAYER — DARK Deliberately designed, not inverted: · midnight-navy grounds, never flat #000 across the page · surfaces get LIGHTER as they rise (opposite of light theme's shadow) · accents are lifted 1–2 steps for luminance on dark ground · borders carry the structure that shadow carries in light · data sections deliberately drop saturation and contrast -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --c-bg: var(--g-mid-950); --c-bg-alt: var(--g-mid-900); --c-bg-sunken: var(--g-mid-1000); --c-surface: var(--g-mid-850); --c-surface-raised: var(--g-mid-800); --c-surface-muted: var(--g-mid-900); --c-surface-inverse: var(--g-mid-1000); --c-scrim: rgba(3, 4, 8, 0.66); --c-material: rgba(19, 22, 34, 0.72); --c-material-strong: rgba(19, 22, 34, 0.90); --c-text: #f4f6fb; --c-text-secondary: var(--g-mid-300); /* 8.0:1 on surface */ --c-text-muted: var(--g-mid-350); /* 6.2:1 */ --c-text-faint: var(--g-mid-400); /* 5.0:1 — the floor, still AA */ --c-text-inverse: var(--g-ink); --c-text-inverse-secondary: rgba(10, 10, 14, 0.66); --c-text-on-accent: var(--g-white); --c-text-link: #f4f6fb; --c-border: var(--g-mid-750); --c-border-strong: var(--g-mid-700); --c-border-subtle: var(--g-mid-800); --c-border-inverse: rgba(255, 255, 255, 0.10); --c-rule: var(--g-mid-800); --c-accent: var(--g-violet-400); --c-accent-hover: var(--g-violet-300); --c-accent-soft: rgba(143, 125, 251, 0.14); --c-accent-border: rgba(143, 125, 251, 0.34); --c-accent-text: var(--g-violet-300); --c-accent-solid: var(--g-violet-600); /* white text stays legible */ --c-accent-solid: var(--g-violet-600); /* white text stays legible */ --c-blue: var(--g-blue-400); --c-blue-soft: rgba(94, 123, 255, 0.14); --c-pane-blue: #3450e8; /* 6.1:1 with white text */ --c-pink: var(--g-pink-400); --c-pink-soft: rgba(248, 113, 179, 0.13); --c-verify: var(--g-green-300); --c-verify-bg: rgba(47, 201, 138, 0.12); --c-verify-border: rgba(47, 201, 138, 0.30); --c-warn: var(--g-amber-400); --c-warn-bg: rgba(245, 181, 68, 0.11); --c-warn-border: rgba(245, 181, 68, 0.28); --c-danger: var(--g-red-400); --c-control-bg: var(--g-mid-800); --c-control-bg-hover: var(--g-mid-750); --c-control-border: var(--g-mid-700); --c-control-selected-bg: #f4f6fb; --c-control-selected-text: var(--g-mid-1000); --c-control-selected-border: #f4f6fb; --c-btn-primary-bg: #f4f6fb; --c-btn-primary-text: var(--g-mid-1000); --c-btn-primary-hover: var(--g-white); --c-btn-secondary-bg: transparent; --c-btn-secondary-text: #f4f6fb; --c-btn-secondary-border: var(--g-mid-700); --c-focus: var(--g-violet-300); --c-focus-ring: rgba(173, 160, 255, 0.38); --c-viz-1: var(--g-violet-400); --c-viz-2: var(--g-blue-400); --c-viz-3: var(--g-pink-400); --c-viz-4: var(--g-cyan-400); --c-viz-5: var(--g-mid-500); --c-viz-in: #e4e8f0; --c-viz-out: var(--g-mid-600); --c-viz-net: var(--g-violet-400); --c-viz-grid: var(--g-mid-800); --c-viz-track: var(--g-mid-800); /* Dark elevation: shadow deepens the well, a top hairline lifts the edge */ --e-0: none; --e-1: 0 1px 2px rgba(0, 0, 0, 0.40); --e-2: 0 4px 14px rgba(0, 0, 0, 0.46); --e-3: 0 14px 36px rgba(0, 0, 0, 0.52); --e-4: 0 28px 72px rgba(0, 0, 0, 0.60); --e-dim: 0 60px 100px -36px rgba(118, 99, 242, 0.55); --atm-violet: rgba(126, 104, 255, 0.34); --atm-pink: rgba(226, 92, 166, 0.24); --atm-blue: rgba(64, 104, 255, 0.28); --atm-opacity: 0.85; } } /* Explicit dark selection — must win in both directions */ :root[data-theme="dark"] { color-scheme: dark; --c-bg: var(--g-mid-950); --c-bg-alt: var(--g-mid-900); --c-bg-sunken: var(--g-mid-1000); --c-surface: var(--g-mid-850); --c-surface-raised: var(--g-mid-800); --c-surface-muted: var(--g-mid-900); --c-surface-inverse: var(--g-mid-1000); --c-scrim: rgba(3, 4, 8, 0.66); --c-material: rgba(19, 22, 34, 0.72); --c-material-strong: rgba(19, 22, 34, 0.90); --c-text: #f4f6fb; --c-text-secondary: var(--g-mid-300); /* 8.0:1 on surface */ --c-text-muted: var(--g-mid-350); /* 6.2:1 */ --c-text-faint: var(--g-mid-400); /* 5.0:1 — the floor, still AA */ --c-text-inverse: var(--g-ink); --c-text-inverse-secondary: rgba(10, 10, 14, 0.66); --c-text-on-accent: var(--g-white); --c-text-link: #f4f6fb; --c-border: var(--g-mid-750); --c-border-strong: var(--g-mid-700); --c-border-subtle: var(--g-mid-800); --c-border-inverse: rgba(255, 255, 255, 0.10); --c-rule: var(--g-mid-800); --c-accent: var(--g-violet-400); --c-accent-hover: var(--g-violet-300); --c-accent-soft: rgba(143, 125, 251, 0.14); --c-accent-border: rgba(143, 125, 251, 0.34); --c-accent-text: var(--g-violet-300); --c-accent-solid: var(--g-violet-600); /* white text stays legible */ --c-blue: var(--g-blue-400); --c-blue-soft: rgba(94, 123, 255, 0.14); --c-pane-blue: #3450e8; /* 6.1:1 with white text */ --c-pink: var(--g-pink-400); --c-pink-soft: rgba(248, 113, 179, 0.13); --c-verify: var(--g-green-300); --c-verify-bg: rgba(47, 201, 138, 0.12); --c-verify-border: rgba(47, 201, 138, 0.30); --c-warn: var(--g-amber-400); --c-warn-bg: rgba(245, 181, 68, 0.11); --c-warn-border: rgba(245, 181, 68, 0.28); --c-danger: var(--g-red-400); --c-control-bg: var(--g-mid-800); --c-control-bg-hover: var(--g-mid-750); --c-control-border: var(--g-mid-700); --c-control-selected-bg: #f4f6fb; --c-control-selected-text: var(--g-mid-1000); --c-control-selected-border: #f4f6fb; --c-btn-primary-bg: #f4f6fb; --c-btn-primary-text: var(--g-mid-1000); --c-btn-primary-hover: var(--g-white); --c-btn-secondary-bg: transparent; --c-btn-secondary-text: #f4f6fb; --c-btn-secondary-border: var(--g-mid-700); --c-focus: var(--g-violet-300); --c-focus-ring: rgba(173, 160, 255, 0.38); --c-viz-1: var(--g-violet-400); --c-viz-2: var(--g-blue-400); --c-viz-3: var(--g-pink-400); --c-viz-4: var(--g-cyan-400); --c-viz-5: var(--g-mid-500); --c-viz-in: #e4e8f0; --c-viz-out: var(--g-mid-600); --c-viz-net: var(--g-violet-400); --c-viz-grid: var(--g-mid-800); --c-viz-track: var(--g-mid-800); --e-0: none; --e-1: 0 1px 2px rgba(0, 0, 0, 0.40); --e-2: 0 4px 14px rgba(0, 0, 0, 0.46); --e-3: 0 14px 36px rgba(0, 0, 0, 0.52); --e-4: 0 28px 72px rgba(0, 0, 0, 0.60); --e-dim: 0 60px 100px -36px rgba(118, 99, 242, 0.55); --atm-violet: rgba(126, 104, 255, 0.34); --atm-pink: rgba(226, 92, 166, 0.24); --atm-blue: rgba(64, 104, 255, 0.28); --atm-opacity: 0.85; }