/* ────────────────────────────────────────────────────────────────────── TRINITY DESIGN SYSTEM — Color & Type tokens Source of truth: source/trinity-web (React/Vite) + source/trinity-app (Flutter) Brand brief: Trinity is a DaaS (Desktop-as-a-Service) for home users. Dark, accessible, warm-accent, slightly "TV / Netflix" feel. ──────────────────────────────────────────────────────────────────── */ /* Inter is loaded from Google Fonts — the trinity-web codebase references the `Inter` family in its CSS but does not ship a webfont file; Google Fonts is the closest documented substitute. Replace this import with a self-hosted woff2 in /fonts/ when you have one. */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap"); :root { /* ── PALETTE ────────────────────────────────────────────────────── */ --tr-bg-1: #0F0F13; /* page background — blue-tinged near-black */ --tr-bg-2: #1A1A24; /* cards & panels */ --tr-bg-3: #1e1e2a; /* nested surface / inactive chip */ --tr-bg-4: #0F0F13; /* metric well inside a card */ --tr-line: #2a2a3a; /* hairline borders, dividers */ --tr-line-soft: #1e1e2a; /* row separators inside tables */ --tr-fg-1: #F5F5F5; /* primary text — soft white, never #fff */ --tr-fg-2: #9999AA; /* secondary / labels */ --tr-fg-3: #666666; /* tertiary / meta */ --tr-fg-4: #555555; /* footnote / version mark */ --tr-accent: #FF6B35; /* primary brand — warm orange */ --tr-accent-hi: #e85a25; /* primary hover / pressed */ --tr-amber: #FFB347; /* secondary accent — warning / paused */ --tr-success: #5cb85c; /* status: running / on */ --tr-danger: #cc4444; /* status: error / destructive */ --tr-info: #9999DD; /* type tag for "essential" / info hue */ /* Tinted backgrounds — semi-transparent badge fills */ --tr-accent-15: rgba(255,107,53,0.15); --tr-accent-22: rgba(255,107,53,0.14); --tr-amber-15: rgba(255,179,71,0.15); --tr-success-15: rgba(92,184,92,0.15); --tr-danger-15: rgba(204,68,68,0.15); --tr-info-15: rgba(100,100,220,0.15); /* Status pill backgrounds (deep tints used in StatusBadge) */ --tr-pill-success: #1a2e1a; --tr-pill-amber: #2a2a1a; --tr-pill-danger: #2a1a1a; --tr-pill-muted: #1e1e28; /* ── TYPOGRAPHY ─────────────────────────────────────────────────── */ --tr-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --tr-font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; /* Sizes — rooted in actual usage in the codebase */ --tr-size-display: 56px; /* Login wordmark TRINITY */ --tr-size-h1: 34px; /* Big dashboard metric */ --tr-size-h2: 22px; /* Card metric value */ --tr-size-h3: 20px; /* Page title (h2 in code: "Dashboard") */ --tr-size-body: 15px; /* Inputs, buttons */ --tr-size-text: 14px; /* Default body text */ --tr-size-meta: 13px; /* Card body / detail */ --tr-size-label: 12px; /* Secondary line, status chip */ --tr-size-caption: 11px; /* UPPERCASE LABELS, table headers */ --tr-size-tiny: 10px; /* metric mini-label, sub-meta */ /* Line-heights */ --tr-lh-tight: 1.1; --tr-lh-snug: 1.35; --tr-lh-normal: 1.5; /* Letter-spacing — Trinity uses VERY wide tracking on hero & labels. */ --tr-track-display: 12px; /* TRINITY wordmark */ --tr-track-hero: 4px; /* Tagline under the wordmark */ --tr-track-caps: 1.5px;/* Form labels, meta uppercase */ --tr-track-button: 1px; /* CTA buttons */ /* ── SHAPE ──────────────────────────────────────────────────────── */ --tr-radius-xs: 4px; /* small buttons, filter chips */ --tr-radius-sm: 5px; /* default button radius */ --tr-radius-md: 6px; /* form inputs */ --tr-radius-lg: 8px; /* nested wells, type cards */ --tr-radius-xl: 10px; /* main cards */ --tr-radius-2xl:12px; /* modal */ --tr-radius-pill: 99px;/* badges, type tags */ /* ── SPACING ────────────────────────────────────────────────────── */ --tr-space-1: 4px; --tr-space-2: 8px; --tr-space-3: 10px; --tr-space-4: 12px; --tr-space-5: 16px; --tr-space-6: 20px; --tr-space-7: 22px; /* card padding */ --tr-space-8: 24px; --tr-space-9: 28px; --tr-space-10:32px; /* page horizontal padding */ --tr-space-11:36px; /* page top padding */ /* ── ELEVATION ──────────────────────────────────────────────────── */ --tr-shadow-tooltip: 0 4px 12px rgba(0,0,0,0.4); --tr-shadow-glow: 0 0 6px var(--tr-success); /* connected dot */ --tr-shadow-fab: 0 2px 8px rgba(255,107,53,0.4); /* sidebar pull */ --tr-shadow-card: 0 6px 24px rgba(0,0,0,0.32); /* ── MOTION ─────────────────────────────────────────────────────── */ --tr-ease: cubic-bezier(.22,.61,.36,1); --tr-dur-fast: 0.15s; --tr-dur-base: 0.25s; --tr-dur-slow: 0.6s; } /* ── SEMANTIC ELEMENT MAP ─────────────────────────────────────────── */ body { background: var(--tr-bg-1); color: var(--tr-fg-1); font-family: var(--tr-font-sans); font-size: var(--tr-size-text); line-height: var(--tr-lh-normal); -webkit-font-smoothing: antialiased; } h1, .tr-h1 { font-size: var(--tr-size-h1); font-weight: 700; line-height: var(--tr-lh-tight); color: var(--tr-fg-1); letter-spacing: 0; } h2, .tr-h2 { font-size: var(--tr-size-h3); /* page titles in Trinity are 20px */ font-weight: 600; color: var(--tr-fg-1); } h3, .tr-h3 { font-size: var(--tr-size-meta); font-weight: 600; color: var(--tr-fg-1); } /* The signature wordmark / hero treatment */ .tr-display { font-size: var(--tr-size-display); font-weight: 900; letter-spacing: var(--tr-track-display); line-height: 1; color: var(--tr-accent); } .tr-tagline { font-size: var(--tr-size-label); letter-spacing: var(--tr-track-hero); color: var(--tr-fg-2); text-transform: uppercase; } /* Field label — used everywhere */ .tr-label { display: block; color: var(--tr-fg-2); font-size: var(--tr-size-caption); font-weight: 600; letter-spacing: var(--tr-track-caps); text-transform: uppercase; } .tr-meta { color: var(--tr-fg-2); font-size: var(--tr-size-meta); } .tr-mono { font-family: var(--tr-font-mono); }