/* ========================================================= GairDotDev — Design Tokens Source of truth for brand color + type variables. Light is the default theme; dark is opted into via . JS toggles this attribute. ========================================================= */ :root, :root[data-theme="light"] { /* Co-primary brand colors (equal weight — never call one "the accent") */ --color-green: #20623D; --color-purple: #4C00A4; /* Brand ramps — deep (shade) for pressed/hover, tint for soft fills & chips. Tints are tuned to sit on the cream background without muddiness. */ --color-green-deep: #184A2E; --color-green-tint: #E0EAE2; --color-purple-deep: #390079; --color-purple-tint: #E8E0F3; /* Surfaces & text */ --color-bg: #F1E8DB; --color-bg-raised: #FAF5EC; --color-text: #4A4438; --color-muted: #6D6658; --color-border: #DDD3C0; /* Text color to use ON TOP of green/purple fills */ --color-on-brand: #F1E8DB; /* Semantic states — meanings stay fixed across every product */ --color-success: #20623D; --color-success-tint: #E0EAE2; --color-info: #1D5F91; --color-info-tint: #DDEAF3; --color-warning: #765500; --color-warning-tint: #F2E8C9; --color-danger: #9E2937; --color-danger-tint: #F3DEDF; color-scheme: light; } :root[data-theme="dark"] { --color-green: #479862; --color-purple: #9271E3; --color-green-deep: #2E6B45; --color-green-tint: #20312A; --color-purple-deep: #5B3CA6; --color-purple-tint: #2A2440; --color-bg: #1B1A17; --color-bg-raised: #232220; --color-text: #E3DDD0; --color-muted: #908A7A; --color-border: #34322C; --color-on-brand: #1B1A17; --color-success: #67B984; --color-success-tint: #20312A; --color-info: #69AEE8; --color-info-tint: #1F2E3A; --color-warning: #D6AC4E; --color-warning-tint: #342D1E; --color-danger: #F08088; --color-danger-tint: #3B2225; color-scheme: dark; } :root { /* Typography — Y2K Revival pairing */ --font-heading: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; --font-body: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif; /* Type scale (matches the Brand Guidelines doc Typesetting table) */ --fs-title: 60px; --fs-heading: 32px; --fs-subtitle: 24px; --fs-section: 16px; --fs-subheading: 12px; --fs-body: 16px; --fs-quote: 15px; --fs-caption: 12px; /* Spacing — 4px base unit, with 8px as the common rhythm */ --space-0: 0.25rem; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; /* Corners — pills remain component-specific */ --radius-xs: 4px; --radius-sm: 6px; --radius-control: 8px; --radius: 12px; --radius-lg: 16px; /* Functional motion. Experiential surfaces may define their own motion. */ --motion-fast: 120ms; --motion-standard: 180ms; --motion-expressive: 360ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2); --max-width: 1120px; --measure-text: 68ch; /* ---- Added by the design system (v2) — all non-breaking ---- */ /* Type scale, expanded. Existing --fs-* are unchanged; these fill the gaps. Use --text-* for product UI; the legacy --fs-* remain for the marketing site. */ --text-xs: 0.75rem; /* 12px — captions, eyebrows */ --text-sm: 0.875rem; /* 14px — secondary UI, table cells, helper text */ --text-base: 1rem; /* 16px — body, default control text */ --text-md: 1.125rem; /* 18px — lead paragraphs */ --text-lg: 1.25rem; /* 20px — the step that was missing (subsection titles) */ --text-xl: 1.5rem; /* 24px — subtitles */ --text-2xl: 2rem; /* 32px — headings */ --text-3xl: 2.5rem; /* 40px — page titles in apps */ --text-4xl: 3.75rem; /* 60px — marketing display */ /* Line-height — unitless so it scales with font-size */ --leading-tight: 1.15; /* display & headings */ --leading-snug: 1.3; /* subheadings, control labels */ --leading-normal: 1.5; /* dense UI text */ --leading-relaxed: 1.6; /* body copy */ /* Font weight. Space Grotesk is variable 500–700; Atkinson ships 400 only. Never request a weight a face does not have — body stays 400. */ --weight-body: 400; /* Atkinson — the only weight it has */ --weight-medium: 500; /* Space Grotesk medium */ --weight-bold: 700; /* Space Grotesk bold */ /* Letter-spacing */ --tracking-tight: -0.02em; /* wordmark, large headings */ --tracking-wide: 0.08em; /* eyebrows, all-caps labels */ /* Spacing, extended. Existing --space-0..5 unchanged; these add the larger steps app layouts need. (Note: --space-0 is 4px, not zero — legacy name.) */ --space-6: 6rem; /* 96px — section padding on large screens */ --space-7: 8rem; /* 128px — hero / page top-bottom */ /* Border width */ --border-thin: 1px; --border-thick: 2px; /* Focus ring — one token so every component focuses identically */ --focus-ring: 3px solid var(--color-purple); --focus-offset: 3px; /* Elevation. The parent brand is flat; these are intentionally restrained and exist mainly to lift overlays (menus, dialogs, toasts) off the page. */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.10); --shadow-lg: 0 12px 32px rgba(0,0,0,0.16); /* Z-index scale — never hand-pick magic numbers in a prototype */ --z-base: 1; --z-sticky: 50; /* matches the existing .site-header */ --z-dropdown: 100; --z-overlay: 200; /* modal scrim */ --z-modal: 210; --z-popover: 300; --z-toast: 400; --z-tooltip: 500; /* Container widths for app layouts */ --width-prose: 68ch; /* reading measure (alias of --measure-text) */ --width-form: 480px; /* single-column forms, auth screens */ --width-content: 1120px; --width-sidebar: 260px; /* ========================================================= COLOR ROLES — the important change. Green and purple stay co-equal brand colors, but each owns a JOB so a prototype (or Claude) never has to guess: GREEN = primary / affirmative actions, primary fills PURPLE = links, navigation, selected & focused states These reference the theme vars above, so they auto-adapt to light/dark with no extra definitions. ========================================================= */ --action: var(--color-green); --action-hover: var(--color-green-deep); --action-tint: var(--color-green-tint); --on-action: var(--color-on-brand); --link: var(--color-purple); --link-hover: var(--color-purple-deep); --selected: var(--color-purple); --selected-tint: var(--color-purple-tint); /* Semantic component tokens — point components at these, not raw colors, so a product can re-skin by overriding a handful of vars. */ --surface-page: var(--color-bg); /* app background */ --surface-card: var(--color-bg-raised); /* cards, panels */ --surface-sunken: var(--color-bg); /* wells, inset fields on raised cards */ --surface-overlay: var(--color-bg-raised);/* menus, dialogs, toasts */ --field-bg: var(--color-bg-raised); --field-border: var(--color-border); --field-border-focus: var(--color-purple); --field-text: var(--color-text); --field-placeholder: var(--color-muted); --control-radius: var(--radius-control); --panel-radius: var(--radius); }