/* =========================================================================== OCreate design tokens — the single source of truth for color, type and space. Nothing else in the codebase should contain a raw hex value, a px font size, or an arbitrary margin. If you need a value that isn't here, add it here. BRAND PALETTE ------------- Taken from the OCreate logo: an orange "O" and a cyan "Create". An earlier version of this file used red / blue / yellow, lifted from the old Wix theme's CSS custom properties. Those were the Wix template's colors, not the brand's — the logo has never had red or yellow in it. Orange and cyan are the brand; red and amber survive only as SEMANTIC colors, where they mean "error" and "warning" rather than "OCreate". ACCESSIBILITY ------------- Both brand colors fail WCAG AA for body text on white. Measured: #F1592A brand orange 3.39 : 1 FAILS AA normal text (needs 4.5) #00AEEF brand cyan 2.53 : 1 FAILS AA normal text So each has a darkened `-ink` variant that passes, and those are the ONLY ones allowed to carry small text or sit behind white button labels: #C2410C orange ink 5.18 : 1 passes AA #0369A1 cyan ink 5.93 : 1 passes AA The `-brand` values are for large display type (>=24px), fills, borders and icons. Black on brand orange measures 6.20 : 1, so dark-on-orange badges and markers are fine. =========================================================================== */ :root { /* --- brand: orange (primary) ----------------------------------------- */ --oc-orange-050: #FFF3EE; --oc-orange-100: #FFDCCB; --oc-orange-brand: #F1592A; /* display, fills, borders — not small text */ --oc-orange-ink: #C2410C; /* text, links, button fills — 5.18:1 */ --oc-orange-800: #9A3412; /* hover/active on ink */ /* --- brand: cyan (secondary) ----------------------------------------- */ --oc-cyan-050: #EDFAFF; --oc-cyan-100: #C7EEFC; --oc-cyan-brand: #00AEEF; /* display, fills, borders — not small text */ --oc-cyan-ink: #0369A1; /* text, links — 5.93:1 */ --oc-cyan-800: #075985; /* --- semantic: danger. NOT a brand color. --------------------------- */ --oc-red-050: #FEF2F2; --oc-red-100: #FEE2E2; --oc-red-ink: #C41219; /* 6.09:1 */ --oc-red-800: #991B1B; /* --- semantic: warning ----------------------------------------------- */ --oc-amber-050: #FFFBEB; --oc-amber-100: #FEF0C7; --oc-amber-brand: #F59E0B; /* fills only; black on this is 8.5:1 */ --oc-amber-ink: #A16207; /* 4.92:1 */ /* --- semantic: success ------------------------------------------------ */ --oc-green-050: #EAF7EF; --oc-green-ink: #0F7B3F; /* 4.86:1 */ --oc-green-800: #0A5B2D; /* --- neutrals --------------------------------------------------------- */ --oc-white: #FFFFFF; --oc-gray-050: #F7F8F9; --oc-gray-100: #ECEEF0; --oc-gray-200: #DCDFE3; --oc-gray-300: #B0B0B0; --oc-gray-400: #909499; --oc-gray-600: #727272; --oc-gray-700: #55585C; --oc-gray-800: #34373B; --oc-gray-900: #1C1E21; --oc-black: #000000; /* --- semantic aliases. Prefer these in components over raw palette ---- */ --oc-color-bg: var(--oc-white); --oc-color-bg-subtle: var(--oc-gray-050); --oc-color-bg-inverse: var(--oc-gray-900); --oc-color-surface: var(--oc-white); --oc-color-border: var(--oc-gray-200); --oc-color-border-strong: var(--oc-gray-300); --oc-color-text: var(--oc-gray-900); --oc-color-text-muted: var(--oc-gray-600); --oc-color-text-inverse: var(--oc-white); --oc-color-action: var(--oc-orange-ink); --oc-color-action-hover: var(--oc-orange-800); --oc-color-link: var(--oc-cyan-ink); --oc-color-link-hover: var(--oc-cyan-800); --oc-color-focus: var(--oc-cyan-brand); --oc-color-danger: var(--oc-red-ink); --oc-color-success: var(--oc-green-ink); --oc-color-warning: var(--oc-amber-ink); --oc-color-info: var(--oc-cyan-ink); /* --- typography ------------------------------------------------------ Oswald: condensed, industrial — display and headlines. Inter: body and UI. Barlow Condensed: navigation. Substitute for the licensed DIN Next. Each stack degrades to system fonts, so the site is fully usable before the webfont files land in wwwroot/fonts. --------------------------------------------------------------------- */ --oc-font-display: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", sans-serif; --oc-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --oc-font-nav: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif; --oc-font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace; /* Modular scale, ratio 1.25, base 1rem. Fluid where it earns it. */ --oc-text-xs: 0.75rem; /* 12px */ --oc-text-sm: 0.875rem; /* 14px */ --oc-text-base: 1rem; /* 16px */ --oc-text-lg: 1.125rem; /* 18px */ --oc-text-xl: 1.375rem; /* 22px */ --oc-text-2xl: 1.75rem; /* 28px */ --oc-text-3xl: clamp(2rem, 1.6rem + 1.6vw, 2.5rem); --oc-text-4xl: clamp(2.5rem, 1.9rem + 2.6vw, 3.5rem); --oc-text-5xl: clamp(3rem, 2rem + 4.4vw, 4.5rem); --oc-weight-normal: 400; --oc-weight-medium: 500; --oc-weight-semibold: 600; --oc-weight-bold: 700; --oc-leading-tight: 1.1; --oc-leading-snug: 1.3; --oc-leading-normal: 1.6; --oc-leading-relaxed: 1.75; --oc-tracking-tight: -0.015em; --oc-tracking-normal: 0; --oc-tracking-wide: 0.04em; --oc-tracking-caps: 0.08em; /* --- spacing, on a 4px grid ------------------------------------------ */ --oc-space-0: 0; --oc-space-1: 0.25rem; --oc-space-2: 0.5rem; --oc-space-3: 0.75rem; --oc-space-4: 1rem; --oc-space-5: 1.5rem; --oc-space-6: 2rem; --oc-space-7: 3rem; --oc-space-8: 4rem; --oc-space-9: 6rem; --oc-space-10: 8rem; /* Vertical rhythm for marketing sections. */ --oc-section-y: clamp(3rem, 2rem + 4vw, 6rem); /* --- layout ---------------------------------------------------------- */ --oc-container-max: 75rem; /* 1200px */ --oc-container-narrow: 45rem; /* 720px — long-form reading measure */ --oc-container-pad: clamp(1rem, 0.5rem + 2vw, 2rem); --oc-header-height: 4.75rem; /* --- radii ----------------------------------------------------------- */ --oc-radius-sm: 0.1875rem; --oc-radius-md: 0.375rem; --oc-radius-lg: 0.625rem; --oc-radius-xl: 1rem; --oc-radius-pill: 62.4375rem; /* --- elevation ------------------------------------------------------- */ --oc-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.08); --oc-shadow-md: 0 2px 4px rgb(0 0 0 / 0.06), 0 4px 12px rgb(0 0 0 / 0.10); --oc-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.06), 0 12px 28px rgb(0 0 0 / 0.12); --oc-shadow-focus: 0 0 0 3px rgb(0 174 239 / 0.40); /* --- motion ---------------------------------------------------------- */ --oc-duration-fast: 120ms; --oc-duration-base: 200ms; --oc-duration-slow: 320ms; --oc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --oc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* --- z-index scale. Named, so stacking bugs are debuggable ----------- */ --oc-z-base: 0; --oc-z-raised: 10; --oc-z-sticky: 100; --oc-z-header: 200; --oc-z-drawer: 300; --oc-z-modal: 400; --oc-z-toast: 500; /* --- focus ----------------------------------------------------------- */ --oc-focus-width: 3px; --oc-focus-offset: 2px; } /* Breakpoints, for reference. CSS custom properties cannot be used inside a media query, so these values are written literally throughout. Keep them in sync with this list — it is the contract. 40rem 640px sm — single to two column 64rem 1024px md — sidebar/nav breakpoint 80rem 1280px lg — max container plus comfortable gutters */ @media (prefers-reduced-motion: reduce) { :root { --oc-duration-fast: 0ms; --oc-duration-base: 0ms; --oc-duration-slow: 0ms; } }