/* ========================================================================== Techspire Summits - design tokens -------------------------------------------------------------------------- Single source of truth for colour, type, space, radius, elevation and motion. Nothing downstream should contain a raw hex value; components reference these variables so a change here moves the whole product. Direction: Swiss / minimal, conference-tech. Navy authority + one blue CTA. ========================================================================== */ :root { /* ---- brand ramp ------------------------------------------------------ */ --ts-navy-900:#020617; --ts-navy-800:#0F172A; --ts-navy-700:#1E293B; --ts-navy-600:#334155; --ts-navy-500:#475569; --ts-navy-400:#64748B; --ts-navy-300:#94A3B8; --ts-navy-200:#CBD5E1; --ts-navy-150:#E2E8F0; --ts-navy-100:#F1F5F9; --ts-navy-50:#F8FAFC; --ts-blue-900:#0C4A6E; --ts-blue-800:#075985; --ts-blue-700:#0369A1; --ts-blue-600:#0284C7; --ts-blue-500:#0EA5E9; --ts-blue-300:#7DD3FC; --ts-blue-100:#E0F2FE; --ts-blue-50:#F0F9FF; --ts-green-700:#15803D; --ts-green-100:#DCFCE7; --ts-amber-700:#B45309; --ts-amber-100:#FEF3C7; --ts-red-700:#B91C1C; --ts-red-600:#DC2626; --ts-red-100:#FEE2E2; /* ---- semantic surfaces ---------------------------------------------- */ --ts-bg: var(--ts-navy-50); --ts-bg-subtle: var(--ts-navy-100); --ts-surface: #FFFFFF; --ts-surface-raised: #FFFFFF; --ts-surface-inverse: var(--ts-navy-800); /* ---- semantic text --------------------------------------------------- Contrast on --ts-surface (#FFFFFF): text #020617 19.4:1 AAA text-muted #475569 7.4:1 AAA text-subtle #64748B 4.8:1 AA (never used below body size) */ --ts-text: var(--ts-navy-900); --ts-text-muted: var(--ts-navy-500); --ts-text-subtle: var(--ts-navy-400); --ts-text-inverse: #FFFFFF; --ts-text-on-accent: #FFFFFF; /* ---- accent / actions ----------------------------------------------- */ --ts-accent: var(--ts-blue-700); /* 5.9:1 on white - AA */ --ts-accent-hover: var(--ts-blue-800); --ts-accent-active: var(--ts-blue-900); --ts-accent-soft: var(--ts-blue-50); --ts-accent-border: var(--ts-blue-300); /* ---- status ---------------------------------------------------------- */ --ts-success:var(--ts-green-700); --ts-success-soft:var(--ts-green-100); --ts-warning:var(--ts-amber-700); --ts-warning-soft:var(--ts-amber-100); --ts-danger: var(--ts-red-700); --ts-danger-soft: var(--ts-red-100); --ts-info: var(--ts-blue-700); --ts-info-soft: var(--ts-blue-100); /* ---- lines ----------------------------------------------------------- */ --ts-border: var(--ts-navy-150); --ts-border-strong: var(--ts-navy-200); --ts-divider: var(--ts-navy-100); --ts-ring: var(--ts-blue-600); /* ---- type ------------------------------------------------------------ Lexend for headings, Source Sans 3 for body. Both have a wide weight range and read cleanly at small sizes in dense admin tables. */ --ts-font-display:"Lexend","Segoe UI",system-ui,-apple-system,sans-serif; --ts-font-body:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif; --ts-font-mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,monospace; /* Fluid scale, 1.250 major third. clamp() keeps 375px readable without a media query and stops 1440px headlines from overrunning. */ --ts-text-xs: .8125rem; /* 13 - labels and meta only, never body */ --ts-text-sm: .875rem; /* 14 */ --ts-text-base: 1rem; /* 16 - body floor, avoids iOS zoom-on-focus*/ --ts-text-lg: 1.125rem; /* 18 */ --ts-text-xl: clamp(1.25rem, 1.18rem + .3vw, 1.375rem); --ts-text-2xl: clamp(1.5rem, 1.38rem + .5vw, 1.75rem); --ts-text-3xl: clamp(1.875rem, 1.66rem + .9vw, 2.25rem); --ts-text-4xl: clamp(2.25rem, 1.9rem + 1.5vw, 3rem); --ts-text-5xl: clamp(2.75rem, 2.1rem + 2.7vw, 4rem); --ts-leading-tight:1.15; --ts-leading-snug:1.3; --ts-leading-normal:1.55; --ts-leading-relaxed:1.7; --ts-tracking-tight:-.02em; --ts-tracking-wide:.08em; --ts-weight-regular:400; --ts-weight-medium:500; --ts-weight-semibold:600; --ts-weight-bold:700; /* ---- space (4px rhythm) ---------------------------------------------- */ --ts-space-1:.25rem; --ts-space-2:.5rem; --ts-space-3:.75rem; --ts-space-4:1rem; --ts-space-5:1.25rem; --ts-space-6:1.5rem; /* 7 was missing from the scale while two rules used it. An unresolvable var() is a guaranteed-invalid value, which drops the WHOLE declaration -- so `padding: var(--ts-space-6) var(--ts-space-7)` left a card with no padding at all, not a card with the vertical padding applied. */ --ts-space-7:1.75rem; --ts-space-8:2rem; --ts-space-10:2.5rem; --ts-space-12:3rem; --ts-space-16:4rem; --ts-space-20:5rem; --ts-space-24:6rem; /* Section rhythm compresses on small screens rather than scrolling on. */ --ts-section-y: clamp(3rem, 1.5rem + 6vw, 6rem); --ts-gutter: clamp(1rem, .55rem + 1.9vw, 2rem); --ts-container: 1200px; --ts-measure: 68ch; /* 60-75 characters of body text */ /* ---- radius ----------------------------------------------------------- */ --ts-radius-sm:4px; --ts-radius:8px; --ts-radius-md:12px; --ts-radius-lg:16px; --ts-radius-xl:24px; --ts-radius-pill:999px; /* ---- elevation: one ramp, so cards/sheets/modals stay consistent ----- */ --ts-shadow-xs:0 1px 2px rgba(2,6,23,.06); --ts-shadow-sm:0 1px 3px rgba(2,6,23,.08), 0 1px 2px rgba(2,6,23,.04); --ts-shadow-md:0 4px 12px rgba(2,6,23,.08), 0 2px 4px rgba(2,6,23,.04); --ts-shadow-lg:0 12px 28px rgba(2,6,23,.10), 0 4px 8px rgba(2,6,23,.04); --ts-shadow-xl:0 24px 48px rgba(2,6,23,.14); /* ---- motion ---------------------------------------------------------- Picked by distance travelled, not one duration reused everywhere. */ --ts-dur-instant:100ms; /* colour change on something already on screen */ --ts-dur-fast:160ms; /* small local moves: hover, focus, toggle */ --ts-dur:220ms; /* default: dropdowns, tooltips, accordions */ --ts-dur-slow:320ms; /* panels, sheets, modal entrance */ --ts-ease:cubic-bezier(.2,0,.2,1); /* decelerate on arrival */ --ts-ease-out:cubic-bezier(0,0,.2,1); --ts-ease-in:cubic-bezier(.4,0,1,1); /* accelerate on exit */ --ts-ease-spring:cubic-bezier(.34,1.4,.64,1); /* ---- layers ---------------------------------------------------------- */ --ts-z-base:0; --ts-z-raised:10; --ts-z-sticky:20; --ts-z-header:40; --ts-z-drawer:60; --ts-z-overlay:80; --ts-z-modal:90; --ts-z-toast:100; } /* ========================================================================== Dark theme. Tonal, not inverted: surfaces lift with lightness instead of borrowing the light palette, and the accent moves up the ramp so it still clears 4.5:1 on a dark surface (--ts-blue-700 would fail there). ========================================================================== */ :root[data-ts-theme="dark"] { --ts-bg:#070C18; --ts-bg-subtle:#0B1222; --ts-surface:#111A2E; --ts-surface-raised:#16213A; --ts-surface-inverse:#F8FAFC; --ts-text:#F1F5F9; /* 15.8:1 on #111A2E */ --ts-text-muted:#B6C2D4; /* 8.6:1 */ --ts-text-subtle:#94A3B8; /* 5.9:1 */ --ts-text-inverse:#0F172A; --ts-accent:#38BDF8; /* 7.6:1 on #111A2E */ --ts-accent-hover:#7DD3FC; --ts-accent-active:#BAE6FD; --ts-accent-soft:rgba(56,189,248,.12); --ts-accent-border:rgba(56,189,248,.42); --ts-success:#4ADE80; --ts-success-soft:rgba(74,222,128,.14); --ts-warning:#FBBF24; --ts-warning-soft:rgba(251,191,36,.14); --ts-danger:#F87171; --ts-danger-soft:rgba(248,113,113,.14); --ts-info:#38BDF8; --ts-info-soft:rgba(56,189,248,.14); /* Dividers have to stay visible in dark too, or hierarchy collapses. */ --ts-border:rgba(226,232,240,.14); --ts-border-strong:rgba(226,232,240,.26); --ts-divider:rgba(226,232,240,.09); --ts-ring:#38BDF8; --ts-shadow-xs:0 1px 2px rgba(0,0,0,.5); --ts-shadow-sm:0 1px 3px rgba(0,0,0,.55); --ts-shadow-md:0 4px 12px rgba(0,0,0,.55); --ts-shadow-lg:0 12px 28px rgba(0,0,0,.6); --ts-shadow-xl:0 24px 48px rgba(0,0,0,.65); }