/* ------------------------------------------------------------------ Webority Design — global design tokens CSS custom properties consumed by every component module. ------------------------------------------------------------------ */ :root { /* ================================================================ PRIMARY (Brand Purple) ================================================================ */ --color-primary-100: #6200EE; /* core brand purple */ --color-primary-50: #B180F7; --color-primary-30: #D0B3FA; --color-primary-20: #E0CCFC; --color-primary-15: #E8D9FD; --color-primary-10: #F0E6FE; --color-primary-5: #F7F2FE; /* Button interaction states */ --color-primary-hover: #4A00B4; /* primary button hover */ --color-primary-pressed: #3B028D; /* primary button active */ --color-secondary-hover: #6200EE; /* secondary button hover */ --color-secondary-pressed:#4A00B4; /* secondary button active */ /* ================================================================ TEXT SCALE (cool greys + navy) ================================================================ */ --color-heading: #071437; /* H1 / page titles */ --color-text-1: #252F4A; /* primary body */ --color-text-2: #4B5675; /* secondary body */ --color-text-3: #78829D; /* tertiary / captions */ --color-text-4: #99A1B7; /* muted */ --color-text-5: #C4CADA; /* very muted */ --color-white: #FFFFFF; /* ================================================================ NEUTRAL UI (borders + light surfaces) ================================================================ */ --color-dark-border: #EBEDF3; --color-light-border: #F4F6F8; --color-dark-bg: #F5F6FA; /* deeper light bg */ --color-light-bg: #F9FBFC; /* very light bg */ /* ================================================================ TEXT + NEUTRALS — DARK surfaces Use these on the project's #050505 page canvas. Mirrors the light text scale at parallel contrast levels. Documented on the /design-system page (TEXT_SCALE_DARK / NEUTRAL_UI_DARK). ================================================================ */ --color-d-heading: #FFFFFF; /* Heading on dark */ --color-d-text-1: #F0F0F2; /* primary body on dark */ --color-d-text-2: #C4C6CC; /* secondary body */ --color-d-text-3: #8C8E94; /* tertiary / captions */ --color-d-text-4: #5C5D62; /* muted */ --color-d-text-5: #333438; /* faint */ --color-d-border: #1E1F22; /* Dark Border — dividers */ --color-d-border-soft: #131316; /* Light Border — subtle */ --color-d-bg: #15151A; /* Dark BG — cards / panels */ --color-d-bg-soft: #0A0A0C; /* Light BG — inset lift */ /* ================================================================ STATUS — INFO (blue) ================================================================ */ --color-info-active: #056EE9; --color-info-100: #1B84FF; --color-info-50: #8DC2FF; --color-info-30: #BBDBFF; --color-info-20: #D1E6FF; --color-info-10: #E9F3FF; --color-info-5: #F3F9FF; /* ================================================================ STATUS — SUCCESS (green) ================================================================ */ --color-success-active: #04B440; --color-success-100: #17C653; --color-success-50: #8BE3A9; --color-success-30: #BAEECC; --color-success-20: #D1F4DD; --color-success-10: #E8FAEE; --color-success-5: #F3FCF6; /* ================================================================ STATUS — WARNING (amber) ================================================================ */ --color-warning-active: #DFA000; --color-warning-100: #F6B100; --color-warning-50: #FBD880; --color-warning-30: #FDE8B3; --color-warning-20: #FDEFCC; --color-warning-10: #FFF8E6; --color-warning-5: #FEFBF2; /* ================================================================ STATUS — ERROR (red) ================================================================ */ --color-error-active: #E82646; --color-error-100: #F8285A; --color-error-50: #FC94AD; --color-error-30: #FDBFCE; --color-error-20: #FED4DE; --color-error-10: #FFEAEF; --color-error-5: #FEF4F6; /* ================================================================ LEGACY ALIASES — kept so existing components keep working. All map to canonical tokens above. Use the new tokens for any new code. ================================================================ */ /* Site surface */ --color-bg: #050505; /* page canvas — used everywhere */ --color-bg-deep: #020202; /* slightly deeper accent */ /* Foreground on dark */ --color-fg: var(--color-white); --color-fg-soft: var(--color-primary-5); /* italic accents */ --color-fg-mute: rgba(255, 255, 255, 0.55); --color-fg-faint: rgba(255, 255, 255, 0.32); /* Light surface (works section, design-system page) */ --color-cream: var(--color-primary-5); /* #F7F2FE */ --color-cream-deep: var(--color-primary-10); /* #F0E6FE */ --color-ink: var(--color-heading); /* cool navy on cream */ --color-ink-mute: var(--color-text-2); --color-ink-faint: var(--color-text-5); --color-divider: var(--color-dark-border); /* Brand accent (gradient ramp) */ --color-flame-bright: var(--color-primary-100); --color-flame-deep: var(--color-primary-pressed); --color-flame-shadow: var(--color-primary-pressed); /* Grid line */ --color-grid: rgba(255, 255, 255, 0.045); /* ================================================================ TYPE FAMILIES Single-family system: Instrument Sans for everything. All four tokens alias the same family so existing components stay valid without edits. Italic-tagged elements render Instrument Sans italic (loaded via @fontsource/instrument-sans 400-italic in index.css). ================================================================ */ --font-display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* === Italic accent === - --font-italic : default italic accent — resolves to Instrument Sans italic so generic `font-style: italic` reads in the same family as the rest of the page. - --font-italic-display: high-contrast serif accent — IvyPresto Display, registered via @font-face in src/styles/ivypresto.css from the .otf files in /public/fonts/ivypresto. The supplied files are roman-only; browsers synthesize italic when needed. */ --font-italic: var(--font-display); --font-italic-display: "IvyPresto Display", "IvyPresto Headline", "Georgia", "Times New Roman", serif; --font-ui: var(--font-display); --font-mono: var(--font-display); /* === Consolidated type scale (minimum-size policy) === Source of truth for every font-size in the project. The pre- consolidation codebase used 40+ distinct font-size values (mostly one-off clamp() expressions). Target: the seven tokens below. Visualised + documented on the /design-system page. New code should reference one of these tokens; refactor old `font-size: clamp(...)` literals to the nearest token as you touch them. */ --t-hero: clamp(2.5rem, 1.25rem + 5vw, 7rem); /* per-page hero heading only — slightly larger than H1 */ --t-h1: clamp(2.25rem, 1rem + 5vw, 6rem); /* main section titles (non-hero) */ --t-h2: clamp(1.5rem, 2.4vw, 2.25rem); /* subsection / card titles */ --t-lead: clamp(1.0625rem, 1.5vw, 1.375rem); /* subheading copy */ --t-body: 1rem; /* default paragraph + descriptions */ --t-label: 0.875rem; /* metadata, nav, ui labels */ --t-micro: 0.75rem; /* fine print, eyebrows */ /* === Legacy aliases — kept for unmigrated components. Prefer the --t-* tokens above in new code. The old hero-only display size has been folded into --t-h1 so the hero wordmark sits at the same scale as every other section title — one fewer size to maintain. */ --size-hero-name: var(--t-h1); --size-tagline: clamp(1.5rem, 2.6vw, 2.625rem); --size-nav: var(--t-micro); --size-micro: var(--t-micro); /* === Spacing === pad-x: page gutter (fluid 24px → 64px) pad-y: small vertical chrome padding section-pad-y: vertical breathing between major sections, fluid 48px → 128px so spacing feels right at 1024 / 1440 / 1920 viewports. section-gap: tighter gap between visually-related sections */ --pad-x: clamp(1.25rem, 3vw, 4rem); --pad-y: 1.5rem; --section-pad-y: clamp(3rem, 6vw, 8rem); --section-gap: clamp(2rem, 4vw, 5rem); /* === Letter spacing === */ --tracking-wide: 0.16em; --tracking-tight: -0.045em; --tracking-tagline: -0.022em; /* === Motion === */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 200ms; --dur-base: 480ms; --dur-slow: 900ms; }