/* SmartRoster — shared tokens * Lifted from marketing/style.css + app/public/static/css/app.css * so decks, mockups, and prototypes can vary on tokens, not styles. * Fonts are loaded via in each page's , not @import here, to * avoid duplicate font requests and to keep CSS off the critical render * waterfall. */ :root { /* ── Warm-stone neutral scale ── */ --stone-50: oklch(0.97 0.005 70); --stone-100: oklch(0.94 0.008 70); --stone-200: oklch(0.88 0.010 70); --stone-300: oklch(0.80 0.012 65); --stone-500: oklch(0.55 0.015 60); --stone-700: oklch(0.35 0.020 55); --stone-900: oklch(0.18 0.020 50); /* ── Accents (brand + semantic) ── * amber = primary brand accent * sage = success / ok * rose = error / overbook / critical * clay = warm secondary * slate = cool secondary * indigo = AI / ML surfaces in the app */ --amber: oklch(0.72 0.16 70); --amber-dim: oklch(0.72 0.16 70 / 0.10); --sage: oklch(0.62 0.08 155); --sage-dim: oklch(0.62 0.08 155 / 0.10); --rose: oklch(0.58 0.12 15); --rose-dim: oklch(0.58 0.12 15 / 0.10); --clay: oklch(0.60 0.10 45); --clay-dim: oklch(0.60 0.10 45 / 0.10); --slate: oklch(0.55 0.04 250); --slate-dim: oklch(0.55 0.04 250 / 0.10); --indigo: oklch(0.52 0.12 265); --indigo-dim: oklch(0.52 0.12 265 / 0.10); /* ── Role palette (customer app) ── */ --role-vet: var(--sage); --role-nurse: oklch(0.58 0.12 230); --role-aa: var(--amber); --role-reception: oklch(0.62 0.08 280); --role-admin: var(--rose); --role-management: oklch(0.45 0.06 260); --role-locum: var(--stone-500); /* ── Semantic surface + text ── */ --bg: var(--stone-50); /* default warm page */ --bg-2: var(--stone-100); /* alternating band */ --bg-3: var(--stone-200); /* inset / hover */ --surface: #fff; /* cards, inputs */ --text: var(--stone-900); --text-2: var(--stone-500); --text-3: var(--stone-300); --border: var(--stone-200); --border-2: var(--stone-300); /* ── Shape ── */ --r: 10px; --r-sm: 6px; /* ── Shadows (warm, low) ── */ --shadow-card: 0 8px 32px oklch(0.18 0.02 50 / 0.06); --shadow-hero: 0 32px 64px oklch(0.18 0.02 50 / 0.20); --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.12); /* ── Type families ── */ --font: 'Red Hat Text', system-ui, -apple-system, Segoe UI, sans-serif; --font-display: 'Red Hat Display', system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace; /* ── Type scale (display / UI) ── */ --fs-eyebrow: 11px; /* mono, UPPERCASE, amber, 0.06em tracking */ --fs-micro: 10px; /* pill labels, meta */ --fs-meta: 12px; --fs-body: 14px; /* default UI body */ --fs-body-lg: 15px; /* marketing body */ --fs-hero-sub: clamp(1rem, 1.4vw, 1.05rem); --fs-h3: 15px; --fs-h2: clamp(1.4rem, 2.8vw, 2rem); --fs-h1: clamp(1.6rem, 3vw, 2.2rem); --fs-hero: clamp(2.4rem, 4.5vw, 3.6rem); --lh-tight: 1.06; --lh-snug: 1.15; --lh-body: 1.6; --lh-loose: 1.7; --track-hero: -0.04em; --track-h: -0.03em; --track-ui: -0.02em; --track-eyebrow: 0.06em; --sidebar-w: 240px; --topbar-h: 56px; } /* ── Semantic text classes ── */ .h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 800; letter-spacing: var(--track-h); line-height: var(--lh-snug); color: var(--text); } .h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--track-h); line-height: var(--lh-snug); color: var(--text); } .h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; color: var(--text); } .hero-display { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 800; letter-spacing: var(--track-hero); line-height: var(--lh-tight); color: var(--text); } .p { font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--text-2); } .p-lg { font-family: var(--font); font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--text-2); } .eyebrow-text { font-family: var(--mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--amber); background: var(--amber-dim); padding: 3px 8px; border-radius: 4px; display: inline-block; } .mono { font-family: var(--mono); font-size: var(--fs-meta); color: var(--text-2); } .micro { font-family: var(--mono); font-size: var(--fs-micro); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; }