/**
* Lyrid Design Tokens — Web (CSS)
*
* Generated from tokens.json. Do not edit directly — edit the source.
*
* Usage:
*
* ...
* .my-card {
* background: var(--surface-card);
* border: 0.5px solid var(--border-hairline);
* border-radius: var(--radius-md);
* padding: var(--space-5);
* }
*
* The Lyrid brand spec (BRAND_SPEC.md) is the source of truth for
* how these tokens should be combined. Don't invent ad-hoc colors.
*/
/* Fonts loaded from Google Fonts in the document :
*
*
*
*/
:root {
/* ============================================================
COLOR — Surfaces (the canvas)
============================================================ */
--surface-page: #FAFAF7;
--surface-card: #FFFFFF;
--surface-muted: #F4F4F0;
--surface-modal: #FFFFFF;
--surface-inverse: #0F0F0E;
/* ============================================================
COLOR — Text (the voice)
============================================================ */
--text-primary: #0F0F0E;
--text-secondary: #5C5C57;
--text-muted: #9A9A93;
--text-on-brand: #E8C547;
--text-on-primary: #FFFFFF;
--text-inverse: #FAFAF7;
/* ============================================================
COLOR — Brand (the signal)
============================================================ */
--brand-primary: #1B3A5B;
--brand-primary-hover: #244A70;
--brand-primary-active: #152F4B;
--brand-secondary: #E8C547;
--brand-tint: #EAF0F7;
--brand-tint-hover: #D6E3F0;
/* ============================================================
COLOR — Borders
============================================================ */
--border-hairline: #EAEAE5;
--border-strong: #D4D4CD;
--border-focus: rgba(27, 58, 91, 0.30);
/* ============================================================
COLOR — Data semantics (restrained, never bright)
============================================================ */
--data-positive: #2D7A3E;
--data-positive-surface: #EAF3EE;
--data-negative: #A33B2A;
--data-negative-surface: #F7EAE7;
--data-warning: #A87532;
--data-warning-surface: #F5EFE3;
--data-live: #1A5490;
--data-live-surface: #E5EEF7;
/* ============================================================
COLOR — Tier indicators (Elite/Strong/Solid)
============================================================ */
--tier-elite-fill: #E5EEF7;
--tier-elite-text: #1A5490;
--tier-strong-fill: #EAF3EE;
--tier-strong-text: #2D7A3E;
--tier-solid-fill: #F5EFE3;
--tier-solid-text: #A87532;
/* ============================================================
TYPOGRAPHY — Families
============================================================ */
--font-serif: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
--font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, Menlo, Monaco, monospace;
/* ============================================================
TYPOGRAPHY — Weights
============================================================ */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600; /* Reserved for serif headers only */
/* ============================================================
TYPOGRAPHY — Sizes
============================================================ */
--size-display: 36px;
--size-h1: 28px;
--size-h2: 22px;
--size-h3: 18px;
--size-body: 16px;
--size-body-sm: 14px;
--size-caption: 13px;
--size-eyebrow: 11px;
--size-mono-lg: 18px;
--size-mono-md: 14px;
--size-mono-sm: 12px;
/* ============================================================
TYPOGRAPHY — Line heights
============================================================ */
--line-display: 1.1;
--line-h1: 1.2;
--line-h2: 1.3;
--line-h3: 1.4;
--line-body: 1.6;
--line-body-sm: 1.5;
--line-caption: 1.4;
--line-eyebrow: 1.4;
/* ============================================================
TYPOGRAPHY — Letter spacing
============================================================ */
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-loose: 0.04em;
--tracking-eyebrow: 0.12em;
/* ============================================================
SPACING — 8px base grid
============================================================ */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 40px;
--space-8: 64px;
/* ============================================================
RADII
============================================================ */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-pill: 999px;
/* ============================================================
ELEVATION — used sparingly
============================================================ */
--elevation-rest: none;
--elevation-hover: 0 1px 2px rgba(0, 0, 0, 0.04);
--elevation-modal: 0 8px 24px rgba(0, 0, 0, 0.10);
--elevation-focus: 0 0 0 3px rgba(27, 58, 91, 0.15);
/* ============================================================
MOTION
============================================================ */
--duration-instant: 100ms;
--duration-fast: 200ms;
--duration-medium: 300ms;
--duration-slow: 500ms;
--easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
--easing-linear: linear;
}
/* ============================================================
GLOBAL RESETS — applied to every page that imports tokens
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-family: var(--font-sans);
font-size: var(--size-body);
line-height: var(--line-body);
color: var(--text-primary);
background: var(--surface-page);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-serif);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-tight);
margin: 0;
}
h1 { font-size: var(--size-h1); line-height: var(--line-h1); }
h2 { font-size: var(--size-h2); line-height: var(--line-h2); font-weight: var(--weight-medium); }
h3 { font-size: var(--size-h3); line-height: var(--line-h3); font-weight: var(--weight-medium); }
p {
margin: 0;
}
a {
color: var(--brand-primary);
text-decoration: none;
transition: color var(--duration-fast) var(--easing-standard);
}
a:hover {
color: var(--brand-primary-hover);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Tabular figures for any inline number — keeps columns aligned */
.lyrid-num,
[data-num] {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
/* Eyebrow label — small caps with tracking */
.lyrid-eyebrow {
font-size: var(--size-eyebrow);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
font-weight: var(--weight-medium);
color: var(--text-secondary);
}
/* Focus ring — used on every interactive element */
:focus-visible {
outline: none;
box-shadow: var(--elevation-focus);
border-radius: var(--radius-sm);
}
/* Selection color */
::selection {
background: var(--brand-tint);
color: var(--brand-primary);
}
/* ===========================================================
LYRID BUTTON SYSTEM
Three variants only:
.lyrid-btn.primary → solid brand blue, single most-important action
.lyrid-btn.secondary → outlined brand blue, non-destructive actions
.lyrid-btn.ghost → text-only brand blue, tertiary actions
Sizes: default 36px tall; .sm = 30px; .lg = 44px (touch-friendly mobile)
=========================================================== */
.lyrid-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
line-height: 1;
letter-spacing: 0;
height: 36px;
padding: 0 16px;
border-radius: var(--radius-sm);
cursor: pointer;
transition:
background var(--duration-fast) var(--easing-standard),
border-color var(--duration-fast) var(--easing-standard),
color var(--duration-fast) var(--easing-standard);
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.lyrid-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.lyrid-btn.sm { height: 30px; padding: 0 12px; font-size: 12px; }
.lyrid-btn.lg { height: 44px; padding: 0 22px; font-size: 14px; }
/* Primary — solid brand blue, white text */
.lyrid-btn.primary {
background: var(--brand-primary);
color: var(--text-on-primary);
border: 1px solid var(--brand-primary);
}
.lyrid-btn.primary:hover:not(:disabled) {
background: var(--brand-primary-hover);
border-color: var(--brand-primary-hover);
}
.lyrid-btn.primary:active:not(:disabled) {
background: var(--brand-primary-active);
border-color: var(--brand-primary-active);
}
/* Secondary — outlined brand blue (visible against off-white) */
.lyrid-btn.secondary {
background: var(--surface-card);
color: var(--brand-primary);
border: 1px solid var(--brand-primary);
}
.lyrid-btn.secondary:hover:not(:disabled) {
background: var(--brand-tint);
}
.lyrid-btn.secondary:active:not(:disabled) {
background: var(--brand-tint-hover);
}
/* Ghost — text-only with subtle border, brand blue text */
.lyrid-btn.ghost {
background: transparent;
color: var(--brand-primary);
border: 1px solid var(--border-strong);
}
.lyrid-btn.ghost:hover:not(:disabled) {
background: var(--brand-tint);
border-color: var(--brand-primary);
}
.lyrid-btn.ghost:active:not(:disabled) {
background: var(--brand-tint-hover);
}
/* Danger — only for confirmation flows (delete, reset) */
.lyrid-btn.danger {
background: var(--surface-card);
color: var(--data-negative);
border: 1px solid var(--data-negative);
}
.lyrid-btn.danger:hover:not(:disabled) {
background: var(--data-negative-surface);
}
/* Icon-only round button (for tab bar / toolbar) */
.lyrid-btn.icon {
width: 36px;
padding: 0;
border-radius: var(--radius-sm);
}