/* ============================================================ SPOTT - Design tokens v2 Single source of truth for colour, type, spacing, elevation and motion on the web. Loaded before styles.css and app.css. Themes: dark is the brand default (:root). Light is applied by putting .theme-light on (see _page_head.html). Every colour a component needs lives here; components never hardcode hex values. ============================================================ */ /* --- Self-hosted fonts ------------------------------------- */ @font-face { font-family: 'Teko'; src: url("../fonts/Teko-Variable.0d7ed280b804.ttf") format('truetype'); font-weight: 300 700; font-display: swap; } @font-face { font-family: 'Varela Round'; src: url("../fonts/VarelaRound-Regular.6b7c705707ea.ttf") format('truetype'); font-weight: 400; font-display: swap; } :root { color-scheme: dark; /* ---- Brand ------------------------------------------- */ --color-primary: #FF6B35; --color-primary-dark: #E55A2B; --color-primary-light: #FF8F66; --color-accent: #00D4AA; --color-accent-dark: #00B892; --color-accent-light: #33DDBB; --color-secondary: #1B2838; /* legacy: navy panel colour */ --color-secondary-light: #2A3F55; /* Text-safe versions of the brand colours (AA on this theme's surfaces) */ --color-primary-text: #FF8F66; --color-accent-text: #33DDBB; /* ---- Surfaces (dark) ---------------------------------- */ --color-canvas: #0F1923; /* page background */ --color-canvas-deep: #0A121A; /* sunken strips: rail, footer */ --color-surface: #1B2838; /* cards, panels */ --color-surface-alt: #14212F; /* insets, section headers */ --color-surface-raised: #223247; /* hovered / floating */ --color-surface-dark: #0F1923; /* legacy alias */ --color-paper: #FFFFFF; /* physical paper: order tickets */ --color-paper-ink: #1B2838; --color-paper-muted: #3E4C5C; --color-paper-accent: #00795F; /* accent, readable on paper */ --color-paper-primary: #C4471A; /* primary, readable on paper */ /* ---- Text --------------------------------------------- */ --color-text-primary: #F4F7FA; --color-text-secondary: #B8C4D0; --color-text-muted: #8E9BAA; --color-text-inverse: #FFFFFF; /* on primary buttons */ --color-on-accent: #0F1923; /* on teal fills */ /* ---- Lines -------------------------------------------- */ --color-border: rgba(255, 255, 255, 0.09); --color-border-light: rgba(255, 255, 255, 0.06); --color-border-strong: rgba(255, 255, 255, 0.18); /* ---- Semantic ----------------------------------------- */ --color-success: #22C55E; --color-warning: #F59E0B; --color-error: #EF4444; --color-blue: #3B82F6; --color-purple: #8B5CF6; --color-success-text: #4ADE80; --color-warning-text: #FBBF24; --color-error-text: #F87171; --color-blue-text: #60A5FA; /* Tints: translucent fills behind pills and badges */ --tint-primary: rgba(255, 107, 53, 0.16); --tint-accent: rgba(0, 212, 170, 0.16); --tint-success: rgba(34, 197, 94, 0.16); --tint-warning: rgba(245, 158, 11, 0.18); --tint-error: rgba(239, 68, 68, 0.16); --tint-blue: rgba(59, 130, 246, 0.18); --tint-neutral: rgba(255, 255, 255, 0.07); /* ---- Fields (inputs, search bars) ---------------------- */ --color-field-bg: rgba(255, 255, 255, 0.06); --color-field-bg-focus: rgba(255, 255, 255, 0.09); --color-field-border: rgba(255, 255, 255, 0.14); --color-field-text: #F4F7FA; --color-field-placeholder: #7C8A99; /* ---- Chrome ------------------------------------------- */ --color-nav-bg: rgba(15, 25, 35, 0.86); --color-nav-border: rgba(255, 255, 255, 0.06); --color-nav-link: rgba(244, 247, 250, 0.72); --color-nav-link-hover: #FFFFFF; --color-footer-bg: #0A121A; /* ---- Landing scene ------------------------------------ */ --scene-wall-top: #0B1520; --scene-wall-mid: #101C29; --scene-wall-bottom: #0A121A; --scene-glow: rgba(255, 107, 53, 0.20); --scene-glow-cool: rgba(0, 212, 170, 0.07); --scene-vignette: rgba(0, 0, 0, 0.42); --scene-grain-opacity: 0.12; --scene-lights: rgba(255, 214, 165, 0.85); --scene-lights-glow: rgba(255, 190, 120, 0.7); --scene-sign-main: #F4F7FA; --scene-sign-main-halo: rgba(180, 210, 255, 0.18); --scene-sign-tt: #FFE7DB; --scene-band-a: #0F1923; /* alternating below-fold tones */ --scene-band-b: #121F2C; --scene-band-c: #0C1620; /* ---- Typography --------------------------------------- */ --font-display: 'Teko', 'Bebas Neue', Impact, sans-serif; --font-body: 'Varela Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* Type ramp (display / heading / body / caption) */ --text-display: clamp(4.2rem, 18vw, 13rem); --text-display-sm: clamp(2.6rem, 7vw, 4.4rem); --text-h1: clamp(2.2rem, 5vw, 3.2rem); --text-h2: clamp(1.7rem, 3.5vw, 2.4rem); --text-h3: 1.5rem; --text-h4: 1.25rem; --text-lead: 1.125rem; --text-body: 0.9375rem; --text-body-sm: 0.875rem; --text-caption: 0.8125rem; --text-micro: 0.75rem; --leading-tight: 1.0; --leading-snug: 1.2; --leading-body: 1.55; --leading-loose: 1.7; --tracking-display: 0.01em; --tracking-heading: 0.02em; --tracking-caps: 0.06em; --tracking-label: 0.12em; /* The phone app draws Teko from the same variable file but cannot use its weight axis, so it always renders the Light default instance. The site matches it: one weight of Teko everywhere, both surfaces. */ --weight-display: 300; --weight-display-bold: 300; /* ---- Spacing: 4px grid --------------------------------- */ --space-0: 0; --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-7: 1.75rem; /* 28 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-14: 3.5rem; /* 56 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ /* Legacy names map onto the grid */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-6); --space-xl: var(--space-8); --space-2xl: var(--space-12); --space-3xl: var(--space-16); --space-4xl: var(--space-24); /* ---- Radii -------------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* ---- Elevation: three levels --------------------------- flat sits in the page; a hairline border only raised a card: short, tight shadow floating detached: sticky bars, popovers, hovered cards */ --elev-flat: 0 0 0 1px var(--color-border); --elev-raised: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.28); --elev-floating: 0 2px 6px rgba(0, 0, 0, 0.35), 0 18px 44px rgba(0, 0, 0, 0.45); --elev-glow-primary: 0 0 24px rgba(255, 107, 53, 0.35); --elev-glow-accent: 0 0 24px rgba(0, 212, 170, 0.35); /* Legacy shadow names */ --shadow-sm: var(--elev-raised); --shadow-md: var(--elev-raised); --shadow-lg: var(--elev-floating); --shadow-xl: var(--elev-floating); --shadow-glow: var(--elev-glow-primary); --shadow-glow-accent: var(--elev-glow-accent); /* ---- Motion ------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 120ms; --duration-base: 220ms; --duration-slow: 400ms; --transition-fast: var(--duration-fast) ease; --transition-base: var(--duration-base) ease; --transition-slow: var(--duration-slow) var(--ease-standard); /* ---- Focus & layout ----------------------------------- */ --focus-ring: 0 0 0 3px rgba(0, 212, 170, 0.45); --focus-ring-primary: 0 0 0 3px rgba(255, 107, 53, 0.35); --container: 1120px; --container-narrow: 760px; --gutter: var(--space-6); /* Film grain: an SVG turbulence tile, multiplied over the wall */ --grain: url("data:image/svg+xml;utf8,"); } /* ============================================================ LIGHT THEME ("daytime") ============================================================ */ .theme-light { color-scheme: light; --color-primary-text: #C4471A; --color-accent-text: #00795F; --color-canvas: #F5F7FA; --color-canvas-deep: #E9EEF3; --color-surface: #FFFFFF; --color-surface-alt: #F2F5F8; --color-surface-raised: #FFFFFF; --color-surface-dark: #F5F7FA; --color-paper: #FFFFFF; --color-paper-ink: #1B2838; --color-text-primary: #16202B; --color-text-secondary: #3E4C5C; --color-text-muted: #5A6B7D; --color-text-inverse: #FFFFFF; --color-on-accent: #0F1923; --color-border: rgba(15, 25, 35, 0.10); --color-border-light: rgba(15, 25, 35, 0.06); --color-border-strong: rgba(15, 25, 35, 0.22); --color-success-text: #15803D; --color-warning-text: #A16207; --color-error-text: #C42B2B; --color-blue-text: #1D4ED8; --tint-primary: rgba(255, 107, 53, 0.13); --tint-accent: rgba(0, 212, 170, 0.16); --tint-success: rgba(34, 197, 94, 0.14); --tint-warning: rgba(245, 158, 11, 0.16); --tint-error: rgba(239, 68, 68, 0.12); --tint-blue: rgba(59, 130, 246, 0.14); --tint-neutral: rgba(15, 25, 35, 0.06); --color-field-bg: #FFFFFF; --color-field-bg-focus: #FFFFFF; --color-field-border: rgba(15, 25, 35, 0.18); --color-field-text: #16202B; --color-field-placeholder: #7C8A99; --color-nav-bg: rgba(255, 255, 255, 0.86); --color-nav-border: rgba(15, 25, 35, 0.08); --color-nav-link: #3E4C5C; --color-nav-link-hover: #16202B; --color-footer-bg: #E9EEF3; --scene-wall-top: #FDFEFF; --scene-wall-mid: #F3F6F9; --scene-wall-bottom: #E9EEF3; --scene-glow: rgba(255, 107, 53, 0.16); --scene-glow-cool: rgba(0, 212, 170, 0.08); --scene-vignette: rgba(15, 25, 35, 0.08); --scene-grain-opacity: 0.06; --scene-lights: rgba(255, 140, 70, 0.9); --scene-lights-glow: rgba(255, 140, 70, 0.55); --scene-sign-main: #16202B; --scene-sign-main-halo: rgba(255, 255, 255, 0.6); --scene-sign-tt: #FFE7DB; --scene-band-a: #F5F7FA; --scene-band-b: #FFFFFF; --scene-band-c: #EEF2F6; --elev-flat: 0 0 0 1px var(--color-border); --elev-raised: 0 1px 2px rgba(15, 25, 35, 0.06), 0 6px 18px rgba(15, 25, 35, 0.07); --elev-floating: 0 2px 6px rgba(15, 25, 35, 0.08), 0 18px 44px rgba(15, 25, 35, 0.16); }