/* * IDEA4RS Design System — Phase 1 * Dark navy theme · Play typeface · Professional SaaS * * This file is the single source of truth for all design tokens. * It REPLACES the scattered :root blocks in style.css, responsive.css, * ansvermodal.css, ocr.css, and 3Dspinner.css. * * Load order in index.html: * 1. design-system.css ← this file (tokens + resets + base) * 2. style.css (component rules, references tokens only) * 3. responsive.css (breakpoint overrides) * 4. ansvermodal.css (modal component) * 5. ocr.css (ocr status component) * 6. 3Dspinner.css (loader component) */ /* ═══════════════════════════════════════════════ 1. CUSTOM PROPERTIES — COLOUR PALETTE ═══════════════════════════════════════════════ */ :root { /* ── Navy depth scale (background layers) ── */ --navy-950: #040C14; /* deepest shadow / border-bottom accents */ --navy-900: #081120; /* page background */ --navy-850: #0D1B2A; /* body / outermost container */ --navy-800: #10243A; /* card background */ --navy-750: #15324A; /* card hover / elevated surface */ --navy-700: #1B4965; /* header accents / selected state */ --navy-600: #1E5F80; /* interactive border */ --navy-500: #2471A3; /* secondary border / dividers */ /* ── Brand accent — electric teal ── */ --accent-500: #00C4B4; /* primary CTA, focus ring, progress */ --accent-400: #00D6C5; /* hover brightened */ --accent-600: #009F92; /* pressed / active */ --accent-glow: rgba(0, 196, 180, 0.18); /* focus halo */ --accent-glow-strong: rgba(0, 196, 180, 0.30); /* ── Semantic colours ── */ --success-500: #27AE60; --success-400: #2ECC71; --success-600: #1E8449; --success-glow: rgba(39, 174, 96, 0.20); --warning-500: #F39C12; --warning-400: #F1C40F; --warning-600: #D68910; --warning-glow: rgba(243, 156, 18, 0.20); --danger-500: #E74C3C; --danger-400: #EC7063; --danger-600: #CB4335; --danger-glow: rgba(231, 76, 60, 0.20); --info-500: #2980B9; --info-400: #3498DB; --info-600: #1F618D; /* ── Text scale ── */ --text-primary: #E8F4FD; /* headings, primary labels */ --text-secondary: #A8C8E0; /* body copy, descriptions */ --text-muted: #6A96B5; /* placeholders, hints, disabled */ --text-disabled: #3D6080; /* explicitly disabled elements */ --text-inverse: #081120; /* text on accent/light surfaces */ /* ── Border / divider ── */ --border-subtle: rgba(168, 200, 224, 0.08); /* card edges, low contrast */ --border-default: rgba(168, 200, 224, 0.16); /* inputs, cards */ --border-strong: rgba(168, 200, 224, 0.28); /* focused inputs */ --border-accent: var(--accent-500); /* active / selected */ /* ── Overlay / scrim ── */ --scrim-light: rgba(4, 12, 20, 0.60); --scrim-heavy: rgba(4, 12, 20, 0.82); /* ── Surface aliases (what components should reference) ── */ --surface-page: var(--navy-900); --surface-card: var(--navy-800); --surface-card-hover:var(--navy-750); --surface-raised: var(--navy-700); --surface-input: rgba(8, 17, 32, 0.60); --surface-input-focus: rgba(8, 17, 32, 0.90); } /* ═══════════════════════════════════════════════ 2. CUSTOM PROPERTIES — TYPOGRAPHY ═══════════════════════════════════════════════ */ :root { /* ── Font families ── */ --font-brand: 'Play', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-ui: 'Play', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, 'Courier New', monospace; /* ── Type scale (fluid: clamp(min, preferred, max)) ── */ --text-2xs: clamp(0.65rem, 2.5vw, 0.70rem); /* 10–11px badges */ --text-xs: clamp(0.70rem, 2.8vw, 0.75rem); /* 11–12px captions */ --text-sm: clamp(0.80rem, 3.2vw, 0.875rem); /* 13–14px secondary labels */ --text-base: clamp(0.875rem, 3.6vw, 1.00rem); /* 14–16px body */ --text-md: clamp(1.00rem, 4.0vw, 1.125rem); /* 16–18px lead / large body */ --text-lg: clamp(1.125rem, 4.5vw, 1.375rem); /* 18–22px section headers */ --text-xl: clamp(1.375rem, 6.0vw, 1.75rem); /* 22–28px page titles */ --text-2xl: clamp(1.75rem, 8.0vw, 2.50rem); /* 28–40px hero H1 */ /* ── Font weights ── */ --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; /* ── Line heights ── */ --leading-tight: 1.25; --leading-snug: 1.35; --leading-normal: 1.55; --leading-relaxed: 1.70; /* ── Letter spacing ── */ --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-widest: 0.10em; } /* ═══════════════════════════════════════════════ 3. CUSTOM PROPERTIES — SPACING ═══════════════════════════════════════════════ */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Fluid page padding (outer gutter) */ --page-gutter: clamp(var(--space-4), 4vw, var(--space-8)); /* Card internal padding */ --card-pad-y: clamp(var(--space-5), 4vw, var(--space-8)); --card-pad-x: clamp(var(--space-5), 4vw, var(--space-8)); /* Max readable content width */ --content-max: 680px; } /* ═══════════════════════════════════════════════ 4. CUSTOM PROPERTIES — SHAPE & MOTION ═══════════════════════════════════════════════ */ :root { /* ── Border radii ── */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-full: 9999px; /* ── Shadows (layered for depth illusion) ── */ --shadow-sm: 0 1px 2px rgba(4, 12, 20, 0.40), 0 1px 4px rgba(4, 12, 20, 0.20); --shadow-md: 0 2px 4px rgba(4, 12, 20, 0.40), 0 4px 16px rgba(4, 12, 20, 0.30), 0 0 0 1px var(--border-subtle); --shadow-lg: 0 4px 8px rgba(4, 12, 20, 0.50), 0 12px 40px rgba(4, 12, 20, 0.40), 0 0 0 1px var(--border-default); --shadow-modal: 0 8px 16px rgba(4, 12, 20, 0.60), 0 24px 80px rgba(4, 12, 20, 0.50), 0 0 0 1px var(--border-strong); /* Accent glow (for primary buttons) */ --shadow-accent: 0 0 0 1px var(--accent-600), 0 4px 16px var(--accent-glow), 0 8px 32px rgba(4, 12, 20, 0.40); --shadow-accent-hover: 0 0 0 1px var(--accent-500), 0 4px 24px var(--accent-glow-strong), 0 8px 40px rgba(4, 12, 20, 0.50); /* ── Transitions ── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* snappy decelerate */ --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* smooth symmetric */ --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* subtle overshoot */ --duration-instant: 80ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --transition-base: var(--duration-normal) var(--ease-out); --transition-slow: var(--duration-slow) var(--ease-out); --transition-spring: var(--duration-slow) var(--ease-spring); /* ── Focus ring ── */ --focus-ring: 0 0 0 3px var(--accent-glow-strong), 0 0 0 1px var(--accent-500); } /* ═══════════════════════════════════════════════ 5. CUSTOM PROPERTIES — COMPONENT TOKENS These alias the primitives above for each component family. Changing a component token here propagates everywhere. ═══════════════════════════════════════════════ */ :root { /* Card */ --card-bg: var(--surface-card); --card-bg-hover: var(--surface-card-hover); --card-border: var(--border-subtle); --card-border-hover: var(--border-default); --card-shadow: var(--shadow-md); --card-shadow-hover: var(--shadow-lg); --card-radius: var(--radius-xl); /* Input / Textarea */ --input-bg: var(--surface-input); --input-bg-focus: var(--surface-input-focus); --input-border: var(--border-default); --input-border-focus: var(--accent-500); --input-radius: var(--radius-md); --input-text: var(--text-primary); --input-placeholder: var(--text-muted); /* Button — primary */ --btn-primary-bg: var(--accent-500); --btn-primary-bg-hover: var(--accent-400); --btn-primary-bg-active: var(--accent-600); --btn-primary-text: var(--text-inverse); --btn-primary-shadow: var(--shadow-accent); --btn-primary-shadow-hover: var(--shadow-accent-hover); /* Button — secondary */ --btn-secondary-bg: var(--navy-750); --btn-secondary-bg-hover: var(--navy-700); --btn-secondary-border: var(--border-default); --btn-secondary-text: var(--text-primary); /* Button — danger */ --btn-danger-bg: var(--danger-500); --btn-danger-bg-hover: var(--danger-400); --btn-danger-text: #ffffff; --btn-danger-shadow: 0 4px 16px var(--danger-glow); /* Button — ghost / footer */ --btn-ghost-bg: transparent; --btn-ghost-bg-hover: var(--navy-750); --btn-ghost-border: var(--border-default); --btn-ghost-text: var(--text-secondary); /* Modal */ --modal-bg: var(--navy-800); --modal-border: var(--border-strong); --modal-shadow: var(--shadow-modal); --modal-radius: var(--radius-2xl); --modal-scrim: var(--scrim-heavy); /* Badge / pill */ --badge-ocr-bg: rgba(0, 196, 180, 0.14); --badge-ocr-text: var(--accent-400); --badge-ocr-border:rgba(0, 196, 180, 0.30); --badge-success-bg: rgba(39, 174, 96, 0.14); --badge-success-text: var(--success-400); --badge-success-border:rgba(39, 174, 96, 0.30); --badge-danger-bg: rgba(231, 76, 60, 0.14); --badge-danger-text: var(--danger-400); --badge-danger-border:rgba(231, 76, 60, 0.30); --badge-warning-bg: rgba(243, 156, 18, 0.14); --badge-warning-text: var(--warning-400); --badge-warning-border:rgba(243, 156, 18, 0.30); /* Notification toast */ --toast-success-bg: rgba(27, 73, 101, 0.95); --toast-success-border:var(--success-500); --toast-error-bg: rgba(27, 73, 101, 0.95); --toast-error-border: var(--danger-500); --toast-warning-bg: rgba(27, 73, 101, 0.95); --toast-warning-border:var(--warning-500); /* Progress bar */ --progress-track: rgba(168, 200, 224, 0.10); --progress-fill-start: var(--accent-500); --progress-fill-end: var(--success-400); /* Scrollbar (thin, visible but unobtrusive) */ --scrollbar-track: rgba(168, 200, 224, 0.05); --scrollbar-thumb: rgba(168, 200, 224, 0.18); --scrollbar-thumb-hover: rgba(168, 200, 224, 0.32); /* Status bar (left-border indicator on status card) */ --status-border-idle: var(--border-default); --status-border-active: var(--accent-500); --status-border-success: var(--success-500); --status-border-error: var(--danger-500); /* Balance card accent */ --balance-border: var(--accent-500); --balance-low-color: var(--warning-500); --balance-empty-color: var(--danger-500); /* Footer */ --footer-bg: var(--navy-850); --footer-border:var(--border-subtle); /* File upload zone */ --upload-bg: var(--navy-850); --upload-border: var(--border-default); --upload-border-drag: var(--accent-500); --upload-bg-drag: rgba(0, 196, 180, 0.06); /* File item */ --file-item-bg: var(--navy-750); --file-item-border: var(--border-subtle); --file-item-bg-ocr: rgba(0, 196, 180, 0.07); --file-item-border-ocr: rgba(0, 196, 180, 0.25); } /* ═══════════════════════════════════════════════ 6. FONT FACE DECLARATIONS ═══════════════════════════════════════════════ */ @font-face { font-family: 'Play'; src: url('../fonts/Play-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Play'; src: url('../fonts/Play-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ═══════════════════════════════════════════════ 7. GLOBAL RESET & BASE STYLES ═══════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Remove UA margins/paddings on common elements */ body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; padding: 0; } ul, ol { list-style: none; } img, svg, video { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } /* HTML / Body base */ html { /* Smooth but not locked */ scroll-behavior: smooth; /* iOS height fix. IMPORTANT: this must be min-height, not height. A hard `height` clips the box to the viewport while body (its child) is free to grow taller via min-height — once that happens, the document's actual content overflows a box whose height is fixed, and iOS Safari (most consistently in standalone/PWA mode, where there's no browser chrome to fall back on) fails to establish a working scroll root, leaving the whole page stuck/unscrollable. min-height lets grow with its content like a normal block, exactly like body already does below — this was the actual bug behind "scrolling doesn't work" reports on mobile PWA. */ min-height: 100%; min-height: -webkit-fill-available; min-height: 100dvh; /* Prevent font size inflation on orientation change */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-brand); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--text-primary); background-color: var(--surface-page); min-height: 100vh; min-height: -webkit-fill-available; min-height: 100dvh; margin: 0; padding: var(--page-gutter); overflow-x: hidden; overflow-y: auto; /* iOS momentum scrolling */ -webkit-overflow-scrolling: touch; /* Prevent horizontal overflow from animations */ position: relative; } /* ═══════════════════════════════════════════════ 8. SCROLLBAR STYLES Thin and tasteful — NOT hidden. Users need to know content is scrollable, especially in the response modal. ═══════════════════════════════════════════════ */ /* WebKit / Blink */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); transition: background var(--transition-base); } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } /* ═══════════════════════════════════════════════ 9. FOCUS MANAGEMENT Keyboard-visible focus rings, pointer-invisible. ═══════════════════════════════════════════════ */ :focus-visible { outline: none; box-shadow: var(--focus-ring); } :focus:not(:focus-visible) { outline: none; } /* Ensure interactive elements always show focus when keyboard navigated */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } /* ═══════════════════════════════════════════════ 10. ACCESSIBILITY UTILITIES ═══════════════════════════════════════════════ */ /* Visually hidden but accessible to screen readers */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip-to-content link */ .skip-link { position: absolute; top: -100%; left: var(--space-4); z-index: 99999; padding: var(--space-2) var(--space-4); background: var(--accent-500); color: var(--text-inverse); font-size: var(--text-sm); font-weight: var(--weight-bold); border-radius: var(--radius-sm); text-decoration: none; transition: top var(--duration-fast) var(--ease-out); } .skip-link:focus { top: var(--space-4); } /* ═══════════════════════════════════════════════ 11. REDUCED MOTION ═══════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ═══════════════════════════════════════════════ 12. UTILITY CLASSES Minimal set — keep this small. ═══════════════════════════════════════════════ */ /* Layout */ .u-flex { display: flex; } .u-flex-col { display: flex; flex-direction: column; } .u-flex-center { display: flex; align-items: center; justify-content: center; } .u-grid { display: grid; } /* Text */ .u-text-primary { color: var(--text-primary); } .u-text-secondary { color: var(--text-secondary); } .u-text-muted { color: var(--text-muted); } .u-text-accent { color: var(--accent-500); } .u-text-success { color: var(--success-400); } .u-text-warning { color: var(--warning-400); } .u-text-danger { color: var(--danger-400); } .u-text-center { text-align: center; } .u-text-sm { font-size: var(--text-sm); } .u-text-xs { font-size: var(--text-xs); } .u-weight-bold { font-weight: var(--weight-bold); } .u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Spacing helpers */ .u-mt-auto { margin-top: auto; } .u-ml-auto { margin-left: auto; } .u-gap-2 { gap: var(--space-2); } .u-gap-3 { gap: var(--space-3); } .u-gap-4 { gap: var(--space-4); } /* Interaction */ .u-pointer { cursor: pointer; } .u-select-none { user-select: none; -webkit-user-select: none; } /* ═══════════════════════════════════════════════ 13. ANIMATION KEYFRAMES Defined once here. Referenced by component rules. ═══════════════════════════════════════════════ */ @keyframes ds-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ds-fade-in-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes ds-slide-in-up { from { opacity: 0; transform: translateY(32px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes ds-scale-in { from { opacity: 0; transform: scale(0.93); } to { opacity: 1; transform: scale(1); } } @keyframes ds-pulse-ring { 0% { transform: scale(1); opacity: 0.7; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } @keyframes ds-shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } } @keyframes ds-spin { to { transform: rotate(360deg); } } @keyframes ds-ocr-progress { from { background-position: 0 0; } to { background-position: 40px 0; } } /* ═══════════════════════════════════════════════ 14. DEPRECATED / OVERRIDDEN LEGACY VALUES These are the old :root tokens from style.css. Mapped forward to the new system so existing component CSS continues to work while we migrate. Remove each entry as the corresponding component CSS is updated in subsequent phases. ═══════════════════════════════════════════════ */ :root { /* Old palette → new palette */ --primary-color: var(--accent-500); --primary-hover: var(--accent-400); --success-color: var(--success-500); --success-hover: var(--success-400); --accent-blue: var(--info-400); --accent-green: var(--success-400); --light-blue: var(--navy-700); --light-green: rgba(39, 174, 96, 0.20); --dark-blue: var(--navy-600); --dark-green: var(--success-600); --text-color: var(--text-primary); --light-text: var(--text-secondary); --bg-color: var(--surface-page); --card-bg: var(--surface-card); --border-color: var(--border-default); --card-shadow: var(--shadow-md); --card-shadow-hover: var(--shadow-lg); --card-radius: var(--radius-xl); --element-radius: var(--radius-lg); --font-base: var(--text-base); --font-h1: var(--text-2xl); --font-button: var(--text-base); /* Missing vars referenced in ansvermodal.css */ --error-color: var(--danger-500); --error-color-dark: var(--danger-600); --purple-color: #7F77DD; /* accent for modal top bar */ --secondary-text: var(--text-muted); }