/* ==========================================================================
Case Interview Labs — Design Tokens & Foundation Components
--------------------------------------------------------------------------
Phase 1 output. Owns: colour palette, type scale, spacing, radius,
animation timing, button system, hover utilities, focus rings, badges,
spinner, toast, empty-state, modal animation hooks.
Single source of truth. Phases 2-9 consume these tokens.
Companion JS mirror: public/design-tokens.js (same values as a JS object,
for future React Native / SwiftUI portability).
Phase 1 guarantee: adding this file to a page does NOT change its visuals.
Existing CSS keeps its hardcoded values until later Phases migrate them.
========================================================================== */
/* ==========================================================================
1. CSS CUSTOM PROPERTIES
========================================================================== */
:root {
/* ---- 1.1 Colour palette ---------------------------------------------- */
/* Greens — 6-step system (locked in Phase 0 § Pass 1 A) */
--color-green-primary: #1D9E75; /* CTAs, primary brand */
--color-green-hover: #0F6E56; /* Primary hover state */
--color-green-deepest: #085041; /* Deepest brand-green text */
--color-green-soft: #E1F5EE; /* Soft surface (badge bg, modal info bg) */
--color-green-mid: #9FE1CB; /* Mid surface (selected card border-bg) */
--color-green-lightest: #f0faf6; /* Lightest surface (intro box, featured row bg) */
/* Greys — collapsed from 11 to 7 */
--color-grey-222: #222; /* Primary text */
--color-grey-444: #444; /* Body text */
--color-grey-666: #666; /* Labels */
--color-grey-888: #888; /* Muted text */
--color-grey-aaa: #aaa; /* Very muted, cancel-button border */
--color-grey-e5: #e5e5e0; /* Borders, divider lines */
--color-grey-f5: #f5f5f0; /* Page background, soft surface bg */
--color-grey-f0: #f0f0ee; /* Even softer surface (badge.grey bg) */
/* Reds — destructive family */
--color-red-primary: #a32d2d; /* Destructive CTA, error text */
--color-red-hover: #821e1e; /* Destructive hover */
--color-red-light: #fdecea; /* Error bg, danger modal icon bg */
/* Ambers — warnings and notices (consolidated from 7 to 3) */
--color-amber-light: #fff3cd; /* Warn modal icon bg */
--color-amber-border: #ffe082; /* Notice card border, warning toast accent */
--color-amber-text: #8a6d0e; /* Warning text */
--color-score-mid: #BA7517; /* "Solid" score colour — semantic one-off */
/* Blues — DECISION GATE (Phase 1 Pass 1 A flagged this for review).
Currently used only on the PAYG credit pill in settings.html.
Kept as-is to preserve visuals; flagged for unification with green-tone
variants OR a deliberate blue family during settings.html rationalisation
in Phase 3. */
--color-blue-bg: #E0EEF7;
--color-blue-border: #A5C9E0;
--color-blue-text: #1D5A87;
/* Surface helpers */
--color-surface-white: #ffffff;
--color-surface-page: var(--color-grey-f5);
/* ---- 1.2 Type scale (7 tokens, Pass 1 B) ----------------------------- */
--text-heading-xl: 26px; /* Auth hero lockup */
--text-heading-lg: 22px; /* Page h1 */
--text-heading-md: 18px; /* Modal title, score-val */
--text-body-lg: 16px; /* Card heading, large body */
--text-body: 14px; /* Default body */
--text-body-sm: 13px; /* Labels, small body */
--text-caption: 12px; /* Footer, micro-copy */
/* Font weights — Archivo only */
--font-regular: 400;
--font-medium: 500;
--font-semibold: 600;
/* Line heights */
--leading-tight: 1.3; /* Headings */
--leading-body: 1.6; /* Body text, paragraphs */
--leading-caption: 1.5; /* Caption, small text */
/* Letter spacing */
--tracking-tight: -0.2px;
--tracking-normal: 0;
--tracking-wide: 0.5px; /* Badges, all-caps labels */
/* ---- 1.3 Spacing scale (locked in Phase 0 § 5.2) --------------------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
/* ---- 1.4 Border radius (locked in Phase 0 § 5.3) --------------------- */
--radius-sm: 8px; /* Inputs, buttons, hint buttons */
--radius-md: 12px; /* Cards, dropdown panels */
--radius-lg: 16px; /* Page container, modal box, top-level shells */
--radius-pill: 99px; /* Pill badges, full-round chips */
/* ---- 1.5 Animation timing (Pass 1 K) --------------------------------- */
--anim-fast: 0.15s; /* Hover transitions, micro-interactions */
--anim-medium: 0.3s; /* Modal opens, panel slides, dropdown expand */
--anim-slow: 0.6s; /* Decorative — waveform/diamond animations */
/* Standard easing curves */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Confident enter */
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Material standard */
--ease-in: cubic-bezier(0.4, 0, 1, 1); /* Quick exit */
/* ---- 1.6 Toast auto-dismiss timing (locked this session) ------------- */
--toast-duration-success: 3500ms;
--toast-duration-warning: 5000ms;
--toast-duration-info: 4000ms;
--toast-duration-error: 0ms; /* 0 = persistent, requires manual dismiss */
/* ---- 1.7 Z-index scale ----------------------------------------------- */
/* Defined as tokens so Phase 5 modal refactor doesn't have to hunt for
magic numbers across files. Existing inline values remain authoritative
until those files get migrated. */
--z-base: 1;
--z-nav: 100; /* Top bar */
--z-tooltip: 2000; /* Tutorial tooltip */
--z-modal: 4000; /* Standard modals */
--z-modal-top: 5000; /* Pricing modal (sits above others) */
--z-toast: 10000; /* Toasts above everything */
/* ---- 1.8 Focus ring -------------------------------------------------- */
--focus-ring: 0 0 0 2px var(--color-surface-white),
0 0 0 4px var(--color-green-primary);
--focus-outline: 2px solid var(--color-green-primary);
--focus-offset: 2px;
/* ---- 1.9 Shadow tokens ----------------------------------------------- */
--shadow-modal: 0 20px 60px rgba(0,0,0,0.2);
--shadow-toast: 0 8px 28px rgba(0,0,0,0.12);
--shadow-card: 0 2px 12px rgba(29,158,117,0.10); /* Brand-green tinted card */
}
/* ==========================================================================
2. FOCUS RINGS — keyboard-only, branded
--------------------------------------------------------------------------
:focus-visible fires for keyboard navigation, NOT mouse clicks. Mouse users
see zero change. Keyboard users get a branded green ring. Phase 1 = no
visible change for mouse users.
========================================================================== */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
border-radius: var(--radius-sm);
}
/* ==========================================================================
3. BUTTON SYSTEM (locked in Phase 0 § 5.4)
--------------------------------------------------------------------------
6 main variants (2 styles × 3 sizes) + 2 modifier overrides (cancel, destructive).
Heights are clean 8px multiples (32 / 40 / 48). Phase 2-9 page rollouts
replace ad-hoc button styling with these classes.
========================================================================== */
/* Shared base */
.btn-primary-sm, .btn-primary-md, .btn-primary-lg,
.btn-secondary-sm, .btn-secondary-md, .btn-secondary-lg {
font-family: 'Archivo', sans-serif;
font-weight: var(--font-medium);
border-radius: var(--radius-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
transition: background var(--anim-fast),
border-color var(--anim-fast),
color var(--anim-fast);
white-space: nowrap;
text-decoration: none;
box-sizing: border-box;
}
/* Primary style — filled green */
.btn-primary-sm,
.btn-primary-md,
.btn-primary-lg {
background: var(--color-green-primary);
border: none;
color: white;
}
.btn-primary-sm:hover,
.btn-primary-md:hover,
.btn-primary-lg:hover { background: var(--color-green-hover); }
/* Secondary style — outlined green */
.btn-secondary-sm,
.btn-secondary-md,
.btn-secondary-lg {
background: white;
border: 1.5px solid var(--color-green-primary);
color: var(--color-green-primary);
}
.btn-secondary-sm:hover,
.btn-secondary-md:hover,
.btn-secondary-lg:hover {
background: var(--color-green-primary);
color: white;
}
/* Sizes */
.btn-primary-sm, .btn-secondary-sm {
height: 32px;
padding: 0 var(--space-3);
font-size: var(--text-body-sm);
}
.btn-primary-md, .btn-secondary-md {
height: 40px;
padding: 0 var(--space-4);
font-size: var(--text-body);
}
.btn-primary-lg, .btn-secondary-lg {
height: 48px;
padding: 0 var(--space-5);
font-size: var(--text-body-lg);
}
/* Modifier — grey Cancel (escape-hatch buttons in modals) */
.btn-cancel {
background: white !important;
border: 1.5px solid var(--color-grey-aaa) !important;
color: var(--color-grey-666) !important;
}
.btn-cancel:hover {
background: white !important;
border-color: var(--color-grey-888) !important;
color: var(--color-grey-222) !important;
}
/* Modifier — red Destructive (irreversible actions) */
.btn-destructive {
background: var(--color-red-primary) !important;
border: none !important;
color: white !important;
}
.btn-destructive:hover { background: var(--color-red-hover) !important; }
/* Disabled state — applies to all variants */
[class*="btn-primary-"]:disabled,
[class*="btn-secondary-"]:disabled,
.btn-cancel:disabled,
.btn-destructive:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ==========================================================================
4. HOVER UTILITIES (locked in Phase 0 § 5.8)
--------------------------------------------------------------------------
Hover = clickable. Two styles:
- .hover-grey = picker tiles, dropdown items, navigation
- .hover-green = paid-action surfaces (pricing rows only)
Cursor is pointer in both. Phase 3-5 migrates existing cards to these.
========================================================================== */
.hover-grey {
border: 1px solid var(--color-grey-e5);
cursor: pointer;
transition: border-color var(--anim-fast);
}
.hover-grey:hover { border-color: var(--color-grey-aaa); }
.hover-green {
border: 1.5px solid var(--color-grey-e5);
background: white;
cursor: pointer;
transition: border-color var(--anim-fast),
background var(--anim-fast);
}
.hover-green:hover {
border-color: var(--color-green-primary);
background: var(--color-green-soft);
}
/* ==========================================================================
5. BADGES (locked in Phase 0 § Pass 3 D4)
--------------------------------------------------------------------------
Two sizes only: small (10px) and medium (12px). Colour variants stack on
top of the size class: Active.
========================================================================== */
.badge-sm,
.badge-md {
display: inline-block;
font-family: 'Archivo', sans-serif;
font-weight: var(--font-medium);
border-radius: var(--radius-pill);
letter-spacing: var(--tracking-wide);
white-space: nowrap;
line-height: 1.4;
}
.badge-sm { font-size: 10px; padding: 2px 7px; }
.badge-md { font-size: var(--text-caption); padding: 3px 10px; }
/* Colour variants */
.badge-green { background: var(--color-green-soft); color: var(--color-green-deepest); }
.badge-green-solid { background: var(--color-green-primary); color: white; }
.badge-amber { background: var(--color-amber-light); color: var(--color-amber-text); }
.badge-red { background: var(--color-red-light); color: var(--color-red-primary); }
.badge-grey { background: var(--color-grey-f0); color: var(--color-grey-666); }
.badge-blue { background: var(--color-blue-bg); color: var(--color-blue-text); }
/* ==========================================================================
6. SPINNER (Pass 3 F1)
--------------------------------------------------------------------------
Single rotating-ring spinner. Default 16px. Sizes via modifier classes.
Used inline in text ("Loading…") or as a standalone block in loading states.
========================================================================== */
.spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid var(--color-grey-e5);
border-top-color: var(--color-green-primary);
border-radius: 50%;
animation: spinner-rotate 0.7s linear infinite;
vertical-align: middle;
flex-shrink: 0;
}
.spinner-sm { width: 12px; height: 12px; border-width: 2px; }
.spinner-md { width: 16px; height: 16px; border-width: 2px; }
.spinner-lg { width: 24px; height: 24px; border-width: 3px; }
.spinner-xl { width: 40px; height: 40px; border-width: 4px; }
/* Light-on-dark variant (e.g. inside coloured CTA buttons during loading) */
.spinner-on-dark {
border-color: rgba(255,255,255,0.3);
border-top-color: white;
}
@keyframes spinner-rotate {
to { transform: rotate(360deg); }
}
/* ---- Button-loading-state extensions (Phase 7 F4) ----
New size classes for spinners that live inside buttons + a grey colour
variant for Cancel-style buttons. Consumed by Components.Button.setLoading.
The existing .spinner-sm/.spinner-md/.spinner-lg sizes (12/16/24) target
standalone spinner use; these target inline-in-button use where the spinner
needs to read as proportional to the button height. */
.spinner-btn-sm { width: 14px; height: 14px; border-width: 2px; }
.spinner-btn-lg { width: 18px; height: 18px; border-width: 2px; }
.spinner-on-grey {
border-color: var(--color-grey-e5);
border-top-color: var(--color-grey-888);
}
/* ---- Button-loading state (Phase 7 F4) ----
Applied by Components.Button.setLoading. Overrides the design-system
disabled-opacity (which would fade the button) so the spinner remains
visually dominant. pointer-events:none belt-and-braces the disabled
attribute. .is-loading-leaving fades the loading content out over 150ms
on stop. */
.is-loading {
cursor: not-allowed;
pointer-events: none;
opacity: 1 !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
}
.is-loading-leaving {
transition: opacity var(--anim-fast) var(--ease-in);
opacity: 0;
}
.btn-loading-text { line-height: 1; }
/* ==========================================================================
6.5. SKELETON SYSTEM (Phase 7 F3)
--------------------------------------------------------------------------
Soft animated grey-gradient ghost shapes for loading states on list-heavy
surfaces (history cards, subscription card). Replaces plain spinner+text
for the API-fetch wait — communicates "your content is on its way" rather
than "something is loading somewhere."
Drop .skeleton on any element to give it the shimmer. Default radius 4px
(text-line shape); override inline (e.g. border-radius: 8px) for block
shapes like score boxes or stat cards.
Same 1.4s ease-in-out cadence as the pricing-modal shimmer (Phase 5
Commit 2) so the site has one shimmer rhythm, not two. Paired with a
180ms minimum-visible floor at the JS render level (Phase 7 F4 family) —
even when the API returns in <50ms the skeleton holds long enough to
register as animated.
========================================================================== */
.skeleton {
background: linear-gradient(90deg, #ececea 0%, #f7f7f3 50%, #ececea 100%);
background-size: 200% 100%;
border-radius: 4px;
animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ==========================================================================
7. TOAST SYSTEM (built this Phase, scope decided in chat)
--------------------------------------------------------------------------
Toasts slide in from top-right, auto-dismiss per the locked policy:
success 3.5s warning 5s info 4s error PERSISTENT loading until-done
The components.js Toast helper handles dismiss timing — these styles are
visual-only.
========================================================================== */
.toast-container {
position: fixed;
top: var(--space-4);
right: var(--space-4);
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: var(--space-2);
max-width: 380px;
pointer-events: none;
}
.toast {
background: white;
border: 1px solid var(--color-grey-e5);
border-left: 4px solid var(--color-grey-888);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
box-shadow: var(--shadow-toast);
font-family: 'Archivo', sans-serif;
font-size: var(--text-body);
line-height: var(--leading-caption);
color: var(--color-grey-222);
pointer-events: auto;
display: flex;
align-items: flex-start;
gap: var(--space-3);
animation: toast-enter var(--anim-medium) var(--ease-out);
}
.toast-icon { flex-shrink: 0; line-height: 1.2; }
.toast-body { flex: 1; min-width: 0; }
.toast-close {
background: none;
border: none;
font-size: 16px;
color: var(--color-grey-aaa);
cursor: pointer;
padding: 0;
line-height: 1;
flex-shrink: 0;
font-family: 'Archivo', sans-serif;
transition: color var(--anim-fast);
}
.toast-close:hover { color: var(--color-grey-666); }
/* Variants — accent on the left border + icon colour */
.toast-success { border-left-color: var(--color-green-primary); }
.toast-success .toast-icon { color: var(--color-green-primary); }
.toast-error { border-left-color: var(--color-red-primary); }
.toast-error .toast-icon { color: var(--color-red-primary); }
.toast-warning { border-left-color: var(--color-amber-border); }
.toast-warning .toast-icon { color: var(--color-amber-text); }
.toast-info { border-left-color: var(--color-blue-text); }
.toast-info .toast-icon { color: var(--color-blue-text); }
.toast-loading { border-left-color: var(--color-green-primary); }
.toast-loading .toast-icon { color: var(--color-green-primary); }
.toast.exiting {
animation: toast-exit var(--anim-medium) var(--ease-in) forwards;
}
@keyframes toast-enter {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes toast-exit {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(20px); }
}
/* ==========================================================================
8. EMPTY-STATE COMPONENT (built this Phase, scope decided in chat)
--------------------------------------------------------------------------
Used when a list is empty (history page, future surfaces). Phase 3
replaces history.html's plain "No interviews yet" text with this.
Markup:
========================================================================== */
.empty-state {
text-align: center;
padding: var(--space-7) var(--space-5);
max-width: 420px;
margin: 0 auto;
}
.empty-state__icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-green-soft);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-4);
color: var(--color-green-primary);
}
.empty-state__title {
font-size: var(--text-heading-md);
font-weight: var(--font-semibold);
color: var(--color-grey-222);
margin-bottom: var(--space-2);
}
.empty-state__body {
font-size: var(--text-body);
color: var(--color-grey-666);
line-height: var(--leading-body);
margin-bottom: var(--space-5);
}
.empty-state__cta { display: inline-flex; }
/* ==========================================================================
9. MODAL ANIMATION HOOKS (Phase 1 Pass 3 A1 + A7)
--------------------------------------------------------------------------
Hooks used by the components.js Modal helper. The helper toggles
.modal-entering on the inner box on open, then removes it after the
animation completes. .modal-leaving fires on close. The backdrop is
handled by an inline fade (opacity transition on the wrapper).
These hooks are PASSIVE in Phase 1 — only consumed by code that uses
the new Modal helper. Existing pages keep their current behaviour.
========================================================================== */
.modal-entering {
animation: modal-in var(--anim-medium) var(--ease-out);
}
.modal-leaving {
animation: modal-out var(--anim-fast) var(--ease-in) forwards;
}
@keyframes modal-in {
from { opacity: 0; transform: scale(0.96) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes modal-out {
from { opacity: 1; transform: scale(1) translateY(0); }
to { opacity: 0; transform: scale(0.98) translateY(4px); }
}
/* ==========================================================================
10. ICON DEFAULTS (Lucide — installed in Patch 3)
--------------------------------------------------------------------------
Lucide renders icons as inline SVG with currentColor. These rules size
them consistently and pick up the surrounding text colour.
========================================================================== */
[data-lucide],
svg.lucide {
width: 20px;
height: 20px;
vertical-align: middle;
stroke: currentColor;
stroke-width: 2;
fill: none;
flex-shrink: 0;
}
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }
/* ==========================================================================
END OF FILE
========================================================================== */