/* kyra-tokens.css - VERBATIM COPY. Do not edit this file in place. Source of truth: 03_Reference/Kyra Brand Assets/tokens/kyra-tokens.css Copied 2026-07-19. To change a token, change it at the source and re-copy, so this dashboard never becomes a second competing definition of the brand. Every style in app.css is built against these variables. No hex value and no font-family literal may appear anywhere else in this package; that rule is enforced mechanically by test/house-style.test.mjs. */ /* ========================================================================== KYRA AI - Design Tokens (CSS Custom Properties) Version: 0.1 INTERIM · Generated: 2026-07-19 Source of truth: 03_Reference/Kyra Brand Assets/KYRA-BRAND-BRIEF.md -------------------------------------------------------------------------- STATUS LOCKED : color ramps, brand anchors, light-mode-first, logo mark INTERIM : typography families (final display face still being chosen) PROVISIONAL: family names "Petrol" / "Azure" pending confirmation Do not invent colors outside these ramps. If you need a value that is not here, ask rather than approximating. ========================================================================== */ :root { /* ---------- PETROL · primary brand hue (from the K mark) --------------- */ /* Higher number = darker. Brand anchor is 800, sampled from the logo. */ --kyra-petrol-50: #F0F6F9; --kyra-petrol-100: #D8E7EE; --kyra-petrol-200: #AEC9D6; --kyra-petrol-300: #7BA5B9; --kyra-petrol-400: #48819A; --kyra-petrol-500: #256A87; --kyra-petrol-700: #0A6389; --kyra-petrol-800: #064D6C; /* ★ BRAND · the mark */ --kyra-petrol-900: #04374E; --kyra-petrol-950: #021F2C; /* ---------- AZURE · accent hue (from the sparkle + leg tip) ------------ */ --kyra-azure-50: #E7F5FE; --kyra-azure-100: #C5E9FD; --kyra-azure-200: #8FD3FB; --kyra-azure-300: #52BCF8; --kyra-azure-400: #1FA8F5; --kyra-azure-500: #019EF4; /* ★ ACCENT · the sparkle */ --kyra-azure-600: #0284CE; --kyra-azure-700: #0568A3; --kyra-azure-800: #094F79; --kyra-azure-900: #0B3F5E; /* ---------- INK · cool neutrals for text, borders, surfaces ------------ */ --kyra-ink-50: #F7F9FA; --kyra-ink-100: #EDF1F3; --kyra-ink-200: #DCE5EA; --kyra-ink-300: #C0CBD3; --kyra-ink-400: #93A3AE; --kyra-ink-500: #6E8291; --kyra-ink-600: #52626D; --kyra-ink-700: #41535F; --kyra-ink-800: #2A343A; --kyra-ink-900: #14232C; /* ★ body text */ --kyra-ink-950: #0D1418; /* ---------- SEMANTIC · status ------------------------------------------ */ --kyra-success: #1B7742; --kyra-success-bg: #F2FAF5; --kyra-warning: #C97A19; --kyra-warning-bg: #FEF7EC; --kyra-danger: #B4361F; --kyra-danger-bg: #FEF6F6; --kyra-info: var(--kyra-azure-500); --kyra-info-bg: var(--kyra-azure-50); /* ---------- SEMANTIC · surfaces + text (LIGHT MODE ONLY) --------------- */ /* Kyra is light-mode-first by decision. Do not ship a dark theme unless explicitly asked. The dark app-icon variant is retired. */ --kyra-bg: #FBFCFD; --kyra-surface: #FFFFFF; --kyra-surface-sunk: var(--kyra-ink-50); --kyra-surface-brand: var(--kyra-petrol-50); --kyra-border: var(--kyra-ink-200); --kyra-border-strong: var(--kyra-ink-300); --kyra-text: var(--kyra-ink-900); --kyra-text-muted: var(--kyra-ink-700); --kyra-text-subtle: var(--kyra-ink-500); --kyra-text-on-brand: #FFFFFF; --kyra-link: var(--kyra-azure-700); /* ---------- TYPOGRAPHY · INTERIM --------------------------------------- */ /* Readability is the governing constraint. Sans-serif throughout. A display face for large headings may be added later; if so it will change ONLY --kyra-font-display. Build against the variables, never hard-code a family name. */ --kyra-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --kyra-font-display: 'Inter Tight', 'Inter', system-ui, sans-serif; --kyra-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* Type scale · 1.25 major third, 16px base */ --kyra-text-xs: 0.75rem; /* 12px */ --kyra-text-sm: 0.875rem; /* 14px */ --kyra-text-base: 1rem; /* 16px */ --kyra-text-lg: 1.125rem; /* 18px */ --kyra-text-xl: 1.375rem; /* 22px */ --kyra-text-2xl: 1.75rem; /* 28px */ --kyra-text-3xl: 2.1875rem; /* 35px */ /* Readability-driven. Do not tighten these without a reason. */ --kyra-leading-tight: 1.25; --kyra-leading-normal: 1.6; /* body default, generous on purpose */ --kyra-leading-loose: 1.75; --kyra-measure: 68ch; /* max line length for body copy */ --kyra-weight-normal: 400; --kyra-weight-medium: 500; --kyra-weight-semibold: 600; --kyra-weight-bold: 700; /* Headings stay only mildly tight. Avoid aggressive negative tracking, it is the fastest way to hurt scan-reading. */ --kyra-tracking-heading: -0.015em; --kyra-tracking-normal: 0; --kyra-tracking-caps: 0.14em; /* ---------- SPACING · 4px base ----------------------------------------- */ --kyra-space-1: 0.25rem; --kyra-space-2: 0.5rem; --kyra-space-3: 0.75rem; --kyra-space-4: 1rem; --kyra-space-5: 1.5rem; --kyra-space-6: 2rem; --kyra-space-7: 3rem; --kyra-space-8: 4rem; /* ---------- RADII ------------------------------------------------------ */ --kyra-radius-sm: 6px; --kyra-radius-md: 10px; --kyra-radius-lg: 14px; --kyra-radius-pill: 999px; /* ---------- ELEVATION · restrained, petrol-tinted ---------------------- */ --kyra-shadow-sm: 0 1px 2px rgba(6, 77, 108, 0.05); --kyra-shadow-md: 0 2px 8px rgba(6, 77, 108, 0.08); --kyra-shadow-lg: 0 6px 24px rgba(6, 77, 108, 0.11); } /* ========================================================================== ACCESSIBILITY NOTES (verified pairings) These combinations meet WCAG AA. Prefer them over improvising. ink-900 on bg / surface .................. AA, body default ink-700 on surface ....................... AA, muted body ink-500 on surface ....................... AA large text only white on petrol-800 ...................... AA white on azure-600 / azure-700 ........... AA petrol-800 on petrol-50 .................. AA azure-700 on white ....................... AA, use for links AVOID: azure-500 as text on white (fails AA at body size). Use azure-500 for fills, strokes, icons, and accents only. ========================================================================== */