/* ============================================================ ThunderGits — Brand Theme · "Harbor" (Deep Navy & Ember) Generated from the brand color refresh, June 2026. Drop this file in and reference the var(--tg-*) tokens. Dark mode: add class="dark" to , OR rely on the prefers-color-scheme block at the bottom (auto). ============================================================ */ :root { /* ---------- Brand · Blue (primary) ---------- */ --tg-blue-50: #EFF5FB; --tg-blue-100: #E6F0F9; --tg-blue-200: #C6DCF0; --tg-blue-300: #86B4DF; --tg-blue-400: #4F8FCB; --tg-blue-500: #2A6DAE; --tg-blue-600: #1E5286; /* primary */ --tg-blue-700: #173B62; --tg-blue-800: #102A47; --tg-blue-900: #0B1B30; --tg-blue-950: #07101D; /* ---------- Brand · Ember (accent) ---------- */ --tg-ember-50: #FDF2EC; --tg-ember-100: #FAE0D1; --tg-ember-200: #F4C2A3; --tg-ember-300: #F0935A; --tg-ember-400: #E0712F; /* accent */ --tg-ember-500: #C2521F; /* accent deep */ --tg-ember-600: #A4441A; --tg-ember-700: #823715; --tg-ember-800: #5E280F; --tg-ember-900: #3A1809; /* ---------- Neutral · Cool Slate ---------- */ --tg-neutral-0: #FFFFFF; --tg-neutral-50: #F7F9FB; --tg-neutral-100: #EFF2F5; --tg-neutral-200: #D6DDE4; --tg-neutral-300: #B9C3CD; --tg-neutral-400: #9AA7B5; --tg-neutral-500: #6B7785; --tg-neutral-600: #5C6B7C; --tg-neutral-700: #3D4A59; --tg-neutral-800: #2E3B4B; --tg-neutral-900: #1A2330; --tg-neutral-950: #0D1622; /* ---------- Feedback ---------- */ --tg-success: #2F8F6B; --tg-warning: #D6A02E; --tg-danger: #C2452F; --tg-info: #2A6DAE; /* ============================================================ SEMANTIC TOKENS · LIGHT (default) ============================================================ */ --tg-bg: var(--tg-neutral-50); --tg-surface: var(--tg-neutral-0); --tg-surface-sunken: var(--tg-neutral-100); --tg-surface-raised: var(--tg-neutral-0); --tg-text: var(--tg-neutral-950); --tg-text-muted: var(--tg-neutral-600); --tg-text-subtle: var(--tg-neutral-400); --tg-text-on-brand: #FFFFFF; --tg-border: #E1E7EE; --tg-border-strong: #CBD5DF; --tg-primary: var(--tg-blue-600); --tg-primary-hover: var(--tg-blue-700); --tg-primary-active: var(--tg-blue-800); --tg-primary-contrast:#FFFFFF; --tg-primary-subtle: var(--tg-blue-50); --tg-accent: var(--tg-ember-400); --tg-accent-hover: var(--tg-ember-500); --tg-accent-contrast: #FFFFFF; --tg-accent-subtle: var(--tg-ember-50); --tg-link: var(--tg-blue-600); --tg-link-hover: var(--tg-blue-700); --tg-ring: rgba(30, 82, 134, 0.35); /* ---------- Type ---------- */ --tg-font-display: "Manrope", ui-sans-serif, system-ui, sans-serif; --tg-font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; --tg-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; --tg-text-xs: 0.75rem; --tg-text-sm: 0.875rem; --tg-text-base: 1rem; --tg-text-lg: 1.125rem; --tg-text-xl: 1.375rem; --tg-text-2xl: 1.75rem; --tg-text-3xl: 2.5rem; --tg-text-4xl: 3.5rem; --tg-weight-regular: 400; --tg-weight-medium: 500; --tg-weight-semibold:600; --tg-weight-bold: 800; /* ---------- Radius ---------- */ --tg-radius-sm: 6px; --tg-radius-md: 9px; --tg-radius-lg: 14px; --tg-radius-xl: 20px; --tg-radius-full: 999px; /* ---------- Elevation ---------- */ --tg-shadow-sm: 0 1px 2px rgba(13, 22, 34, 0.06); --tg-shadow-md: 0 4px 14px rgba(13, 22, 34, 0.08); --tg-shadow-lg: 0 12px 32px rgba(13, 22, 34, 0.12); /* ---------- Spacing scale (4pt) ---------- */ --tg-space-1: 4px; --tg-space-2: 8px; --tg-space-3: 12px; --tg-space-4: 16px; --tg-space-6: 24px; --tg-space-8: 32px; --tg-space-12: 48px; --tg-space-16: 64px; color-scheme: light; } /* ============================================================ SEMANTIC TOKENS · DARK Activate with (or [data-theme="dark"]). ============================================================ */ :root.dark, :root[data-theme="dark"] { --tg-bg: var(--tg-blue-900); --tg-surface: #112E4D; --tg-surface-sunken: var(--tg-blue-950); --tg-surface-raised: #163A5E; --tg-text: var(--tg-blue-100); --tg-text-muted: #9DB3C9; --tg-text-subtle: #6E8198; --tg-text-on-brand: var(--tg-blue-950); --tg-border: #1C3A5C; --tg-border-strong: #2A4E73; --tg-primary: var(--tg-blue-400); --tg-primary-hover: var(--tg-blue-300); --tg-primary-active: var(--tg-blue-200); --tg-primary-contrast:var(--tg-blue-950); --tg-primary-subtle: rgba(79, 143, 203, 0.14); --tg-accent: var(--tg-ember-300); --tg-accent-hover: #F4A877; --tg-accent-contrast: var(--tg-blue-950); --tg-accent-subtle: rgba(240, 147, 90, 0.14); --tg-link: var(--tg-blue-300); --tg-link-hover: var(--tg-blue-200); --tg-ring: rgba(79, 143, 203, 0.45); --tg-success: #45A883; --tg-warning: #E4B859; --tg-danger: #E0715C; --tg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --tg-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45); --tg-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); color-scheme: dark; } /* Auto dark mode — remove if you only want manual (class-based) switching. */ @media (prefers-color-scheme: dark) { :root:not(.dark):not([data-theme="light"]) { --tg-bg: var(--tg-blue-900); --tg-surface: #112E4D; --tg-surface-sunken: var(--tg-blue-950); --tg-surface-raised: #163A5E; --tg-text: var(--tg-blue-100); --tg-text-muted: #9DB3C9; --tg-text-subtle: #6E8198; --tg-text-on-brand: var(--tg-blue-950); --tg-border: #1C3A5C; --tg-border-strong: #2A4E73; --tg-primary: var(--tg-blue-400); --tg-primary-hover: var(--tg-blue-300); --tg-primary-active: var(--tg-blue-200); --tg-primary-contrast:var(--tg-blue-950); --tg-primary-subtle: rgba(79, 143, 203, 0.14); --tg-accent: var(--tg-ember-300); --tg-accent-hover: #F4A877; --tg-accent-contrast: var(--tg-blue-950); --tg-accent-subtle: rgba(240, 147, 90, 0.14); --tg-link: var(--tg-blue-300); --tg-link-hover: var(--tg-blue-200); --tg-ring: rgba(79, 143, 203, 0.45); --tg-success: #45A883; --tg-warning: #E4B859; --tg-danger: #E0715C; color-scheme: dark; } } /* ============================================================ BASE ============================================================ */ body { font-family: var(--tg-font-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--tg-font-display); font-weight: var(--tg-weight-bold); letter-spacing: -0.02em; } a { color: inherit; text-decoration: none; } :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--tg-ring); } /* ============================================================ COMPONENT PATTERNS ============================================================ */ .tg-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--tg-font-display); font-weight: var(--tg-weight-semibold); font-size: var(--tg-text-sm); line-height: 1; padding: 12px 20px; border-radius: var(--tg-radius-md); border: 1px solid transparent; cursor: pointer; transition: background .15s, color .15s; } .tg-btn--primary { background: var(--tg-primary); color: var(--tg-primary-contrast); } .tg-btn--primary:hover { background: var(--tg-primary-hover); } .tg-btn--accent { background: var(--tg-accent); color: var(--tg-accent-contrast); } .tg-btn--accent:hover { background: var(--tg-accent-hover); } .tg-btn--ghost { background: transparent; color: var(--tg-text); border-color: var(--tg-border); } .tg-btn--ghost:hover { border-color: var(--tg-border-strong); } .tg-card { background: var(--tg-surface); border: 1px solid var(--tg-border); border-radius: var(--tg-radius-lg); box-shadow: var(--tg-shadow-sm); } .tg-eyebrow { font-family: var(--tg-font-display); font-size: var(--tg-text-xs); font-weight: var(--tg-weight-bold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tg-accent); }