/* ========================================================================== GEOLiNK · PRISM / LAB — design tokens Single source of truth for colour, type, spacing, radii, elevation, motion. Frozen direction: source/docs/site-design-language.md Every page loads this file first, then site.css. ========================================================================== */ :root { color-scheme: light; /* ------------------------------------------------------------------------ Colour · raw palette ------------------------------------------------------------------------ */ --color-lab-white: #F7F9FA; /* page base */ --color-lab-raised: #FBFCFD; /* raised paper, dialog face */ --color-ice: #DDE5F1; /* ice panel */ --color-ice-soft: #E9EFF8; /* lighter ice */ --color-ice-deep: #EFF3F9; /* section wash */ --color-graphite: #2B3438; /* primary text */ --color-graphite-deep: #1F2A2E; /* text on blue fills */ --color-white: #FFFFFF; /* Secondary text: a 78% graphite mix, dark enough to pass 4.5:1 on every light surface including the ice panel. The 70 / 55 / 38% steps below are kept for decoration, large display type and disabled states only. */ --color-text-secondary: #5D676B; --color-ink-70: #686F72; /* 4.84:1 on lab white; fails on ice */ --color-ink-55: #878D8F; /* large text / decoration only */ --color-ink-38: #A9AEB0; /* hairlines / disabled only */ --color-cyan: #427EC6; /* logo blue · graphic accent; never small text */ --color-cyan-strong: #2F63AE; /* large text, hover borders */ --color-cyan-ink: #2048A0; /* small accent text, links, focus, fill */ --color-line: #CDD7E3; /* hairline dividers */ --color-line-soft: #DDE4EE; /* quietest divider */ --color-line-strong: #7C8C92; /* emphasised rule */ --color-border-ui: #6E7F86; /* interactive borders (3:1 on all lights) */ --color-danger: #A23B31; /* validation text / border */ --color-danger-soft: #F3E1DE; /* validation field wash */ /* RGB channels for translucent washes; keeps alpha colours on-token. */ --color-lab-white-rgb: 247, 249, 250; --color-lab-raised-rgb: 251, 252, 253; --color-ice-rgb: 221, 229, 241; --color-graphite-rgb: 43, 52, 56; --color-graphite-deep-rgb: 31, 42, 46; --color-cyan-rgb: 66, 126, 198; --color-cyan-ink-rgb: 32, 72, 160; --color-white-rgb: 255, 255, 255; /* ------------------------------------------------------------------------ Colour · semantic aliases used by components ------------------------------------------------------------------------ */ --bg: var(--color-lab-white); --bg-raised: var(--color-lab-raised); --panel: var(--color-ice); --panel-soft: var(--color-ice-soft); --panel-deep: var(--color-ice-deep); --ink: var(--color-graphite); --ink-strong: var(--color-graphite-deep); --text: var(--color-graphite); --text-secondary: var(--color-text-secondary); --text-muted: var(--color-text-secondary); --accent: var(--color-cyan); --accent-strong: var(--color-cyan-strong); --accent-ink: var(--color-cyan-ink); --line: var(--color-line); --line-soft: var(--color-line-soft); --line-strong: var(--color-line-strong); --border-ui: var(--color-border-ui); --danger: var(--color-danger); --focus: var(--color-cyan-ink); /* ------------------------------------------------------------------------ Type ------------------------------------------------------------------------ */ --font-display: "Instrument Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; --font-body: "Instrument Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; --font-mono: "DM Mono", "SFMono-Regular", "Cascadia Mono", "Roboto Mono", "Courier New", monospace; --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --text-eyebrow: 11px; --text-xs: 11px; --text-sm: 12px; --text-base: 15px; --text-md: 17px; --text-lg: clamp(20px, 1.8vw, 24px); --text-h3: clamp(18px, 1.7vw, 22px); --text-h2: clamp(28px, 3.6vw, 44px); --text-h1: clamp(38px, 4.6vw, 56px); --text-display: clamp(38px, 5.6vw, 72px); --leading-display: 1.02; --leading-heading: 1.1; --leading-body: 1.65; --tracking-display: -0.02em; --tracking-tight: -0.01em; --tracking-label: 0.14em; --tracking-label-wide: 0.18em; /* ------------------------------------------------------------------------ Spacing · 4px base, 12 steps ------------------------------------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; --space-13: 128px; --gutter: clamp(18px, 3.2vw, 48px); --section-y: clamp(56px, 7vw, 96px); --section-y-sm: clamp(40px, 5vw, 64px); --shell: 1240px; --measure: 68ch; --measure-narrow: 52ch; /* ------------------------------------------------------------------------ Radii ------------------------------------------------------------------------ */ --radius-0: 0px; --radius-hair: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 22px; --radius-pill: 999px; /* ------------------------------------------------------------------------ Elevation & depth ------------------------------------------------------------------------ */ --shadow-hairline: 0 0 0 1px rgba(43, 52, 56, 0.06); --shadow-raised: 0 1px 2px rgba(43, 52, 56, 0.05), 0 10px 30px -14px rgba(43, 52, 56, 0.14); --shadow-lift: 0 2px 6px rgba(43, 52, 56, 0.06), 0 26px 60px -28px rgba(43, 52, 56, 0.26); --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 44px -22px rgba(43, 52, 56, 0.22); --shadow-object: 0 30px 42px -22px rgba(43, 52, 56, 0.28); --shadow-focus: 0 0 0 3px rgba(66, 126, 198, 0.22); --shadow-inset-line: inset 0 0 0 1px rgba(255, 255, 255, 0.72); /* ------------------------------------------------------------------------ Motion ------------------------------------------------------------------------ */ --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-reveal: 640ms; --dur-scan: 44s; --dur-float: 8s; --ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --reveal-shift: 12px; --float-shift: 5px; /* ------------------------------------------------------------------------ Layout & stacking ------------------------------------------------------------------------ */ --nav-height: 72px; --nav-height-mobile: 62px; --z-nav: 40; --z-modal: 120; --z-skip: 200; /* ------------------------------------------------------------------------ Reusable gradients ------------------------------------------------------------------------ */ --gradient-lab: linear-gradient( 180deg, #FBFCFD 0%, #F3F8FA 60%, #EFF3F9 100% ); --gradient-ice: linear-gradient(180deg, #FBFDFE 0%, #E7F0F4 100%); --gradient-hairline: linear-gradient( 90deg, transparent, rgba(66, 126, 198, 0.18), transparent ); }