/* ========================================================================== Supar-C — tokens.css Single source of truth. Components use SEMANTIC tokens only. ========================================================================== */ :root { /* ---- Palette (raw — do not use directly in components) --------------- */ --palette-green-500: #008D53; /* Sustainable Green — brand */ --palette-green-600: #007F4B; /* Text/action green — AA on white */ --palette-green-700: #006B3F; /* Action hover/pressed */ --palette-green-300: #3CC28A; /* Green on dark backgrounds */ --palette-black: #2D2F33; /* Brand Black */ --palette-blue-700: #10426B; /* Tech Blue */ --palette-blue-200: #9CC3E6; /* Light blue for dark contexts */ --palette-white: #FFFFFF; --palette-offwhite: #F7F7F5; --palette-grey-600: #5C6068; --palette-grey-500: #8A8F98; --palette-grey-200: #E3E4E6; --palette-ink-950: #17181B; --palette-ink-900: #202226; --palette-ink-100: #ECEDEF; --palette-ink-300: #B4B8BF; --palette-ink-500: #6E737B; --palette-red-700: #B42318; --palette-red-300: #F97066; /* ---- Semantic colour (LIGHT — ships in v1) -------------------------- */ --color-bg: var(--palette-white); --color-bg-alt: var(--palette-offwhite); --color-surface: var(--palette-white); --color-surface-raised: var(--palette-offwhite); --color-text: var(--palette-black); --color-text-muted: var(--palette-grey-600); --color-heading: var(--palette-blue-700); --color-text-accent: var(--palette-green-600); /* small green text, links */ --color-brand: var(--palette-green-500); /* fills, large type, markers */ --color-action: var(--palette-green-600); /* primary button fill */ --color-action-hover: var(--palette-green-700); --color-on-action: var(--palette-white); --color-band: var(--palette-blue-700); /* hero, stats, CTA, footer */ --color-on-band: var(--palette-white); --color-on-band-muted: var(--palette-blue-200); --color-border: var(--palette-grey-200); /* decorative hairlines */ --color-border-strong: var(--palette-grey-500); /* inputs (≥ 3:1) */ --color-focus: var(--palette-green-600); --color-error: var(--palette-red-700); --color-success: var(--palette-green-600); /* ---- Illustration palette (illustrations ONLY — never UI) ------------ */ --illo-surface: #34373C; /* surface (wearing) course — darkest */ --illo-binder: #4A4E54; /* binder course */ --illo-base: #646870; /* base course */ --illo-subbase: #A39C8F; /* sub-base — warm aggregate grey */ --illo-subgrade: #8B6E52; /* subgrade — muted earth */ --illo-aggregate: #C2BBAE; /* stones in microstructure */ --illo-bitumen: #1C1D20; /* bitumen film */ --illo-outline: #2D2F33; /* thin outlines */ --illo-marking: #FFFFFF; /* road markings */ --illo-marker: var(--palette-green-500); /* "Supar-C helps here" */ --illo-label: var(--palette-blue-700); /* layer labels */ --illo-stroke: 1.5px; /* ---- Typography ----------------------------------------------------- */ --font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; /* Fluid scale: min at 360px viewport → max at 1440px viewport */ --text-sm: 0.875rem; /* 14px */ --text-base: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem); /* 16 → 18 */ --text-lead: clamp(1.125rem, 1.0417rem + 0.3704vw, 1.375rem); /* 18 → 22 */ --text-h4: clamp(1.25rem, 1.1667rem + 0.3704vw, 1.5rem); /* 20 → 24 */ --text-h3: clamp(1.5rem, 1.3333rem + 0.7407vw, 2rem); /* 24 → 32 */ --text-h2: clamp(2rem, 1.6667rem + 1.4815vw, 3rem); /* 32 → 48 */ --text-h1: clamp(2.5rem, 1.8333rem + 2.963vw, 4.5rem); /* 40 → 72 */ --leading-body: 1.6; --leading-heading: 1.1; --leading-tight: 1.3; /* h4, card titles, buttons */ --tracking-eyebrow: 0.08em; --measure: 68ch; /* max text column width */ /* ---- Spacing (8px grid; 24px is the default gap) -------------------- */ --space-1: 0.5rem; /* 8px */ --space-2: 1rem; /* 16px */ --space-3: 1.5rem; /* 24px — default gap & gutter */ --space-4: 2rem; /* 32px */ --space-5: 3rem; /* 48px */ --space-6: 4.5rem; /* 72px */ --space-7: 6rem; /* 96px */ --space-8: 9rem; /* 144px */ --space-section: clamp(6rem, 5rem + 4.444vw, 9rem); /* 96 → 144 */ /* ---- Layout --------------------------------------------------------- */ --gutter: var(--space-3); --page-margin: var(--space-3); /* 24px; 48px from 1024px */ --content-max: 80rem; /* 1280px */ --grid-columns: 4; /* 8 from 600px, 12 from 1024px */ --road-lane: 3rem; /* 48px road strip on Home < 600px */ --header-height: 4rem; /* 64px; 80px from 1024px */ --tap-min: 2.75rem; /* 44px */ /* ---- Shape ---------------------------------------------------------- */ --radius-control: 4px; /* buttons, inputs, chips */ --radius-none: 0; /* cards, images, sections */ --border-hairline: 1px solid var(--color-border); --border-control: 1px solid var(--color-border-strong); --focus-ring: 2px solid var(--color-focus); --focus-offset: 2px; /* ---- Motion --------------------------------------------------------- */ --dur-1: 200ms; /* micro: hover, press, colour */ --dur-2: 400ms; /* small UI: menu items, card lift, underline */ --dur-3: 800ms; /* reveals, section entrances */ --dur-4: 1200ms; /* signature moments, minimum truck run */ --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); /* GSAP power3.out — entrances */ --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* GSAP power3.in — exits */ --ease-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);/* GSAP power2.inOut — moves */ --stagger: 80ms; --reveal-distance: 24px; /* ---- Layers --------------------------------------------------------- */ --z-road: 1; --z-content: 2; --z-header: 100; --z-menu: 200; --z-loader: 300; } @media (min-width: 600px) { :root { --grid-columns: 8; } } @media (min-width: 1024px) { :root { --grid-columns: 12; --page-margin: var(--space-5); --header-height: 5rem; } } /* ---- Semantic colour (DARK — defined, NOT activated in v1) ------------- Activation later = add data-theme="dark" to (toggle and/or prefers-color-scheme). Do NOT wire this up in v1. */ [data-theme="dark"] { --color-bg: var(--palette-ink-950); --color-bg-alt: var(--palette-ink-900); --color-surface: var(--palette-ink-900); --color-surface-raised: var(--palette-black); --color-text: var(--palette-ink-100); --color-text-muted: var(--palette-ink-300); --color-heading: var(--palette-white); --color-text-accent: var(--palette-green-300); --color-brand: var(--palette-green-500); --color-action: var(--palette-green-300); --color-action-hover: #5ED6A0; --color-on-action: var(--palette-ink-950); --color-band: var(--palette-blue-700); --color-on-band: var(--palette-white); --color-on-band-muted: var(--palette-blue-200); --color-border: var(--palette-black); --color-border-strong: var(--palette-ink-500); --color-focus: var(--palette-green-300); --color-error: var(--palette-red-300); --color-success: var(--palette-green-300); --illo-surface: #4A4E55; --illo-binder: #5D6168; --illo-base: #767B83; --illo-subbase: #8E887C; --illo-subgrade: #7A6249; --illo-aggregate: #A8A194; --illo-bitumen: #0F1012; --illo-outline: var(--palette-ink-300); --illo-marking: var(--palette-ink-100); --illo-marker: var(--palette-green-300); --illo-label: var(--palette-blue-200); } /* Blue bands re-scope tokens so children "just work" */ .l-band { --color-text: var(--color-on-band); --color-text-muted: var(--color-on-band-muted); --color-heading: var(--color-on-band); --color-text-accent: var(--color-on-band); /* never green on blue */ --color-focus: var(--palette-white); --color-border: rgb(255 255 255 / 0.2); background: var(--color-band); color: var(--color-text); }