/* Orbit Connect tokens. Layer 1: raw palette and scales. Layer 2: semantic tokens components use; dark overrides only layer 2 (OS setting, or ). tools/contrast.py proves every pair: re-run after colour edits. */ :root { color-scheme: light dark; /* ---- Raw palette. Orange 500 = logo colour (white on it is 3.3:1: large/decorative only); buttons use 600, orange text 700. ---- */ --brand-50: #FFF4EF; --brand-100: #FFE6DB; --brand-200: #FFCDB8; --brand-300: #FFA982; --brand-400: #F98550; --brand-500: #F06030; --brand-600: #CA4316; --brand-700: #A93710; --brand-800: #862C0F; --brand-900: #5C1F0C; --ink-900: #0F1720; --ink-700: #2C3644; --ink-500: #566170; --ink-400: #7B8492; --ink-300: #A7AEB9; --ink-100: #E4E7EC; --sand-0: #FFFFFF; --sand-25: #FCFBF9; --sand-50: #F7F5F1; --sand-100: #F0ECE5; --sand-200: #E6E1D8; --sand-300: #D5CEC2; /* ---- Type: ~1.2 scale, large steps fluid (clamp, 320px to 1280px viewport) ---- */ --font-sans: "Inter Variable", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: clamp(1.0625rem, 1.03rem + 0.15vw, 1.1875rem); --text-xl: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); --text-2xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); --text-3xl: clamp(1.625rem, 1.3rem + 1.5vw, 2.25rem); --text-4xl: clamp(2rem, 1.4rem + 2.8vw, 3.25rem); --text-5xl: clamp(2.25rem, 1.4rem + 4vw, 4rem); --leading-tight: 1.12; --leading-snug: 1.3; --leading-normal: 1.6; --tracking-tight: -0.022em; --tracking-wide: 0.08em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- Spacing (4px base), layout ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --section-pad: clamp(3rem, 2rem + 5vw, 6rem); --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem); --container: 72rem; --container-narrow: 44rem; --container-wide: 84rem; --header-h: 4rem; /* Breakpoints: documentation only (custom properties do not work inside @media, so the CSS uses these literals). */ --bp-sm: 30em; --bp-md: 48em; --bp-nav: 56em; --bp-lg: 64em; --bp-xl: 80em; /* ---- Shape, motion, focus ---- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px; --ease: cubic-bezier(0.2, 0.7, 0.3, 1); --dur-1: 120ms; --dur-2: 180ms; --z-sticky: 100; --z-skip: 1000; --focus-width: 3px; --focus-offset: 2px; /* CSS-background icons cannot read currentColor: mid-grey chevron (>=3:1 on light and dark), white check on the brand fill. */ --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B8492' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); --shadow-rgb: 15 23 32; --shadow-k: 1; --shadow-xs: 0 1px 2px rgb(var(--shadow-rgb) / calc(0.06 * var(--shadow-k))); --shadow-sm: 0 1px 2px rgb(var(--shadow-rgb) / calc(0.06 * var(--shadow-k))), 0 2px 6px rgb(var(--shadow-rgb) / calc(0.06 * var(--shadow-k))); --shadow-md: 0 2px 4px rgb(var(--shadow-rgb) / calc(0.05 * var(--shadow-k))), 0 8px 24px rgb(var(--shadow-rgb) / calc(0.08 * var(--shadow-k))); --shadow-lg: 0 4px 8px rgb(var(--shadow-rgb) / calc(0.05 * var(--shadow-k))), 0 18px 44px rgb(var(--shadow-rgb) / calc(0.13 * var(--shadow-k))); --shadow-brand: 0 8px 28px rgb(240 96 48 / 0.2); /* ---- Semantic colour: LIGHT (default) ---- */ --color-bg: var(--sand-25); --color-bg-alt: var(--sand-50); --color-surface: var(--sand-0); --color-surface-sunken: var(--sand-50); --color-border: var(--sand-200); --color-border-strong: var(--sand-300); --color-border-input: #7B8492; --color-text: var(--ink-900); --color-text-2: var(--ink-700); --color-muted: var(--ink-500); --color-placeholder: #6B7482; --color-link: var(--brand-700); --color-link-hover: var(--brand-900); --color-eyebrow: var(--brand-700); --color-focus: #2563EB; --color-focus-halo: rgb(37 99 235 / 0.22); --color-selection: var(--brand-200); --color-hover: rgb(15 23 32 / 0.05); --color-hover-strong: rgb(15 23 32 / 0.09); --header-bg: rgb(252 251 249 / 0.82); --color-primary: var(--brand-600); --color-primary-hover: var(--brand-700); --color-primary-active: var(--brand-800); --color-on-primary: #FFFFFF; --color-danger-btn: #B92318; --color-danger-btn-hover: #9C1C12; --color-on-danger-btn: #FFFFFF; --success-fg: #0F5F38; --success-bg: #E6F5EC; --success-border: #B5DFC6; --success-solid: #1F8A55; --warning-fg: #6F4200; --warning-bg: #FFF3D4; --warning-border: #EFD189; --warning-solid: #B36B00; --danger-fg: #A11D14; --danger-bg: #FDECEA; --danger-border: #F4B7B1; --danger-solid: #D0271C; --info-fg: #1B4DA8; --info-bg: #E9F0FD; --info-border: #B6CDF5; --info-solid: #2A64D6; --brand-fg: var(--brand-800); --brand-bg: #FFEDE4; --brand-border: #FFC9B0; --brand-solid: var(--brand-500); --neutral-fg: #3A4452; --neutral-bg: #EEEAE3; --neutral-border: #DCD6CB; --band-bg: var(--ink-900); /* .section--dark re-scopes the tokens inside it */ } /* ---- Semantic colour: DARK. Same block twice (OS media query, manual attribute): tools/contrast.py fails if they drift. ---- */ @media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow-rgb: 0 0 0; --shadow-k: 6; --color-bg: #0C1016; --color-bg-alt: #10151C; --color-surface: #151B23; --color-surface-sunken: #10151C; --color-border: #262E3A; --color-border-strong: #384253; --color-border-input: #6A7484; --color-text: #EEF1F5; --color-text-2: #C9D0DA; --color-muted: #9AA4B2; --color-placeholder: #8A94A3; --color-link: #FF8F63; --color-link-hover: #FFB08F; --color-eyebrow: #FF8F63; --color-focus: #7FA8FF; --color-focus-halo: rgb(127 168 255 / 0.28); --color-selection: #5C2A17; --color-hover: rgb(255 255 255 / 0.07); --color-hover-strong: rgb(255 255 255 / 0.12); --header-bg: rgb(12 16 22 / 0.82); --color-primary: var(--brand-500); --color-primary-hover: var(--brand-400); --color-primary-active: var(--brand-300); --color-on-primary: #1A0904; --color-danger-btn: #F0574B; --color-danger-btn-hover: #FF7468; --color-on-danger-btn: #1F0705; --success-fg: #74D9A4; --success-bg: #0F2B1F; --success-border: #1E5B3E; --success-solid: #34B37A; --warning-fg: #F5C15C; --warning-bg: #2D2208; --warning-border: #5C4514; --warning-solid: #E2A122; --danger-fg: #FF9A92; --danger-bg: #331512; --danger-border: #6B2A25; --danger-solid: #F0574B; --info-fg: #8DB5FF; --info-bg: #102040; --info-border: #24427A; --info-solid: #5C93F5; --brand-fg: #FFAB88; --brand-bg: #33170D; --brand-border: #6A2E17; --neutral-fg: #C9D0DA; --neutral-bg: #1D242E; --neutral-border: #2F3948; --band-bg: #161C26; } } :root[data-theme="dark"] { color-scheme: dark; --shadow-rgb: 0 0 0; --shadow-k: 6; --color-bg: #0C1016; --color-bg-alt: #10151C; --color-surface: #151B23; --color-surface-sunken: #10151C; --color-border: #262E3A; --color-border-strong: #384253; --color-border-input: #6A7484; --color-text: #EEF1F5; --color-text-2: #C9D0DA; --color-muted: #9AA4B2; --color-placeholder: #8A94A3; --color-link: #FF8F63; --color-link-hover: #FFB08F; --color-eyebrow: #FF8F63; --color-focus: #7FA8FF; --color-focus-halo: rgb(127 168 255 / 0.28); --color-selection: #5C2A17; --color-hover: rgb(255 255 255 / 0.07); --color-hover-strong: rgb(255 255 255 / 0.12); --header-bg: rgb(12 16 22 / 0.82); --color-primary: var(--brand-500); --color-primary-hover: var(--brand-400); --color-primary-active: var(--brand-300); --color-on-primary: #1A0904; --color-danger-btn: #F0574B; --color-danger-btn-hover: #FF7468; --color-on-danger-btn: #1F0705; --success-fg: #74D9A4; --success-bg: #0F2B1F; --success-border: #1E5B3E; --success-solid: #34B37A; --warning-fg: #F5C15C; --warning-bg: #2D2208; --warning-border: #5C4514; --warning-solid: #E2A122; --danger-fg: #FF9A92; --danger-bg: #331512; --danger-border: #6B2A25; --danger-solid: #F0574B; --info-fg: #8DB5FF; --info-bg: #102040; --info-border: #24427A; --info-solid: #5C93F5; --brand-fg: #FFAB88; --brand-bg: #33170D; --brand-border: #6A2E17; --neutral-fg: #C9D0DA; --neutral-bg: #1D242E; --neutral-border: #2F3948; --band-bg: #161C26; } :root[data-theme="light"] { color-scheme: light; }