/* * Tirion Data — Design Tokens & Utilities * Version: 1.0 * * Usage: * @import './tirion-tokens.css'; * * Theme switching: * Dark mode is the default. * Add data-theme="light" to or any ancestor for light mode. * Or add class="tirion-light" to any scoped container. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=JetBrains+Mono:wght@400&display=swap'); /* ─── Raw Palette ─────────────────────────────────────────── */ :root { --tirion-midnight: #211B4A; --tirion-indigo: #3D3182; --tirion-violet: #6A60B8; --tirion-lavender: #AFAAE0; --tirion-frost: #E8E6F7; --tirion-teal: #2FBFA0; --tirion-teal-hover: #25A58A; --tirion-teal-dark: #1A8C73; --tirion-teal-dark-hover:#166359; --tirion-teal-light: #D4EFE9; --tirion-light-bg: #F5F4FC; --tirion-light-surface: #ECEAF9; --tirion-amber: #BA7517; --tirion-amber-bg: rgba(186, 117, 23, 0.12); } /* ─── Dark Mode (default) ─────────────────────────────────── */ :root { --t-bg: var(--tirion-midnight); --t-surface: var(--tirion-indigo); --t-surface-2: rgba(61, 49, 130, 0.35); --t-border: rgba(109, 99, 184, 0.28); --t-border-strong: rgba(109, 99, 184, 0.50); --t-heading: var(--tirion-frost); --t-body: var(--tirion-lavender); --t-muted: #7A74BE; --t-accent: var(--tirion-teal); --t-accent-hover: var(--tirion-teal-hover); --t-accent-bg: rgba(47, 191, 160, 0.10); --t-accent-text: var(--tirion-midnight); --t-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --t-font-mono: 'JetBrains Mono', 'Fira Mono', 'Cascadia Code', monospace; --t-radius-sm: 6px; --t-radius-md: 8px; --t-radius-lg: 12px; --t-radius-pill: 20px; } /* ─── Light Mode ──────────────────────────────────────────── */ [data-theme="light"], .tirion-light { --t-bg: var(--tirion-light-bg); --t-surface: var(--tirion-light-surface); --t-surface-2: rgba(225, 222, 248, 0.60); --t-border: rgba(61, 49, 130, 0.13); --t-border-strong: rgba(61, 49, 130, 0.27); --t-heading: var(--tirion-midnight); --t-body: var(--tirion-indigo); --t-muted: var(--tirion-violet); --t-accent: var(--tirion-teal-dark); --t-accent-hover: var(--tirion-teal-dark-hover); --t-accent-bg: rgba(26, 140, 115, 0.08); --t-accent-text: var(--tirion-light-bg); } /* ─── Base ────────────────────────────────────────────────── */ body { font-family: var(--t-font-sans); background-color: var(--t-bg); color: var(--t-body); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ─── Typography Utilities ────────────────────────────────── */ .t-display { font-size: 36px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: var(--t-heading); } .t-h1 { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; color: var(--t-heading); } .t-h2 { font-size: 20px; font-weight: 500; line-height: 1.3; color: var(--t-heading); } .t-h3 { font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--t-heading); } .t-body { font-size: 15px; font-weight: 400; line-height: 1.65; color: var(--t-body); } .t-small { font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--t-body); } .t-muted { color: var(--t-muted); } .t-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--t-accent); line-height: 1; } .t-mono { font-family: var(--t-font-mono); font-size: 12px; font-weight: 400; color: var(--t-muted); } .t-data { font-family: var(--t-font-mono); font-size: 14px; font-weight: 400; color: var(--t-heading); } /* ─── Buttons ─────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--t-font-sans); font-size: 14px; font-weight: 500; padding: 9px 20px; border-radius: var(--t-radius-sm); cursor: pointer; border: none; transition: background 0.15s, border-color 0.15s, opacity 0.15s; white-space: nowrap; text-decoration: none; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--t-accent); color: var(--t-accent-text); } .btn-primary:hover:not(:disabled) { background: var(--t-accent-hover); } .btn-secondary { background: transparent; color: var(--t-body); border: 0.5px solid var(--t-border-strong); } .btn-secondary:hover:not(:disabled) { background: var(--t-surface-2); } .btn-ghost { background: var(--t-surface); color: var(--t-body); border: 0.5px solid var(--t-border); } .btn-ghost:hover:not(:disabled) { background: var(--t-surface-2); } .btn-sm { font-size: 12px; padding: 6px 14px; } .btn-lg { font-size: 15px; padding: 11px 24px; } /* ─── Tags ────────────────────────────────────────────────── */ .tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: var(--t-radius-pill); white-space: nowrap; } .tag-teal { background: var(--t-accent-bg); color: var(--t-accent); } .tag-neutral { background: var(--t-surface); color: var(--t-body); border: 0.5px solid var(--t-border); } /* ─── Badges ──────────────────────────────────────────────── */ .badge { display: inline-block; font-size: 10px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; white-space: nowrap; } .badge-high { background: rgba(47, 191, 160, 0.15); color: #2FBFA0; } .badge-medium { background: var(--tirion-amber-bg); color: var(--tirion-amber); } .badge-low { background: var(--t-surface-2); color: var(--t-muted); } /* ─── Cards ───────────────────────────────────────────────── */ .card { background: var(--t-surface); border: 0.5px solid var(--t-border-strong); border-radius: var(--t-radius-lg); } .card-section { border-top: 0.5px solid var(--t-border); } /* ─── Signal Block (Prospect card data unit) ──────────────── */ .signal-block { background: var(--t-surface-2); border: 0.5px solid var(--t-border); border-radius: var(--t-radius-md); padding: 10px 12px; } .signal-label { font-size: 10px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--t-muted); margin-bottom: 5px; } .signal-value { font-family: var(--t-font-mono); font-size: 14px; font-weight: 400; color: var(--t-heading); line-height: 1.3; } .signal-sub { font-size: 11px; color: var(--t-body); margin-top: 3px; } /* ─── Capacity Score ──────────────────────────────────────── */ .capacity-score { font-family: var(--t-font-mono); font-size: 32px; font-weight: 400; color: var(--t-accent); letter-spacing: -0.03em; line-height: 1; } .capacity-label { font-size: 10px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--t-muted); margin-top: 3px; } /* ─── Inputs ──────────────────────────────────────────────── */ .input-field { font-family: var(--t-font-sans); font-size: 13px; font-weight: 400; color: var(--t-heading); background: var(--t-surface); border: 0.5px solid var(--t-border-strong); border-radius: var(--t-radius-sm); padding: 9px 13px; width: 100%; outline: none; transition: border-color 0.15s; } .input-field::placeholder { color: var(--t-muted); } .input-field:focus { border-color: var(--t-accent); } /* ─── Avatar / Initials ───────────────────────────────────── */ .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--t-accent-bg); color: var(--t-accent); font-size: 14px; font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .avatar-sm { width: 32px; height: 32px; font-size: 12px; } .avatar-lg { width: 56px; height: 56px; font-size: 17px; } /* ─── Hero Section (always dark) ─────────────────────────── */ .hero-section { background: var(--tirion-midnight) !important; /* Hero overrides any theme — it is always dark */ --t-heading: var(--tirion-frost); --t-body: var(--tirion-lavender); --t-muted: #7A74BE; --t-accent: var(--tirion-teal); --t-surface: var(--tirion-indigo); --t-surface-2: rgba(61, 49, 130, 0.45); --t-border: rgba(109, 99, 184, 0.28); --t-accent-text: var(--tirion-midnight); } /* ─── Stat Card ───────────────────────────────────────────── */ .stat-card { background: var(--t-surface-2); border: 0.5px solid var(--t-border); border-radius: var(--t-radius-md); padding: 14px 16px; } .stat-value { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--t-heading); line-height: 1; } .stat-label { font-size: 12px; color: var(--t-muted); margin-top: 4px; line-height: 1.4; } /* ─── Nav ─────────────────────────────────────────────────── */ .nav-link { font-size: 13px; font-weight: 400; color: var(--t-body); text-decoration: none; transition: color 0.15s; } .nav-link:hover { color: var(--t-heading); } .nav-link.active { color: var(--t-heading); } /* ─── Divider ─────────────────────────────────────────────── */ .divider { border: none; border-top: 0.5px solid var(--t-border); margin: 0; } /* ─── Prospect Card (full pattern) ───────────────────────── */ .prospect-card { background: var(--t-surface); border: 0.5px solid var(--t-border-strong); border-radius: var(--t-radius-lg); overflow: hidden; } .prospect-card__header { padding: 1.25rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 0.5px solid var(--t-border); } .prospect-card__signals { padding: 1rem 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .prospect-card__footer { padding: 10px 1.25rem; border-top: 0.5px solid var(--t-border); display: flex; align-items: center; justify-content: space-between; }