/* =============================================================================
Coffee Cup Solutions — Foundation Design Tokens
Version 1.0 · 2026-05-29 · Single source of truth.
-----------------------------------------------------------------------------
USAGE
-----
1. Import this file once, as early as possible (before app CSS / Tailwind
utilities that reference the vars):
@import "tokens.css"; // or
2. LIGHT is the DEFAULT theme. Everything in :root is the light theme plus
the theme-invariant scales (brand colour ramp, spacing, radius, type,
motion, z-index, focus). You get light automatically — no attribute needed.
3. DARK is an opt-in variant. Toggle it by setting an attribute OR class on a
container (usually or ):
// canonical
// alias (Tailwind class-style)
Only the SEMANTIC colour tokens (--color-bg, --color-surface, --color-text,
--color-accent-hover, …) and the shadow family flip. The brand scale and
status hues are theme-invariant.
4. Consume tokens via var(): color: var(--color-text); and via the Tailwind
preset (tailwind.preset.js), which maps utilities to these same vars.
5. ROOT FONT-SIZE: 16px is canonical (dense product UI). Marketing /
presentation surfaces MAY scale up to 18px by adding the .theme-marketing
class (or setting :root font-size). Because the type + spacing scales are
rem-first, this single knob scales everything by 1.125x.
NAMING: kebab-case, prefix-grouped — --color-*, --font-*, --space-*,
--radius-*, --shadow-*, --duration-*, --ease-*, --z-*, --ring-*, --logo-*.
Brand scale uses numeric stops (--color-brand-500); semantic tokens are
role-named (--color-bg, --color-accent) and resolve per theme.
============================================================================= */
:root {
/* ==========================================================================
1. BRAND COLOUR SCALE (theme-invariant)
========================================================================== */
--color-brand-200: #a0dfff; /* tertiary accent — pale blue */
--color-brand-300: #4cc5f0; /* secondary accent — sky blue / focus ring */
--color-brand-500: #009bdb; /* PRIMARY accent — Coffee Cup blue */
--color-brand-600: #007fb4; /* primary accent hover/focus (darker) */
--color-brand-700: #2f657f; /* dark-surface lift / intermediate */
--color-brand-800: #25566f; /* dark-surface hover/border */
--color-brand-900: #1e495f; /* PRIMARY dark — evergreen */
/* Dark-surface lift ramp (canonical dark-theme surface steps) */
--color-surface-dark-1: #2a5a73; /* dark L1 (cards) */
--color-surface-dark-2: #336b86; /* dark L2 (raised cards, borders) */
/* Brand accent alpha helpers (tints / overlays) */
--color-accent-06: rgba(0, 155, 219, 0.06);
--color-accent-10: rgba(0, 155, 219, 0.10);
--color-accent-15: rgba(0, 155, 219, 0.15);
--color-accent-20: rgba(0, 155, 219, 0.20);
--color-accent-40: rgba(0, 155, 219, 0.40);
--color-brand-200-10: rgba(160, 223, 255, 0.10);
--color-brand-200-20: rgba(160, 223, 255, 0.20);
--color-brand-300-10: rgba(76, 197, 240, 0.10);
--color-brand-300-20: rgba(76, 197, 240, 0.20);
/* ==========================================================================
2. STATUS COLOURS (theme-invariant hues + light soft-badge triplets)
========================================================================== */
--color-success: #10b981; /* emerald-500 canonical hue */
--color-success-strong: #059669; /* emerald-600 */
--color-success-bg: #ecfdf5; /* emerald-50 (light badge bg) */
--color-success-border: #a7f3d0; /* emerald-200 (light badge border) */
--color-success-text: #047857; /* emerald-700 (light badge text) */
--color-warning: #fbbf24; /* amber-400 canonical hue */
--color-warning-bg: #fffbeb; /* amber-50 (light badge bg) */
--color-warning-border: #fde68a; /* amber-200 (light badge border) */
--color-warning-text: #b45309; /* amber-700 (light badge text) */
--color-danger: #dc2626; /* red-600 — fills/buttons */
--color-danger-hover: #b91c1c; /* red-700 */
--color-danger-bright: #ef4444; /* red-500 — status dots (dark) */
--color-info: #009bdb; /* info ≡ brand-500 */
--color-info-soft-bg: #e0f4fb; /* light tint of brand-500 */
/* ==========================================================================
3. SEMANTIC COLOUR TOKENS — LIGHT (default)
Overridden by [data-theme="dark"] / .dark below.
========================================================================== */
--color-bg: #f9fafb; /* page/app body background (gray-50) */
--color-bg-base: #ffffff; /* lowest base layer (L0) */
--color-surface: #ffffff; /* card surface */
--color-surface-raised: #ffffff; /* raised/elevated card */
--color-surface-sunken: #f9fafb; /* recessed strips/wells (gray-50) */
--color-text: #111827; /* primary body text (gray-900) */
--color-text-strong: #1e495f; /* headings/emphasis (brand-900) */
--color-text-muted: #6b7280; /* secondary body (gray-500) */
--color-text-dim: #9ca3af; /* tertiary/dim (gray-400) */
--color-border: #e5e7eb; /* default border (gray-200) */
--color-border-subtle: #f3f4f6; /* hairline dividers (gray-100) */
--color-border-strong: #d1d5db; /* stronger border (gray-300) */
--color-accent: #009bdb; /* primary interactive (brand-500) */
--color-accent-hover: #007fb4; /* light: darken (brand-600) */
--color-accent-contrast: #ffffff; /* text/icon ON accent fill */
--color-accent-2: #4cc5f0; /* secondary accent (brand-300) */
--color-accent-3: #a0dfff; /* tertiary/pale accent (brand-200) */
--color-on-accent-muted: rgba(160, 223, 255, 0.70); /* muted text on brand surfaces */
--color-focus-ring: #4cc5f0; /* focus-visible ring (brand-300) */
--color-focus-ring-danger: #f87171; /* danger focus ring (red-400) */
--color-overlay: rgba(107, 114, 128, 0.75); /* modal scrim */
--color-backdrop: rgba(0, 0, 0, 0.40); /* mobile nav backdrop */
--color-text-on-fill: #ffffff; /* text on a solid accent/status card */
/* ==========================================================================
4. TYPOGRAPHY (theme-invariant)
========================================================================== */
--font-family-base: 'Quicksand', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
/* Font weights */
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
/* Type scale (rem-first, 16px base). Display tiers are fluid. */
--font-size-2xs: 0.625rem; /* 10px */
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 1.875rem; /* 30px */
--font-size-display-sm: clamp(1.6rem, 3vw, 2.2rem);
--font-size-display-md: clamp(1.8rem, 3.5vw, 2.6rem);
--font-size-display-lg: clamp(2rem, 4.2vw, 3.2rem);
--font-size-display-xl: clamp(2.6rem, 5.5vw, 4.2rem);
/* Letter-spacing (tracking) */
--tracking-tighter: -0.04em;
--tracking-tight: -0.03em;
--tracking-snug: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
--tracking-kicker: 0.18em;
--tracking-mega: 0.2em;
/* Line-height */
--leading-none: 1;
--leading-tight: 1.1;
--leading-snug: 1.2;
--leading-heading: 1.15;
--leading-normal: 1.5;
--leading-relaxed: 1.6;
--leading-body: 1.65;
/* ==========================================================================
5. SPACING SCALE (4px base, rem-first; theme-invariant)
========================================================================== */
--space-0: 0;
--space-0_5: 0.125rem; /* 2px */
--space-1: 0.25rem; /* 4px */
--space-1_5: 0.375rem; /* 6px */
--space-2: 0.5rem; /* 8px */
--space-2_5: 0.625rem; /* 10px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
/* ==========================================================================
6. BORDER-RADIUS SCALE (theme-invariant)
Aligned to stock Tailwind radii so the t-shirt names match the
`rounded-*` utilities (and the real Glancy/vision markup). Only `sm` is
bumped 2px→4px — the system's smallest radius; there is no 2px usage.
========================================================================== */
--radius-none: 0;
--radius-sm: 4px; /* chips, code-tags, marketing-tight buttons (= rounded-sm) */
--radius-md: 6px; /* dropdown / popover menus (= rounded-md) */
--radius-lg: 8px; /* DEFAULT control — buttons, inputs, modal (= rounded-lg) */
--radius-xl: 12px; /* dark / marketing cards (= rounded-xl) */
--radius-2xl: 16px; /* DEFAULT card radius (light/portal) (= rounded-2xl) */
--radius-3xl: 24px; /* large blocks (= rounded-3xl) */
--radius-pill: 9999px; /* pills/badges/ribbons (= rounded-full) */
--radius-circle: 50%; /* dots, avatars, glyph circles */
/* ==========================================================================
7. ELEVATION / SHADOW SCALE — LIGHT (default)
Dark overrides the same tokens below.
========================================================================== */
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
/* Glow tokens (dark-only effect; values theme-invariant, applied in dark) */
--shadow-glow-accent: 0 10px 36px rgba(0, 155, 219, 0.25), inset 0 0 0 1px rgba(0, 155, 219, 0.35);
--shadow-glow-dot: 0 0 0 3px rgba(0, 155, 219, 0.3), 0 0 12px #009bdb;
--shadow-glow-ribbon: 0 6px 24px rgba(0, 155, 219, 0.5);
--shadow-glow-status: 0 0 8px currentColor;
/* Text shadow for text on dark accent-filled cards (light: none) */
--shadow-text-on-fill: none;
/* ==========================================================================
8. MOTION (theme-invariant)
========================================================================== */
--duration-fast: 75ms;
--duration-base: 150ms; /* DEFAULT */
--duration-md: 200ms;
--duration-slow: 300ms;
--duration-slower: 400ms;
--duration-slowest: 600ms;
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* DEFAULT */
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-default: ease; /* legacy keyword; migrate to --ease-standard */
--transition-base: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
/* ==========================================================================
9. Z-INDEX LAYERS (theme-invariant)
========================================================================== */
--z-base: 0;
--z-raised: 2;
--z-sticky: 5;
--z-nav: 20; /* sticky topbar / nav bar */
--z-backdrop: 30; /* mobile nav backdrop / scrim */
--z-drawer: 40; /* sidebar / off-canvas drawer */
--z-overlay: 50; /* dropdowns, popovers, modals */
--z-sticky-nav: 90; /* sticky marketing stage-nav */
--z-fixed-nav: 200; /* fixed marketing top nav / slide-in detail panel */
--z-modal: 1000; /* app-level modal layer above all nav */
--z-toast: 1100; /* toasts/notifications */
--z-gate: 9999; /* full-screen gate/splash overlay */
/* ==========================================================================
10. FOCUS & RING (theme-invariant)
========================================================================== */
--ring-width: 2px;
--ring-width-inset: 1px;
--ring-offset: 2px;
--ring-color: var(--color-focus-ring);
--ring-color-danger: var(--color-focus-ring-danger);
/* ==========================================================================
11. LOGO / BRAND ASSET TOKENS (theme-invariant)
========================================================================== */
--logo-aspect-ratio: 3.111; /* 6702:2154 wordmark lockup */
--logo-min-height: 22px;
--logo-nav-height: 26px;
--logo-clearspace: 0.5; /* multiplier of logo height for isolation zone */
}
/* ============================================================================
DARK THEME — overrides SEMANTIC colour tokens + shadow family only.
Brand scale, status hues, type, space, radius, motion, z-index are inherited.
Apply via [data-theme="dark"] (canonical) or .dark (alias).
============================================================================ */
[data-theme="dark"],
.dark {
/* Surfaces */
--color-bg: #1e495f; /* brand-900 (evergreen) */
--color-bg-base: #1e495f;
--color-surface: #2a5a73; /* surface-dark-1 */
--color-surface-raised: #336b86; /* surface-dark-2 */
--color-surface-sunken: rgba(0, 0, 0, 0.15);
/* Text */
--color-text: #ffffff;
--color-text-strong: #ffffff;
--color-text-muted: rgba(255, 255, 255, 0.85);
--color-text-dim: rgba(255, 255, 255, 0.55);
/* Borders */
--color-border: #336b86; /* surface-dark-2 */
--color-border-subtle: rgba(255, 255, 255, 0.10);
--color-border-strong: rgba(255, 255, 255, 0.18);
/* Accent — fill stays brand-500; hover + contrast flip for on-dark legibility */
--color-accent: #009bdb;
--color-accent-hover: #ffffff; /* dark: lighten to white */
--color-accent-contrast: #1e495f; /* evergreen text on blue fill */
--color-accent-2: #4cc5f0;
--color-accent-3: #a0dfff;
--color-on-accent-muted: rgba(160, 223, 255, 0.70);
/* Focus rings unchanged (brand-300 / red-400) */
--color-focus-ring: #4cc5f0;
--color-focus-ring-danger: #f87171;
/* Overlays */
--color-overlay: rgba(0, 0, 0, 0.50);
--color-backdrop: rgba(0, 0, 0, 0.40);
/* Text on accent-filled cards stays white but gains a legibility shadow */
--color-text-on-fill: #ffffff;
--shadow-text-on-fill: 0 1px 2px rgba(0, 0, 0, 0.35);
/* Dark shadow family (deeper, for dark surfaces) */
--shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.25);
--shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
--shadow-md: 0 10px 30px rgba(0, 0, 0, 0.25);
--shadow-lg: 0 12px 30px -12px rgba(0, 0, 0, 0.4);
--shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);
}
/* ============================================================================
ROOT FONT-SIZE OVERRIDE — marketing / presentation surfaces.
16px is canonical; opt into 18px (×1.125 the rem-based scale) for marketing.
============================================================================ */
.theme-marketing {
font-size: 18px;
}
/* ============================================================================
APP-SHELL LAYOUT
The fixed-viewport scroll (sidebar + topbar stay put, only scrolls) is
shipped here — NOT via Tailwind utilities — so it works even when the host
app's Tailwind build doesn't scan this package's Blade views. (Otherwise
h-screen / overflow-* get purged and the whole page scrolls, sized to the
tallest column — usually the sidebar.)
============================================================================ */
.cc-shell { height: 100vh; height: 100dvh; overflow: hidden; display: flex; }
.cc-shell-content { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.cc-shell-topbar { flex: 0 0 auto; }
.cc-shell-main { flex: 1 1 0%; overflow-y: auto; min-height: 0; }