/* ═══════════════════════════════════════════════════════════ JustYes.ID — Design Tokens ═══════════════════════════════════════════════════════════ Two palettes: [data-theme="warm"] → User & partner-facing pages [data-theme="security"] → Compliance, regulatory, dev docs Usage: → index, onboard, profile, partner, browse → trust, audit, docs, api-reference ═══════════════════════════════════════════════════════════ */ /* ─── Shared Reset ─── */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; } /* ─── Typography ─── */ :root { --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: var(--font-sans); --font-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', monospace; } /* ═══════════════════════════════════════════════════════════ WARM PALETTE Pages: index.html, onboard.html, profile.html, partner.html, browse.html Personality: Approachable, warm, trustworthy Audience: End users, partners, businesses ═══════════════════════════════════════════════════════════ */ [data-theme="warm"] { /* ── Core ── */ --primary: #F28705; /* Amber — CTAs, links, active states */ --primary-hover: #d97706; /* Amber dark — hover states */ --primary-dim: rgba(242, 135, 5, 0.10); /* Amber tint — badges, tags */ --primary-border: rgba(242, 135, 5, 0.25); /* Amber border */ /* ── Surfaces ── */ --bg-page: #1a0f00; /* Page background */ --bg-surface: #402401; /* Card / panel background */ --bg-surface-hover: #4a2d08; /* Card hover */ --bg-input: #1a0f00; /* Input / textarea background */ --bg-elevated: #523310; /* Elevated surface (modals, dropdowns) */ /* ── Borders ── */ --border: rgba(140, 78, 3, 0.30); /* Default border */ --border-light: rgba(140, 78, 3, 0.15); /* Subtle dividers */ --border-focus: #F28705; /* Focus ring */ /* ── Text ── */ --text: #F2F2F2; /* Primary text */ --text-secondary: rgba(242, 242, 242, 0.70); /* Secondary text */ --text-dim: rgba(242, 242, 242, 0.60); /* Dimmed / placeholder */ --text-muted: rgba(242, 242, 242, 0.40); /* Muted labels */ --text-on-primary: #402401; /* Text on primary-colored backgrounds */ /* ── Semantic ── */ --success: #22c55e; --success-dim: rgba(34, 197, 94, 0.13); --error: #ef4444; --error-dim: rgba(239, 68, 68, 0.13); --warning: #eab308; --warning-dim: rgba(234, 179, 8, 0.13); --info: #3b82f6; --info-dim: rgba(59, 130, 246, 0.13); } /* ═══════════════════════════════════════════════════════════ SECURITY PALETTE Pages: trust.html, audit.html, docs.html, api-reference.html Personality: Government-grade, technical, institutional Audience: Regulators, legal teams, developers, auditors ═══════════════════════════════════════════════════════════ */ [data-theme="security"] { /* ── Core ── */ --primary: #10b981; /* Compliance Green — certified, approved */ --primary-hover: #059669; /* Green dark — hover */ --primary-dim: rgba(16, 185, 129, 0.12); /* Green tint */ --primary-border: rgba(16, 185, 129, 0.25); /* Green border */ /* ── Surfaces ── */ --bg-page: #0f172a; /* Navy — page background */ --bg-surface: #1e293b; /* Surface (cards, panels) */ --bg-surface-hover: #263548; /* Surface hover */ --bg-input: #0f172a; /* Input background */ --bg-elevated: #334155; /* Elevated surface */ /* ── Borders ── */ --border: rgba(148, 163, 184, 0.12); /* Default border */ --border-light: rgba(148, 163, 184, 0.08); /* Subtle dividers */ --border-focus: #10b981; /* Focus ring */ /* ── Text ── */ --text: #f1f5f9; /* Primary text */ --text-secondary: #cbd5e1; /* Secondary text */ --text-dim: #94a3b8; /* Dimmed / placeholder */ --text-muted: #64748b; /* Muted labels */ --text-on-primary: #0f172a; /* Text on primary-colored backgrounds */ /* ── Semantic ── */ --success: #10b981; --success-dim: rgba(16, 185, 129, 0.12); --error: #ef4444; --error-dim: rgba(239, 68, 68, 0.12); --warning: #f59e0b; --warning-dim: rgba(245, 158, 11, 0.12); --info: #3b82f6; --info-dim: rgba(59, 130, 246, 0.12); /* ── Security-specific ── */ --accent-blue: #3b82f6; /* Technical elements, API, links */ --accent-blue-dim: rgba(59, 130, 246, 0.12); --accent-purple: #a855f7; /* Zero-knowledge, privacy badges */ --accent-purple-dim: rgba(168, 85, 247, 0.12); --accent-amber: #F28705; /* In-progress, onboarding (brand amber) */ --accent-amber-dim: rgba(242, 135, 5, 0.12); /* ── Hint Accent (shared vocabulary) ── */ /* Use for tips, nudges, "BETA" labels, onboarding callouts, in-progress */ /* states. Green = safety/approval, Hint (amber) = attention-without-alarm. */ --hint: #F28705; --hint-dim: rgba(242, 135, 5, 0.12); --hint-border: rgba(242, 135, 5, 0.25); --text-on-hint: #1a0f00; /* Dark brown text on amber surfaces */ } /* ═══════════════════════════════════════════════════════════ SHARED BASE STYLES Applied regardless of theme ═══════════════════════════════════════════════════════════ */ body { font-family: var(--font-sans); font-feature-settings: "cv02", "cv03", "cv04", "cv11"; background: var(--bg-page); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code, .mono, .monospace { font-family: var(--font-mono); } /* ─── Focus States ─── */ :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } input:focus, textarea:focus, select:focus { border-color: var(--border-focus); outline: none; } /* ─── Scrollbar (Webkit) ─── */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-page); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ─── Selection ─── */ ::selection { background: var(--primary); color: var(--text-on-primary); }