/* ============================================================================= * POBO DESIGN TOKENS — the single source of truth for all Panel/web styling. * ----------------------------------------------------------------------------- * Hand-authored, served direct with ?v=filemtime (NOT compiled by Mix). * MUST be loaded FIRST in every layout , before app.css and all others, * so every var() resolves everywhere (including compiled Tailwind utilities). * * Three tiers: * 1) PRIMITIVES — raw scale values, no meaning. (--c-*, --space-*, --fs-* …) * 2) SEMANTIC — roles that components reference. (--color-brand, --surface …) * 3) COMPONENT — per-component knobs. (--btn-*, --card-* …) * * RULE: new CSS/JS/Blade styles reference tokens, never raw values. * Mirror of D:\PoboPilot\src\lib\theme.ts — keep the two in lock-step. * See docs/design-system.md for the full guide. * ========================================================================== */ :root { /* ------------------------------------------------------------------ * * TIER 1 — PRIMITIVES * ------------------------------------------------------------------ */ /* Color · periwinkle brand ramp */ --c-periwinkle-100: #eef0fb; --c-periwinkle-200: #d5daf5; --c-periwinkle-250: #d1d3e1; /* muted periwinkle-grey field/label fill */ --c-periwinkle-300: #a9b2e5; --c-periwinkle-350: #8f97c6; /* muted divider on brand-soft fills */ --c-periwinkle-400: #6779db; --c-periwinkle-500: #586cda; /* brand primary */ --c-periwinkle-600: #4557c4; /* hover / press */ /* Color · ink & neutral ramp (periwinkle-tinted, matches the app bg family) */ --c-white: #ffffff; --c-neutral-50: #f4f5fb; /* app background (canonical) */ --c-neutral-100: #f1f1f1; --c-neutral-200: #e5e7f4; --c-neutral-300: #c7cbe0; --c-neutral-400: #9ca3af; --c-neutral-500: #6b7280; --c-neutral-700: #3e3e3e; /* ink / tertiary */ --c-neutral-900: #1a1b28; --c-black: #000000; /* Color · status & accent */ --c-gold-500: #ebc81e; /* warning (dark text on it) */ --c-red-500: #ef4444; /* danger — the ONE red */ --c-vermilion-500: #e4572e; /* data-viz warm accent */ /* NOTE: brand has NO green. Success = periwinkle-400 (see --success). */ /* Color · alpha ladders (4 primary + 3 ink + 1 white) */ --a-primary-08: rgba(88, 108, 218, 0.08); --a-primary-15: rgba(88, 108, 218, 0.15); --a-primary-25: rgba(88, 108, 218, 0.25); --a-primary-40: rgba(88, 108, 218, 0.40); --a-ink-08: rgba(0, 0, 0, 0.08); --a-ink-18: rgba(0, 0, 0, 0.18); --a-ink-45: rgba(0, 0, 0, 0.45); --a-white-85: rgba(255, 255, 255, 0.85); /* Spacing · strict 4px grid */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-18: 72px; --space-20: 80px; --space-22: 88px; --space-24: 96px; --space-28: 112px; /* large layout scale (hero/section spacing) */ --space-32: 128px; --space-40: 160px; --space-48: 192px; --border-hairline: 1px; /* documented exception: 1px borders/nudges */ /* Typography · family */ --font-headline: "Manrope", sans-serif; --font-body: "Inter", sans-serif; /* Typography · size (14px body; rem @16 base) */ --fs-caption: 0.75rem; /* 12 */ --fs-body: 0.875rem; /* 14 */ --fs-subhead: 1rem; /* 16 */ --fs-title: 1.25rem; /* 20 */ --fs-headline: 1.5rem; /* 24 */ --fs-display: 2rem; /* 32 */ --fs-hero: 3rem; /* 48 (landing only) */ /* Typography · weight */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800; /* Typography · line-height */ --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5; --lh-relaxed: 1.65; /* Radii (6px kept — the dominant card/button radius) */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 24px; /* bottom-sheet / drawer corners */ --radius-4xl: 32px; --radius-pill: 999px; --radius-circle: 50%; /* Elevation */ --shadow-sm: 0 1px 4px var(--a-ink-08); --shadow-md: 0 10px 30px rgba(44, 46, 58, 0.05); --shadow-lg: 0 18px 60px rgba(42, 42, 52, 0.18); --shadow-brand: 0 6px 16px var(--a-primary-25); --focus-ring: 0 0 0 3px var(--a-primary-25); --ring-soft: 0 0 0 3px var(--c-periwinkle-200); /* soft selection/step halo */ /* Z-index · named layers */ --z-base: 0; --z-raised: 1; --z-sticky: 100; --z-dropdown: 1000; --z-overlay: 1100; --z-modal: 1200; --z-popover: 1300; --z-toast: 1400; /* Icon sizes */ --icon-xs: 12px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; /* Breakpoints — for reference in comments/JS; @media cannot read var(). * --bp-sm 480px · --bp-md 768px (app/web line) · --bp-lg 1024px · --bp-xl 1280px */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* ------------------------------------------------------------------ * * TIER 2 — SEMANTIC ALIASES (reference THESE from components) * ------------------------------------------------------------------ */ /* Brand */ --color-brand: var(--c-periwinkle-500); --color-brand-rgb: 88 108 218; /* channels of periwinkle-500 — powers Tailwind opacity (bg-brand/50) */ --color-brand-hover: var(--c-periwinkle-600); --color-brand-soft: var(--c-periwinkle-300); --color-brand-tint: var(--c-periwinkle-100); /* DEPRECATED 2026-07-19 — the "primary action buttons are dark ink" convention is RETIRED (founder ruling). Primary actions are brand periwinkle like every other interactive surface; dark neutrals are ink/scrim only. Kept as an alias so any remaining reference resolves to brand instead of re-introducing #3e3e3e. Do not use in new code — use --color-brand. */ --color-accent-action: var(--color-brand); /* Surfaces */ --surface: var(--c-white); --surface-sunken: var(--c-neutral-50); --surface-tint: var(--c-periwinkle-100); --surface-inverse: var(--c-neutral-900); /* Text */ --text-primary: var(--c-neutral-700); --text-secondary: var(--c-neutral-500); --text-muted: var(--c-neutral-400); --text-on-brand: var(--c-white); /* Lines & focus */ --border: var(--c-neutral-200); --border-strong: var(--c-neutral-300); --focus: var(--focus-ring); /* Status */ --success: var(--c-periwinkle-400); /* periwinkle — NO green */ --success-soft: rgba(103, 121, 219, 0.12); /* soft success banner/badge bg (periwinkle tint) */ --warning: var(--c-gold-500); --warning-soft: rgba(235, 200, 30, 0.14); /* soft warning banner/badge bg */ --warning-strong: #92400e; /* dark amber — warning text on warning-soft */ --danger: var(--c-red-500); --danger-soft: rgba(239, 68, 68, 0.12); /* soft danger/pending banner/badge bg */ --danger-strong: #9b1c1c; /* dark red — danger text on danger-soft */ --accent-viz: var(--c-vermilion-500); --scrim: var(--a-ink-45); --scrim-frost: rgba(90, 95, 140, 0.40); /* frosted-glass panel overlay (used with backdrop-filter: blur) */ --scrim-strong: rgba(20, 22, 30, 0.6); /* darker overlay for text-over-image (hero legibility) */ /* ------------------------------------------------------------------ * * TIER 3 — COMPONENT TOKENS * ------------------------------------------------------------------ */ /* Button */ --btn-primary-bg: var(--color-brand); --btn-primary-fg: var(--text-on-brand); --btn-secondary-bg: var(--color-brand-soft); --btn-secondary-fg: var(--text-primary); --btn-radius: var(--radius-md); --btn-pad-y: var(--space-2); --btn-pad-x: var(--space-4); /* Card */ --card-bg: var(--surface); --card-radius: var(--radius-xl); --card-pad: var(--space-4); --card-shadow: var(--shadow-md); --card-border: var(--border); /* Input */ --input-bg: var(--surface); --input-border: var(--border); --input-radius: var(--radius-lg); --input-pad-y: var(--space-2); --input-pad-x: var(--space-3); --input-focus: var(--focus); /* Modal */ --modal-bg: var(--surface); --modal-radius: var(--radius-2xl); --modal-shadow: var(--shadow-lg); --modal-scrim: var(--scrim); /* Badge / pill */ --badge-radius: var(--radius-pill); /* ================================================================== * * LEGACY ALIASES — the five old per-file systems now resolve to the * canonical tokens above. Keep during migration (Phase 5) so nothing * breaks mid-flight; remove a block once its file is fully migrated. * ================================================================== */ /* admin-overrides.css (The Eyes) */ --pobo-primary: var(--color-brand); --pobo-primary-hover: var(--color-brand-hover); --pobo-secondary: var(--color-brand-soft); --pobo-tertiary: var(--c-neutral-700); --pobo-neutral: var(--c-neutral-300); --pobo-accent: var(--accent-viz); /* landing.css */ --lp-primary: var(--color-brand); --lp-primary-300: var(--c-periwinkle-400); --lp-primary-600: var(--color-brand-hover); --lp-secondary: var(--color-brand-soft); --lp-gold: var(--warning); --lp-red: var(--danger); --lp-ink: var(--text-primary); --lp-text: var(--c-neutral-900); --lp-muted: var(--text-secondary); --lp-bg: var(--c-neutral-50); --lp-tint: var(--color-brand-tint); --lp-border: var(--border); --lp-card: var(--surface); --lp-shadow: var(--shadow-lg); /* wizard (--wiz-*) */ --wiz-accent: var(--c-periwinkle-400); --wiz-accent-press: var(--color-brand); --wiz-accent-soft: var(--c-periwinkle-200); --wiz-body: var(--text-primary); --wiz-text: var(--c-neutral-900); --wiz-muted: var(--text-secondary); --wiz-bg: var(--c-neutral-100); --wiz-soft: var(--color-brand-tint); --wiz-soft-2: var(--color-brand-tint); --wiz-surface: var(--surface); --wiz-success: var(--success); --wiz-radius: var(--radius-xl); --wiz-radius-inner: var(--radius-lg); --wiz-gap: var(--space-6); }