/* ============================================================
TYPFOON GAMING DESIGN SYSTEM — RETRO SIGNAGE
Generated by the JP Design System Generator
Brand + "retro-signage" style archetype · six-layer source architecture
Tokens, themes, components, patterns, utilities, and applications
are composed into this convenience bundle.
============================================================ */
/* ============================================================
0. BRAND CONFIGURATION BLOCK
============================================================ */
:root {
/* --- Identity --- */
--brand-prefix: tg;
--brand-name: 'Typfoon Gaming';
/* --- Primary Accent --- */
--brand-primary: #5ed3e9;
--brand-primary-hover: #449cad;
/* --- Secondary Accent --- */
--brand-secondary: #7657d6;
--brand-secondary-hover: #563e9e;
/* --- Complement --- */
--brand-complement: #ff6b4a;
/* --- Neutral Surfaces & Text --- */
--brand-darkest: #17212b;
--brand-dark: #202f36;
/* --- Status Colors --- */
--brand-success: #39b86a;
--brand-info: #3478f6;
--brand-danger: #e5484d;
--brand-warning: #f0a52b;
--brand-rating: #e6c229;
/* --- Typography --- */
--brand-font-sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--brand-font-body: var(--brand-font-sans);
--brand-font-heading: 'Bungee', system-ui, -apple-system, 'Segoe UI', sans-serif;
--brand-font-url: 'https://fonts.googleapis.com/css2?family=Bungee:wght@400;500;600;700;800&family=Nunito+Sans:wght@400;500;600;700;800&display=swap';
/* --- Shape --- */
--brand-radius-base: 12px;
/* --- Pattern (optional hero texture) --- */
--brand-hero-pattern: none;
}
/* ============================================================
1a. RAW PRIMITIVE COLOR RAMPS (generated — engine/ramps.js)
============================================================ */
:root {
/* primary (#5ed3e9) — OKLCh L=0.808 C=0.109 h=211.9° */
--tg-raw-primary-50: #f5fcfe;
--tg-raw-primary-100: #eaf9fc;
--tg-raw-primary-200: #d1f2f8;
--tg-raw-primary-300: #b0e8f4;
--tg-raw-primary-400: #89ddee;
--tg-raw-primary-500: #5ed3e9; /* ← --brand-primary */
--tg-raw-primary-600: #449cad;
--tg-raw-primary-700: #317582;
--tg-raw-primary-800: #1d4c55;
--tg-raw-primary-900: #0a2429;
/* secondary (#7657d6) — OKLCh L=0.556 C=0.186 h=290.2° */
--tg-raw-secondary-50: #f4f3fd;
--tg-raw-secondary-100: #e8e6fb;
--tg-raw-secondary-200: #cfcaf5;
--tg-raw-secondary-300: #b0a6ed;
--tg-raw-secondary-400: #907ee2;
--tg-raw-secondary-500: #7657d6; /* ← --brand-secondary */
--tg-raw-secondary-600: #563e9e;
--tg-raw-secondary-700: #3f2d77;
--tg-raw-secondary-800: #271a4d;
--tg-raw-secondary-900: #0f0825;
/* complement (#ff6b4a) — OKLCh L=0.707 C=0.187 h=34.1° */
--tg-raw-complement-50: #fff5f2;
--tg-raw-complement-100: #ffeae4;
--tg-raw-complement-200: #ffd3c6;
--tg-raw-complement-300: #ffb39f;
--tg-raw-complement-400: #ff8f74;
--tg-raw-complement-500: #ff6b4a; /* ← --brand-complement */
--tg-raw-complement-600: #be4e35;
--tg-raw-complement-700: #8f3925;
--tg-raw-complement-800: #5d2215;
--tg-raw-complement-900: #2e0d06;
/* success (#39b86a) — OKLCh L=0.695 C=0.158 h=152.3° */
--tg-raw-success-50: #f3faf4;
--tg-raw-success-100: #e5f5e8;
--tg-raw-success-200: #c7e9cf;
--tg-raw-success-300: #9fdaae;
--tg-raw-success-400: #70c88b;
--tg-raw-success-500: #39b86a; /* ← --brand-success */
--tg-raw-success-600: #28884d;
--tg-raw-success-700: #1b6638;
--tg-raw-success-800: #0e4122;
--tg-raw-success-900: #041e0d;
/* info (#3478f6) — OKLCh L=0.600 C=0.201 h=261.4° */
--tg-raw-info-50: #f1f6ff;
--tg-raw-info-100: #e0ecff;
--tg-raw-info-200: #bed6ff;
--tg-raw-info-300: #92b9ff;
--tg-raw-info-400: #6298fb;
--tg-raw-info-500: #3478f6; /* ← --brand-info */
--tg-raw-info-600: #2457b7;
--tg-raw-info-700: #19408a;
--tg-raw-info-800: #0c285a;
--tg-raw-info-900: #03102c;
/* danger (#e5484d) — OKLCh L=0.626 C=0.193 h=23.0° */
--tg-raw-danger-50: #fff3f2;
--tg-raw-danger-100: #ffe5e3;
--tg-raw-danger-200: #fec8c5;
--tg-raw-danger-300: #f9a29d;
--tg-raw-danger-400: #f07674;
--tg-raw-danger-500: #e5484d; /* ← --brand-danger */
--tg-raw-danger-600: #aa3337;
--tg-raw-danger-700: #802427;
--tg-raw-danger-800: #531416;
--tg-raw-danger-900: #280607;
/* warning (#f0a52b) — OKLCh L=0.776 C=0.153 h=73.5° */
--tg-raw-warning-50: #fef9f2;
--tg-raw-warning-100: #fef2e4;
--tg-raw-warning-200: #fce3c4;
--tg-raw-warning-300: #f9d09a;
--tg-raw-warning-400: #f5ba69;
--tg-raw-warning-500: #f0a52b; /* ← --brand-warning */
--tg-raw-warning-600: #b2791d;
--tg-raw-warning-700: #865a13;
--tg-raw-warning-800: #573a09;
--tg-raw-warning-900: #2a1a02;
/* rating (#e6c229) — OKLCh L=0.822 C=0.159 h=94.4° */
--tg-raw-rating-50: #fdfbf3;
--tg-raw-rating-100: #fbf6e5;
--tg-raw-rating-200: #f7ecc6;
--tg-raw-rating-300: #f1df9d;
--tg-raw-rating-400: #ebd06c;
--tg-raw-rating-500: #e6c229; /* ← --brand-rating */
--tg-raw-rating-600: #ab8f1c;
--tg-raw-rating-700: #806b12;
--tg-raw-rating-800: #534508;
--tg-raw-rating-900: #282002;
/* neutral — hue from primary (#5ed3e9), C≈0.008, h=211.9° */
--tg-raw-neutral-0: #f9ffff;
--tg-raw-neutral-50: #f0f7f9;
--tg-raw-neutral-100: #e4ebed;
--tg-raw-neutral-200: #d5dcde;
--tg-raw-neutral-300: #b1b8ba;
--tg-raw-neutral-400: #899091;
--tg-raw-neutral-500: #5b6162;
--tg-raw-neutral-600: #383e3f;
--tg-raw-neutral-700: #202627;
--tg-raw-neutral-800: #1e2425;
--tg-raw-neutral-900: #14191a;
--tg-raw-neutral-950: #0d1213;
}
/* ============================================================
2. SEMANTIC TOKENS
============================================================ */
:root {
/* --- 2a. Accent colors — primary & secondary --- */
--tg-color-brand-primary: var(--tg-raw-primary-500);
--tg-color-brand-primary-hover: var(--tg-raw-primary-600);
--tg-color-brand-primary-subtle: var(--tg-raw-primary-100);
--tg-color-brand-primary-text: var(--tg-color-brand-primary-on-light);
--tg-color-brand-primary-on-light: var(--tg-raw-primary-700); /* 5.25:1 vs light surface */
--tg-color-brand-primary-on-dark: var(--tg-raw-primary-500); /* 7.87:1 vs dark surface */
--tg-color-brand-secondary: var(--tg-raw-secondary-500);
--tg-color-brand-secondary-hover: var(--tg-raw-secondary-600);
--tg-color-brand-secondary-subtle: var(--tg-raw-secondary-100);
--tg-color-brand-secondary-text: var(--tg-color-brand-secondary-on-light);
--tg-color-brand-secondary-on-light: var(--tg-raw-secondary-500); /* 5.12:1 vs light surface */
--tg-color-brand-secondary-on-dark: var(--tg-raw-secondary-300); /* 6.26:1 vs dark surface */
/* Link tokens */
--tg-link-color: var(--tg-color-brand-primary-text);
--tg-link-color-hover: var(--tg-raw-primary-700);
--tg-link-underline-color: color-mix(in srgb, var(--tg-color-brand-primary-text) 40%, transparent);
/* Complement */
--tg-color-complement: var(--tg-raw-complement-500);
/* On-color tokens — text/icon color ON a filled colored surface */
--tg-on-brand-primary: #17212b;
--tg-on-brand-secondary: #ffffff;
--tg-on-success: #17212b;
--tg-on-rating: #17212b;
--tg-on-danger: #17212b;
--tg-on-warning: #17212b;
--tg-on-info: #ffffff;
--tg-color-toggle-off-track: var(--tg-raw-neutral-500);
--tg-color-toggle-off-thumb: #ffffff;
/* --- 2b. Neutral text, surfaces --- */
--tg-color-text-primary: #17212b;
--tg-color-text-secondary: #52606d;
--tg-color-text-muted: #7d8a96;
--tg-color-text-subtle: var(--tg-raw-neutral-400);
--tg-color-text-disabled: var(--tg-raw-neutral-300);
--tg-color-text-inverse: var(--tg-raw-neutral-0);
--tg-surface-base: #ffffff;
--tg-surface-raised: #f5fafb;
--tg-surface-sunken: #eaf4f6;
/* --- 2c. Status colors (light-surface resolved stops) --- */
--tg-color-success-subtle: var(--tg-raw-success-100);
--tg-color-success: var(--tg-raw-success-500);
--tg-color-success-hover: var(--tg-raw-success-600);
--tg-color-success-border: var(--tg-raw-success-300);
--tg-color-success-icon: var(--tg-raw-success-700);
--tg-color-success-text: var(--tg-raw-success-700); /* 6.99:1 vs light surface */
--tg-color-info-subtle: var(--tg-raw-info-100);
--tg-color-info: var(--tg-raw-info-500);
--tg-color-info-hover: var(--tg-raw-info-600);
--tg-color-info-border: var(--tg-raw-info-300);
--tg-color-info-icon: var(--tg-raw-info-600);
--tg-color-info-text: var(--tg-raw-info-600); /* 6.73:1 vs light surface */
--tg-color-danger-subtle: var(--tg-raw-danger-100);
--tg-color-danger: var(--tg-raw-danger-500);
--tg-color-danger-hover: var(--tg-raw-danger-600);
--tg-color-danger-border: var(--tg-raw-danger-300);
--tg-color-danger-icon: var(--tg-raw-danger-600);
--tg-color-danger-text: var(--tg-raw-danger-600); /* 6.49:1 vs light surface */
--tg-color-warning-subtle: var(--tg-raw-warning-100);
--tg-color-warning: var(--tg-raw-warning-500);
--tg-color-warning-hover: var(--tg-raw-warning-600);
--tg-color-warning-border: var(--tg-raw-warning-300);
--tg-color-warning-icon: var(--tg-raw-warning-700);
--tg-color-warning-text: var(--tg-raw-warning-700); /* 6.02:1 vs light surface */
--tg-color-rating-subtle: var(--tg-raw-rating-100);
--tg-color-rating: var(--tg-raw-rating-500);
--tg-color-rating-hover: var(--tg-raw-rating-600);
--tg-color-rating-border: var(--tg-raw-rating-300);
--tg-color-rating-icon: var(--tg-raw-rating-700);
--tg-color-rating-text: var(--tg-raw-rating-700); /* 5.21:1 vs light surface */
/* --- 2d. Borders --- */
--tg-border-subtle: rgba(82, 96, 109, 0.16);
--tg-border-default: rgba(82, 96, 109, 0.3);
--tg-border-strong: rgba(82, 96, 109, 0.48);
--tg-pattern-line: rgba(0, 0, 0, 0.08);
/* --- 2e. Typography (fluid scale — engine/scales.js) --- */
--tg-font-sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--tg-font-body: var(--tg-font-sans);
--tg-font-heading: 'Bungee', system-ui, -apple-system, 'Segoe UI', sans-serif;
--tg-font-size-xs: clamp(0.75rem, 0.7255rem + 0.1087vw, 0.8125rem);
--tg-font-size-sm: clamp(0.8125rem, 0.7636rem + 0.2174vw, 0.9375rem);
--tg-font-size-base: clamp(1rem, 0.9755rem + 0.1087vw, 1.0625rem);
--tg-font-size-body: clamp(1.125rem, 1.0957rem + 0.1304vw, 1.2rem);
--tg-font-size-lg: clamp(1.125rem, 1.0516rem + 0.3261vw, 1.3125rem);
--tg-font-size-xl: clamp(1.25rem, 1.1033rem + 0.6522vw, 1.625rem);
--tg-font-size-2xl: clamp(1.375rem, 1.1304rem + 1.087vw, 2rem);
--tg-font-size-3xl: clamp(1.75rem, 1.3832rem + 1.6304vw, 2.6875rem);
--tg-font-size-4xl: clamp(2.1875rem, 1.6005rem + 2.6087vw, 3.6875rem);
--tg-font-size-hero: clamp(2.6875rem, 1.7582rem + 4.1304vw, 5.0625rem);
--tg-weight-normal: 400;
--tg-weight-medium: 600;
--tg-weight-semi: 700;
--tg-weight-bold: 800;
--tg-weight-display: 800;
--tg-leading-tight: 1.1;
--tg-leading-heading: 1.15;
--tg-leading-normal: 1.6;
--tg-leading-ui: 1.4;
--tg-leading-loose: 1.8;
/* Semantic label roles. Sentence case is the durable UI default;
overlines are opt-in for brief display labels and section markers. */
--tg-label-font-size: var(--tg-font-size-xs);
--tg-label-font-weight: var(--tg-weight-semi);
--tg-label-line-height: var(--tg-leading-ui);
--tg-label-color: var(--tg-color-text-muted);
--tg-label-caps-tracking: var(--tg-tracking-caps, 0.07em);
/* --- 2f. Spacing (hybrid fixed/fluid — engine/scales.js) --- */
--tg-space-1: 0.25rem;
--tg-space-2: 0.5rem;
--tg-space-3: 0.75rem;
--tg-space-4: 1rem;
--tg-space-5: 1.25rem;
--tg-space-6: 1.5rem;
--tg-space-7: 1.75rem;
--tg-space-8: clamp(1.75rem, 1.4565rem + 1.3043vw, 2.5rem);
--tg-space-10: clamp(2.0625rem, 1.5734rem + 2.1739vw, 3.3125rem);
--tg-space-12: clamp(2.5rem, 1.7418rem + 3.3696vw, 4.4375rem);
--tg-space-16: clamp(2.9375rem, 1.788rem + 5.1087vw, 5.875rem);
--tg-section-padding-y: var(--tg-space-16);
--tg-section-padding-x: var(--tg-space-6);
--tg-card-padding: var(--tg-space-8);
--tg-grid-gap: var(--tg-space-8);
--tg-container-max: 1200px;
--tg-container-max-wide: 1440px;
--tg-container-max-narrow: 720px;
--tg-container-padding: var(--tg-space-6);
/* --- 2g. Borders & radius --- */
--tg-radius-sm: 6px;
--tg-radius-md: 12px;
--tg-radius-lg: 18px;
--tg-radius-xl: 24px;
--tg-radius-2xl: 32px;
--tg-radius-full: 9999px;
--tg-border-width: 1.5px;
--tg-border-width-thick: 2.5px;
/* --- 2h. Shadows (archetype shape: three-layer) --- */
--tg-shadow-xs: 0 2px 3px rgba(64, 34, 12, 0.08), 0 3px 6px rgba(64, 34, 12, 0.06), 0 2px 8px rgba(64, 34, 12, 0.04);
--tg-shadow-sm: 0 2px 4px rgba(64, 34, 12, 0.10), 0 4px 10px rgba(64, 34, 12, 0.08), 0 6px 16px rgba(64, 34, 12, 0.05);
--tg-shadow-md: 0 3px 6px rgba(64, 34, 12, 0.09), 0 8px 20px rgba(64, 34, 12, 0.11), 0 16px 34px rgba(64, 34, 12, 0.07);
--tg-shadow-lg: 0 6px 12px rgba(64, 34, 12, 0.11), 0 16px 34px rgba(64, 34, 12, 0.14), 0 30px 54px rgba(64, 34, 12, 0.09);
--tg-shadow-xl: 0 10px 20px rgba(64, 34, 12, 0.13), 0 24px 52px rgba(64, 34, 12, 0.16), 0 44px 84px rgba(64, 34, 12, 0.10);
--tg-shadow-glow: 0 0 20px color-mix(in srgb, var(--tg-color-brand-primary) 30%, transparent);
--tg-shadow-glow-lg: 0 0 40px color-mix(in srgb, var(--tg-color-brand-primary) 42%, transparent);
--tg-shadow-card-rest: 0 0 0 0 transparent;
/* --- Archetype structural hatches --- */
--tg-card-texture: repeating-linear-gradient(45deg, var(--tg-border-subtle) 0, var(--tg-border-subtle) 1px, transparent 1px, transparent 7px);
/* --- 2i. Motion system --- */
--tg-duration-instant: 50ms;
--tg-duration-fast: 120ms;
--tg-duration-base: 200ms;
--tg-duration-slow: 340ms;
--tg-duration-slower: 520ms;
--tg-ease-standard: cubic-bezier(0.34, 0, 0.2, 1);
--tg-ease-out: cubic-bezier(0.2, 1, 0.4, 1);
--tg-ease-in: cubic-bezier(0.6, 0, 0.85, 0);
--tg-ease-spring: cubic-bezier(0.4, 1.3, 0.5, 1);
--tg-transition-colors:
color var(--tg-duration-base) var(--tg-ease-standard),
background-color var(--tg-duration-base) var(--tg-ease-standard),
border-color var(--tg-duration-base) var(--tg-ease-standard);
--tg-transition-transform:
transform var(--tg-duration-base) var(--tg-ease-out);
--tg-transition-shadow:
box-shadow var(--tg-duration-base) var(--tg-ease-out);
--tg-transition-opacity:
opacity var(--tg-duration-base) var(--tg-ease-standard);
--tg-transition-button:
color var(--tg-duration-base) var(--tg-ease-standard),
background-color var(--tg-duration-base) var(--tg-ease-standard),
border-color var(--tg-duration-base) var(--tg-ease-standard),
box-shadow var(--tg-duration-base) var(--tg-ease-out),
transform var(--tg-duration-fast) var(--tg-ease-out);
--tg-transition-card:
border-color var(--tg-duration-base) var(--tg-ease-standard),
box-shadow var(--tg-duration-base) var(--tg-ease-out),
transform var(--tg-duration-base) var(--tg-ease-out);
--tg-transition-panel:
opacity var(--tg-duration-slow) var(--tg-ease-out),
transform var(--tg-duration-slow) var(--tg-ease-out);
--tg-hover-lift-sm: translateY(-1px);
--tg-hover-lift-md: translateY(-2px);
--tg-hover-lift-lg: translateY(-4px);
--tg-active-press: translateY(0);
--tg-hover-scale-sm: scale(1.01);
--tg-hover-scale-md: scale(1.03);
/* --- 2j. Interaction layer --- */
--tg-color-focus-ring: color-mix(in srgb, var(--tg-color-brand-primary) 50%, transparent);
--tg-color-overlay: color-mix(in srgb, var(--tg-color-text-primary) 50%, transparent);
--tg-color-disabled: color-mix(in srgb, var(--tg-color-text-muted) 40%, transparent);
--tg-color-disabled-bg: color-mix(in srgb, var(--tg-color-text-muted) 10%, transparent);
--tg-border-color-focus: var(--tg-color-brand-primary);
/* --- 2k. Z-index scale --- */
--tg-z-base: 0;
--tg-z-raised: 10;
--tg-z-dropdown: 100;
--tg-z-sticky: 200;
--tg-z-overlay: 300;
--tg-z-modal: 400;
--tg-z-toast: 500;
/* --- 2l. Input / form tokens --- */
--tg-input-bg: var(--tg-surface-base);
--tg-input-bg-focus: var(--tg-surface-base);
--tg-input-border: var(--tg-border-default);
--tg-input-border-focus: var(--tg-color-brand-primary);
--tg-input-border-error: var(--tg-color-danger);
--tg-input-text: var(--tg-color-text-primary);
--tg-input-placeholder: var(--tg-color-text-muted);
--tg-input-radius: var(--tg-radius-md);
--tg-input-padding-x: var(--tg-space-3);
--tg-input-padding-y: var(--tg-space-2);
--tg-input-font-size: var(--tg-font-size-sm);
}
/* ============================================================
3. DARK THEME OVERRIDES
============================================================ */
.tg-dark,
[data-theme="dark"] {
--tg-color-text-primary: #ffffff;
--tg-color-text-secondary: #b9c8cd;
--tg-color-text-muted: #829399;
--tg-color-text-subtle: var(--tg-raw-neutral-500);
--tg-color-text-disabled: var(--tg-raw-neutral-600);
--tg-color-text-inverse: var(--tg-raw-neutral-800);
--tg-surface-base: #202f36;
--tg-surface-raised: #17242a;
--tg-surface-sunken: #10181d;
--tg-border-subtle: rgba(185, 200, 205, 0.12);
--tg-border-default: rgba(185, 200, 205, 0.22);
--tg-border-strong: rgba(185, 200, 205, 0.36);
--tg-pattern-line: rgba(255, 255, 255, 0.10);
--tg-shadow-xs: 0 2px 3px rgba(0, 0, 0, 0.24), 0 3px 6px rgba(0, 0, 0, 0.20), 0 2px 8px rgba(0, 0, 0, 0.14);
--tg-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.30), 0 4px 10px rgba(0, 0, 0, 0.26), 0 6px 16px rgba(0, 0, 0, 0.18);
--tg-shadow-md: 0 3px 6px rgba(0, 0, 0, 0.34), 0 8px 20px rgba(0, 0, 0, 0.32), 0 16px 34px rgba(0, 0, 0, 0.22);
--tg-shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.38), 0 16px 34px rgba(0, 0, 0, 0.36), 0 30px 54px rgba(0, 0, 0, 0.26);
--tg-shadow-xl: 0 10px 20px rgba(0, 0, 0, 0.42), 0 24px 52px rgba(0, 0, 0, 0.40), 0 44px 84px rgba(0, 0, 0, 0.28);
--tg-color-brand-primary-subtle: var(--tg-raw-primary-900);
--tg-color-brand-secondary-subtle: var(--tg-raw-secondary-900);
--tg-color-success-subtle: var(--tg-raw-success-900);
--tg-color-info-subtle: var(--tg-raw-info-900);
--tg-color-danger-subtle: var(--tg-raw-danger-900);
--tg-color-warning-subtle: var(--tg-raw-warning-900);
--tg-color-rating-subtle: var(--tg-raw-rating-900);
/* Readable foreground colors for this local theme boundary */
--tg-color-brand-primary-text: var(--tg-color-brand-primary-on-dark);
--tg-color-brand-secondary-text: var(--tg-color-brand-secondary-on-dark);
--tg-link-color: var(--tg-color-brand-primary-text);
--tg-link-color-hover: var(--tg-raw-primary-300);
--tg-link-underline-color: color-mix(in srgb, var(--tg-color-brand-primary-text) 40%, transparent);
--tg-color-success-text: var(--tg-raw-success-500); /* 5.42:1 vs dark surface */
--tg-color-success-subtle-text: var(--tg-raw-success-500); /* 6.88:1 vs subtle fill */
--tg-color-success-icon: var(--tg-raw-success-500);
--tg-color-success-border: var(--tg-raw-success-700);
--tg-color-info-text: var(--tg-raw-info-400); /* 4.87:1 vs dark surface */
--tg-color-info-subtle-text: var(--tg-raw-info-500); /* 4.63:1 vs subtle fill */
--tg-color-info-icon: var(--tg-raw-info-400);
--tg-color-info-border: var(--tg-raw-info-700);
--tg-color-danger-text: var(--tg-raw-danger-400); /* 4.96:1 vs dark surface */
--tg-color-danger-subtle-text: var(--tg-raw-danger-500); /* 4.79:1 vs subtle fill */
--tg-color-danger-icon: var(--tg-raw-danger-400);
--tg-color-danger-border: var(--tg-raw-danger-700);
--tg-color-warning-text: var(--tg-raw-warning-500); /* 6.65:1 vs dark surface */
--tg-color-warning-subtle-text: var(--tg-raw-warning-500); /* 8.12:1 vs subtle fill */
--tg-color-warning-icon: var(--tg-raw-warning-500);
--tg-color-warning-border: var(--tg-raw-warning-700);
--tg-color-rating-text: var(--tg-raw-rating-500); /* 7.96:1 vs dark surface */
--tg-color-rating-subtle-text: var(--tg-raw-rating-500); /* 9.33:1 vs subtle fill */
--tg-color-rating-icon: var(--tg-raw-rating-500);
--tg-color-rating-border: var(--tg-raw-rating-700);
--tg-color-brand-primary-subtle-text: var(--tg-raw-primary-500);
--tg-color-brand-secondary-subtle-text: var(--tg-raw-secondary-400);
--tg-color-brand-primary-control: var(--tg-raw-primary-500);
--tg-color-brand-secondary-control: var(--tg-raw-secondary-500);
--tg-on-brand-primary-control: #17212b;
--tg-on-brand-secondary-control: #ffffff;
--tg-color-toggle-off-track: var(--tg-raw-neutral-400);
--tg-color-toggle-off-thumb: #17212b;
/* Layer-4 aliases re-declared per theme. Custom properties resolve
their var() chains at the scope where they're DECLARED, so aliases
declared only at :root bake in the html-level theme — scoped
theming ([data-theme] or .tg-dark on a container) needs the
theme-sensitive aliases re-declared inside the theme blocks.
Keep in sync with the Layer 4 values in base-components.css. */
--tg-button-secondary-bg-hover: var(--tg-color-brand-primary-subtle);
--tg-button-secondary-text: var(--tg-color-brand-primary-text);
--tg-button-secondary-border: var(--tg-color-brand-primary-text);
--tg-button-ghost-bg-hover: var(--tg-surface-raised);
--tg-button-ghost-text: var(--tg-color-text-secondary);
--tg-button-ghost-text-hover: var(--tg-color-text-primary);
--tg-button-ghost-border: var(--tg-border-default);
--tg-button-ghost-border-hover: var(--tg-border-strong);
--tg-card-bg: var(--tg-surface-base);
--tg-card-border: var(--tg-border-subtle);
--tg-card-border-hover: var(--tg-border-default);
--tg-shadow-card-rest: 0 0 0 0 transparent;
--tg-card-shadow: var(--tg-shadow-card-rest, 0 0 0 0 transparent);
--tg-card-shadow-hover: var(--tg-shadow-md);
--tg-slider-track-bg: var(--tg-surface-sunken);
--tg-slider-track-fill: var(--tg-color-brand-primary-control);
--tg-slider-thumb-bg: var(--tg-color-brand-primary-control);
--tg-slider-thumb-border: 0;
--tg-slider-thumb-shadow: var(--tg-shadow-xs);
--tg-toggle-bg-off: var(--tg-color-toggle-off-track);
--tg-toggle-thumb-bg-off: var(--tg-color-toggle-off-thumb);
--tg-toggle-thumb-shadow-off: none;
--tg-toggle-bg-on: var(--tg-color-brand-primary-control);
--tg-toggle-thumb-bg-on: var(--tg-on-brand-primary-control);
--tg-toggle-thumb-shadow: var(--tg-shadow-sm);
--tg-tab-color: var(--tg-color-text-muted);
--tg-tab-color-active: var(--tg-color-brand-primary-text);
--tg-tab-color-hover: var(--tg-color-text-primary);
--tg-tab-border-color: var(--tg-border-subtle);
--tg-tab-indicator-color: var(--tg-color-brand-primary-text);
--tg-progress-track-bg: var(--tg-surface-sunken);
--tg-progress-fill-bg: var(--tg-color-brand-primary-control);
--tg-input-border: var(--tg-border-default);
--tg-input-text: var(--tg-color-text-primary);
--tg-input-placeholder: var(--tg-color-text-muted);
--tg-color-overlay: color-mix(in srgb, #000000 65%, transparent);
--tg-input-bg: var(--tg-surface-raised);
--tg-input-bg-focus: var(--tg-surface-raised);
}
[data-theme="light"] {
--tg-color-text-primary: #17212b;
--tg-color-text-secondary: #52606d;
--tg-color-text-muted: #7d8a96;
--tg-color-text-subtle: var(--tg-raw-neutral-400);
--tg-color-text-disabled: var(--tg-raw-neutral-300);
--tg-color-text-inverse: var(--tg-raw-neutral-0);
--tg-surface-base: #ffffff;
--tg-surface-raised: #f5fafb;
--tg-surface-sunken: #eaf4f6;
--tg-border-subtle: rgba(82, 96, 109, 0.16);
--tg-border-default: rgba(82, 96, 109, 0.3);
--tg-border-strong: rgba(82, 96, 109, 0.48);
--tg-pattern-line: rgba(0, 0, 0, 0.08);
--tg-shadow-xs: 0 2px 3px rgba(64, 34, 12, 0.08), 0 3px 6px rgba(64, 34, 12, 0.06), 0 2px 8px rgba(64, 34, 12, 0.04);
--tg-shadow-sm: 0 2px 4px rgba(64, 34, 12, 0.10), 0 4px 10px rgba(64, 34, 12, 0.08), 0 6px 16px rgba(64, 34, 12, 0.05);
--tg-shadow-md: 0 3px 6px rgba(64, 34, 12, 0.09), 0 8px 20px rgba(64, 34, 12, 0.11), 0 16px 34px rgba(64, 34, 12, 0.07);
--tg-shadow-lg: 0 6px 12px rgba(64, 34, 12, 0.11), 0 16px 34px rgba(64, 34, 12, 0.14), 0 30px 54px rgba(64, 34, 12, 0.09);
--tg-shadow-xl: 0 10px 20px rgba(64, 34, 12, 0.13), 0 24px 52px rgba(64, 34, 12, 0.16), 0 44px 84px rgba(64, 34, 12, 0.10);
--tg-color-brand-primary-subtle: var(--tg-raw-primary-100);
--tg-color-brand-secondary-subtle: var(--tg-raw-secondary-100);
--tg-color-success-subtle: var(--tg-raw-success-100);
--tg-color-info-subtle: var(--tg-raw-info-100);
--tg-color-danger-subtle: var(--tg-raw-danger-100);
--tg-color-warning-subtle: var(--tg-raw-warning-100);
--tg-color-rating-subtle: var(--tg-raw-rating-100);
/* Readable foreground colors for this local theme boundary */
--tg-color-brand-primary-text: var(--tg-color-brand-primary-on-light);
--tg-color-brand-secondary-text: var(--tg-color-brand-secondary-on-light);
--tg-link-color: var(--tg-color-brand-primary-text);
--tg-link-color-hover: var(--tg-raw-primary-700);
--tg-link-underline-color: color-mix(in srgb, var(--tg-color-brand-primary-text) 40%, transparent);
--tg-color-success-text: var(--tg-raw-success-700); /* 6.99:1 vs light surface */
--tg-color-success-subtle-text: var(--tg-raw-success-700); /* 6.18:1 vs subtle fill */
--tg-color-success-icon: var(--tg-raw-success-700);
--tg-color-success-border: var(--tg-raw-success-300);
--tg-color-info-text: var(--tg-raw-info-600); /* 6.73:1 vs light surface */
--tg-color-info-subtle-text: var(--tg-raw-info-600); /* 5.64:1 vs subtle fill */
--tg-color-info-icon: var(--tg-raw-info-600);
--tg-color-info-border: var(--tg-raw-info-300);
--tg-color-danger-text: var(--tg-raw-danger-600); /* 6.49:1 vs light surface */
--tg-color-danger-subtle-text: var(--tg-raw-danger-600); /* 5.43:1 vs subtle fill */
--tg-color-danger-icon: var(--tg-raw-danger-600);
--tg-color-danger-border: var(--tg-raw-danger-300);
--tg-color-warning-text: var(--tg-raw-warning-700); /* 6.02:1 vs light surface */
--tg-color-warning-subtle-text: var(--tg-raw-warning-700); /* 5.46:1 vs subtle fill */
--tg-color-warning-icon: var(--tg-raw-warning-700);
--tg-color-warning-border: var(--tg-raw-warning-300);
--tg-color-rating-text: var(--tg-raw-rating-700); /* 5.21:1 vs light surface */
--tg-color-rating-subtle-text: var(--tg-raw-rating-700); /* 4.82:1 vs subtle fill */
--tg-color-rating-icon: var(--tg-raw-rating-700);
--tg-color-rating-border: var(--tg-raw-rating-300);
--tg-color-brand-primary-subtle-text: var(--tg-raw-primary-700);
--tg-color-brand-secondary-subtle-text: var(--tg-raw-secondary-600);
--tg-color-brand-primary-control: var(--tg-raw-primary-700);
--tg-color-brand-secondary-control: var(--tg-raw-secondary-500);
--tg-on-brand-primary-control: #ffffff;
--tg-on-brand-secondary-control: #ffffff;
--tg-color-toggle-off-track: var(--tg-raw-neutral-500);
--tg-color-toggle-off-thumb: #ffffff;
/* Layer-4 aliases re-declared per theme. Custom properties resolve
their var() chains at the scope where they're DECLARED, so aliases
declared only at :root bake in the html-level theme — scoped
theming ([data-theme] or .tg-dark on a container) needs the
theme-sensitive aliases re-declared inside the theme blocks.
Keep in sync with the Layer 4 values in base-components.css. */
--tg-button-secondary-bg-hover: var(--tg-color-brand-primary-subtle);
--tg-button-secondary-text: var(--tg-color-brand-primary-text);
--tg-button-secondary-border: var(--tg-color-brand-primary-text);
--tg-button-ghost-bg-hover: var(--tg-surface-raised);
--tg-button-ghost-text: var(--tg-color-text-secondary);
--tg-button-ghost-text-hover: var(--tg-color-text-primary);
--tg-button-ghost-border: var(--tg-border-default);
--tg-button-ghost-border-hover: var(--tg-border-strong);
--tg-card-bg: var(--tg-surface-base);
--tg-card-border: var(--tg-border-subtle);
--tg-card-border-hover: var(--tg-border-default);
--tg-shadow-card-rest: 0 0 0 0 transparent;
--tg-card-shadow: var(--tg-shadow-card-rest, 0 0 0 0 transparent);
--tg-card-shadow-hover: var(--tg-shadow-md);
--tg-slider-track-bg: var(--tg-surface-sunken);
--tg-slider-track-fill: var(--tg-color-brand-primary-control);
--tg-slider-thumb-bg: var(--tg-color-brand-primary-control);
--tg-slider-thumb-border: 0;
--tg-slider-thumb-shadow: var(--tg-shadow-xs);
--tg-toggle-bg-off: var(--tg-color-toggle-off-track);
--tg-toggle-thumb-bg-off: var(--tg-color-toggle-off-thumb);
--tg-toggle-thumb-shadow-off: none;
--tg-toggle-bg-on: var(--tg-color-brand-primary-control);
--tg-toggle-thumb-bg-on: var(--tg-on-brand-primary-control);
--tg-toggle-thumb-shadow: var(--tg-shadow-sm);
--tg-tab-color: var(--tg-color-text-muted);
--tg-tab-color-active: var(--tg-color-brand-primary-text);
--tg-tab-color-hover: var(--tg-color-text-primary);
--tg-tab-border-color: var(--tg-border-subtle);
--tg-tab-indicator-color: var(--tg-color-brand-primary-text);
--tg-progress-track-bg: var(--tg-surface-sunken);
--tg-progress-fill-bg: var(--tg-color-brand-primary-control);
--tg-input-border: var(--tg-border-default);
--tg-input-text: var(--tg-color-text-primary);
--tg-input-placeholder: var(--tg-color-text-muted);
--tg-color-overlay: rgba(23, 33, 43, 0.5);
--tg-input-bg: var(--tg-surface-base);
--tg-input-bg-focus: var(--tg-surface-base);
}
/* ============================================================
3b. BASE / RESET
════════════════════════════════════════════════════════════
Safety net only — every component below should still declare
its own font-family explicitly (defense in depth), but if one
ever slips through without it, this is what it inherits instead
of falling all the way back to the browser's serif default.
Not in the showcase-only v3.0.0/styles.css body rule — that file
never ships with the design system, so the real shipped stylesheet
needs its own base rule.
============================================================ */
body {
font-family: var(--tg-font-sans);
font-size: var(--tg-font-size-body);
line-height: var(--tg-leading-normal);
color: var(--tg-color-text-primary);
background: var(--tg-surface-base);
}
/* ============================================================
4. COMPONENT TOKENS
════════════════════════════════════════════════════════════
These are the customization surface for the Generator. Override
these tokens to restyle a component without touching its CSS.
All component CSS references only these tokens — never semantic
tokens directly (except where status variants need a specific
semantic color with no component-level equivalent).
Naming pattern: --tg-{component}-{element?}-{property}
============================================================ */
:root {
/* --- Button --- */
--tg-button-radius: var(--tg-shape-radius-button, var(--tg-radius-md));
--tg-button-font-size: var(--tg-font-size-sm);
--tg-button-font-weight: var(--tg-weight-semi);
--tg-button-padding-x: var(--tg-space-5);
--tg-button-padding-y: 9px;
--tg-button-transition: var(--tg-transition-button);
--tg-button-primary-bg: var(--tg-color-brand-primary);
--tg-button-primary-bg-hover: var(--tg-color-brand-primary-hover);
--tg-button-primary-text: var(--tg-on-brand-primary);
--tg-button-primary-border: var(--tg-color-brand-primary);
--tg-button-primary-border-hover: var(--tg-color-brand-primary-hover);
--tg-button-secondary-bg: transparent;
--tg-button-secondary-bg-hover: var(--tg-color-brand-primary-subtle);
/* Outline controls need the contrast-resolved text token. A raw brand
fill can be too pale or too dark to serve as readable text or a clear
border against a theme surface. */
--tg-button-secondary-text: var(--tg-color-brand-primary-text);
--tg-button-secondary-border: var(--tg-color-brand-primary-text);
--tg-button-ghost-bg: transparent;
--tg-button-ghost-bg-hover: var(--tg-surface-raised);
--tg-button-ghost-text: var(--tg-color-text-secondary);
--tg-button-ghost-text-hover: var(--tg-color-text-primary);
--tg-button-ghost-border: var(--tg-border-default);
--tg-button-ghost-border-hover: var(--tg-border-strong);
--tg-button-danger-bg: var(--tg-color-danger);
--tg-button-danger-bg-hover: var(--tg-color-danger-hover);
--tg-button-danger-text: var(--tg-on-danger);
--tg-button-danger-border: var(--tg-color-danger);
--tg-button-danger-border-hover: var(--tg-color-danger-hover);
--tg-button-success-bg: var(--tg-color-success);
--tg-button-success-bg-hover: var(--tg-color-success-hover);
--tg-button-success-text: var(--tg-on-success);
--tg-button-success-border: var(--tg-color-success);
--tg-button-success-border-hover: var(--tg-color-success-hover);
--tg-button-info-bg: var(--tg-color-info);
--tg-button-info-bg-hover: var(--tg-color-info-hover);
--tg-button-info-text: var(--tg-on-info);
--tg-button-info-border: var(--tg-color-info);
--tg-button-info-border-hover: var(--tg-color-info-hover);
--tg-button-warning-bg: var(--tg-color-warning);
--tg-button-warning-bg-hover: var(--tg-color-warning-hover);
--tg-button-warning-text: var(--tg-on-warning);
--tg-button-warning-border: var(--tg-color-warning);
--tg-button-warning-border-hover: var(--tg-color-warning-hover);
/* --- Card --- */
--tg-card-bg: var(--tg-surface-base);
--tg-card-border: var(--tg-border-subtle);
--tg-card-border-hover: var(--tg-border-default);
--tg-card-radius: var(--tg-radius-lg);
--tg-card-padding: var(--tg-space-8);
--tg-card-shadow: var(--tg-shadow-card-rest, 0 0 0 0 transparent);
--tg-card-shadow-hover: var(--tg-shadow-md);
--tg-card-transition: var(--tg-transition-card);
/* --- Badge --- */
--tg-badge-radius: var(--tg-shape-radius-badge, var(--tg-radius-full));
--tg-badge-font-size: var(--tg-font-size-xs);
--tg-badge-font-weight: var(--tg-weight-semi);
--tg-badge-padding-x: 10px;
--tg-badge-padding-y: 3px;
/* --- Alert --- */
--tg-alert-radius: var(--tg-radius-md);
--tg-alert-padding-x: var(--tg-space-4);
--tg-alert-padding-y: var(--tg-space-4);
--tg-alert-border-width: 3px;
--tg-alert-font-size: var(--tg-font-size-sm);
/* --- Slider --- */
--tg-slider-track-height: 4px;
--tg-slider-track-bg: var(--tg-surface-sunken);
--tg-slider-track-fill: var(--tg-color-brand-primary-control);
--tg-slider-thumb-size: 18px;
--tg-slider-thumb-bg: var(--tg-color-brand-primary-control);
/* Solid semantic fill: do not put a white ring around the thumb. */
--tg-slider-thumb-border: 0;
--tg-slider-thumb-shadow: var(--tg-shadow-xs);
--tg-slider-thumb-halo-hover: 0 0 0 5px color-mix(in srgb, var(--tg-slider-thumb-bg) 18%, transparent);
--tg-slider-thumb-halo-active: 0 0 0 7px color-mix(in srgb, var(--tg-slider-thumb-bg) 26%, transparent);
--tg-slider-thumb-scale-hover: 1.08;
--tg-slider-thumb-scale-active: 0.96;
--tg-slider-thumb-transition:
box-shadow var(--tg-duration-fast) var(--tg-ease-standard),
transform var(--tg-duration-fast) var(--tg-ease-standard);
--tg-slider-radius: var(--tg-radius-full);
--tg-slider-transition: var(--tg-transition-colors);
/* --- Toggle / Switch --- */
--tg-toggle-width: 44px;
--tg-toggle-height: 24px;
--tg-toggle-radius: var(--tg-radius-full);
--tg-toggle-bg-off: var(--tg-color-toggle-off-track);
--tg-toggle-bg-on: var(--tg-color-brand-primary-control);
--tg-toggle-thumb-size: 18px;
/* Off-state track and thumb are resolved as a pair per theme. This keeps
the inactive control visible without pretending the thumb is a shadow. */
--tg-toggle-thumb-bg-off: var(--tg-color-toggle-off-thumb);
--tg-toggle-thumb-bg-on: var(--tg-on-brand-primary-control);
/* A shadow optically shifts a tiny thumb. Keep both states centered. */
--tg-toggle-thumb-shadow-off: none;
--tg-toggle-thumb-shadow-on: none;
--tg-toggle-transition:
background-color var(--tg-duration-base) var(--tg-ease-standard),
border-color var(--tg-duration-base) var(--tg-ease-standard);
/* --- Tabs --- */
--tg-tab-font-size: var(--tg-font-size-sm);
--tg-tab-font-weight: var(--tg-weight-medium);
--tg-tab-color: var(--tg-color-text-muted);
--tg-tab-color-active: var(--tg-color-brand-primary-text);
--tg-tab-color-hover: var(--tg-color-text-primary);
--tg-tab-border-color: var(--tg-border-subtle);
--tg-tab-indicator-color: var(--tg-color-brand-primary-text);
--tg-tab-indicator-height: 2px;
--tg-tab-padding-x: var(--tg-space-4);
--tg-tab-padding-y: var(--tg-space-3);
--tg-tab-bg-active: transparent;
--tg-tab-transition: var(--tg-transition-colors);
/* --- Progress Bar --- */
--tg-progress-track-bg: var(--tg-surface-sunken);
--tg-progress-fill-bg: var(--tg-color-brand-primary-control);
--tg-progress-radius: var(--tg-radius-full);
--tg-progress-height-sm: 4px;
--tg-progress-height-md: 8px;
--tg-progress-transition: width var(--tg-duration-slow) var(--tg-ease-out);
/* --- Navbar --- */
--tg-navbar-height: 72px;
--tg-navbar-bg: var(--tg-surface-base);
--tg-navbar-border: var(--tg-border-subtle);
--tg-navbar-link-color: var(--tg-color-text-secondary);
--tg-navbar-link-color-hover: var(--tg-color-text-primary);
--tg-navbar-link-font-size: var(--tg-font-size-sm);
--tg-navbar-link-font-weight: var(--tg-weight-medium);
--tg-navbar-transition: var(--tg-transition-colors);
/* --- Hero Section --- */
--tg-hero-padding-y: var(--tg-space-16);
--tg-hero-padding-x: var(--tg-section-padding-x);
--tg-hero-content-max: var(--tg-container-max-narrow);
--tg-hero-eyebrow-color: var(--tg-color-brand-primary);
/* --- Feature Grid / Card --- */
--tg-feature-grid-gap: var(--tg-grid-gap);
--tg-feature-grid-min: 260px;
--tg-feature-icon-size: 44px;
--tg-feature-icon-radius: var(--tg-radius-lg);
--tg-feature-icon-bg: var(--tg-color-brand-primary-subtle);
--tg-feature-icon-color: var(--tg-color-brand-primary);
/* --- CTA Band --- */
--tg-cta-bg: var(--tg-color-brand-primary);
--tg-cta-text: var(--tg-on-brand-primary);
--tg-cta-radius: var(--tg-radius-2xl);
--tg-cta-padding-y: var(--tg-space-16);
--tg-cta-padding-x: var(--tg-space-8);
--tg-cta-button-bg: var(--tg-cta-text);
--tg-cta-button-text: var(--tg-cta-bg);
--tg-cta-ghost-text: var(--tg-cta-text);
--tg-cta-ghost-border: color-mix(in srgb, var(--tg-cta-text) 40%, transparent);
/* --- Feature List (quiet alternative to Feature Grid) --- */
--tg-feature-list-icon-size: 32px;
--tg-feature-list-gap: var(--tg-space-4);
--tg-feature-list-row-gap: var(--tg-space-5);
/* --- Feature Numbered (typographic alternative to Feature Grid) --- */
--tg-feature-numbered-gap: var(--tg-grid-gap);
--tg-feature-numbered-min: 220px;
--tg-feature-numbered-index-size: var(--tg-font-size-3xl);
--tg-feature-numbered-index-color: var(--tg-color-brand-primary-text);
/* --- CTA Bar (quiet alternative to CTA Band) --- */
--tg-cta-bar-bg: var(--tg-surface-raised);
--tg-cta-bar-border: var(--tg-border-subtle);
--tg-cta-bar-radius: var(--tg-radius-lg);
--tg-cta-bar-padding-y: var(--tg-space-6);
--tg-cta-bar-padding-x: var(--tg-space-8);
--tg-cta-bar-gap: var(--tg-space-6);
}
/* ============================================================
5. GRADIENTS
============================================================ */
/* --- Primary Accent --- */
.tg-gradient-primary {
background: linear-gradient(135deg, var(--tg-color-brand-primary), var(--tg-color-brand-primary-hover));
}
.tg-gradient-primary-h {
background: linear-gradient(90deg, var(--tg-color-brand-primary), var(--tg-color-brand-primary-hover));
}
/* --- Primary + Secondary --- */
.tg-gradient-primary-secondary {
background: linear-gradient(135deg, var(--tg-color-brand-primary), var(--tg-color-brand-secondary-hover));
}
/* --- Accent + Info --- */
.tg-gradient-primary-info {
background: linear-gradient(135deg, var(--tg-color-brand-primary), var(--tg-color-info));
}
/* --- Accent + Complement --- */
.tg-gradient-primary-complement {
background: linear-gradient(135deg, var(--tg-color-brand-primary), var(--tg-color-complement));
}
/* --- Status pairs --- */
.tg-gradient-success-info { background: linear-gradient(135deg, var(--tg-color-success), var(--tg-color-info)); }
.tg-gradient-danger-warning { background: linear-gradient(135deg, var(--tg-color-danger), var(--tg-color-warning)); }
.tg-gradient-warning-rating { background: linear-gradient(135deg, var(--tg-color-warning), var(--tg-color-rating)); }
.tg-gradient-secondary-danger { background: linear-gradient(135deg, var(--tg-color-brand-secondary), var(--tg-color-danger)); }
.tg-gradient-secondary-info { background: linear-gradient(135deg, var(--tg-color-brand-secondary), var(--tg-color-info)); }
/* --- Dark Hero Backgrounds ---
Tinted from each role's -text token (contrast-resolved per theme —
see resolveThemeStop in engine/ramps.js), not the raw fill color. A
vivid brand primary is barely affected (-text ≈ the raw anchor when it
already reads fine against both surfaces); a dark/muted anchor (e.g. a
navy "corporate trust" primary) gets lightened in dark theme, so the
glow stays visible instead of nearly vanishing into --tg-surface-sunken,
the darkest surface tier. To revert to the old brand-exact-always
behavior, swap the *-text vars below back to --tg-color-brand-primary /
--tg-color-brand-secondary. */
.tg-gradient-hero-radial {
background:
radial-gradient(
ellipse 80% 50% at 50% 0%,
color-mix(in srgb, var(--tg-color-brand-primary-text) 20%, transparent) 0%,
color-mix(in srgb, var(--tg-color-brand-primary-text) 5%, transparent) 40%,
transparent 70%
),
var(--tg-surface-sunken);
}
.tg-gradient-hero-dual {
background:
radial-gradient(ellipse 55% 40% at 15% 0%,
color-mix(in srgb, var(--tg-color-brand-primary-text) 20%, transparent),
transparent 70%),
radial-gradient(ellipse 55% 40% at 85% 0%,
color-mix(in srgb, var(--tg-color-brand-secondary-text) 15%, transparent),
transparent 70%),
var(--tg-surface-sunken);
}
/* --- Text gradients (background-clip: text) --- */
/* padding-bottom prevents descenders (g, y, p) from being clipped by the bounding box */
/* Uses each role's -text token (contrast-resolved, minimal-shift per theme —
see resolveThemeStop in engine/ramps.js) instead of the raw fill color.
Most brands see little/no change (a vivid 500 stop usually already
clears contrast against either surface); only brands with an inherently
dark/low-chroma anchor color shift, and only as far as legibility
requires — never jumps straight to a fixed pastel stop. To revert to
the old brand-exact-always behavior, swap the *-text vars below back to
their plain equivalents (e.g. --tg-color-brand-primary-text →
--tg-color-brand-primary). */
[class*="tg-gradient-text-"] {
display: inline-block;
padding-bottom: 0.1em;
}
.tg-gradient-text-primary-secondary {
background: linear-gradient(135deg, var(--tg-color-brand-primary-text), var(--tg-color-brand-secondary-text));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tg-gradient-text-primary-info {
background: linear-gradient(135deg, var(--tg-color-brand-primary-text), var(--tg-color-info-text));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tg-gradient-text-danger-warning {
background: linear-gradient(135deg, var(--tg-color-danger-text), var(--tg-color-warning-text));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tg-gradient-text-warning-rating {
background: linear-gradient(135deg, var(--tg-color-warning-text), var(--tg-color-rating-text));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tg-gradient-text-secondary-info {
background: linear-gradient(135deg, var(--tg-color-brand-secondary-text), var(--tg-color-info-text));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ============================================================
6. TYPOGRAPHY BASE
============================================================ */
.tg-type-base {
font-family: var(--tg-font-sans);
font-size: var(--tg-font-size-body);
font-weight: var(--tg-weight-normal);
line-height: var(--tg-leading-normal);
letter-spacing: var(--tg-tracking-body, normal);
color: var(--tg-color-text-primary);
}
.tg-type-ui {
font-family: var(--tg-font-sans);
font-size: var(--tg-font-size-base);
font-weight: var(--tg-weight-normal);
line-height: var(--tg-leading-ui);
letter-spacing: var(--tg-tracking-body, normal);
color: var(--tg-color-text-primary);
}
.tg-type-mono {
font-family: var(--tg-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
font-size: var(--tg-font-size-sm);
line-height: var(--tg-leading-ui);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.tg-type-data {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* Headings read --tg-font-heading when the brand supplies a heading/body
pairing; systems with a single sans fall through to --tg-font-sans. */
.tg-heading-hero { font-family: var(--tg-font-heading, var(--tg-font-sans)); font-size: var(--tg-font-size-hero); font-weight: var(--tg-weight-display); line-height: var(--tg-leading-tight); letter-spacing: var(--tg-tracking-display, -0.02em); }
.tg-heading-1 { font-family: var(--tg-font-heading, var(--tg-font-sans)); font-size: var(--tg-font-size-4xl); font-weight: var(--tg-weight-display); line-height: var(--tg-leading-heading); letter-spacing: var(--tg-tracking-display, -0.02em); }
.tg-heading-2 { font-family: var(--tg-font-heading, var(--tg-font-sans)); font-size: var(--tg-font-size-3xl); font-weight: var(--tg-weight-bold); line-height: var(--tg-leading-heading); letter-spacing: var(--tg-tracking-display, -0.01em); }
.tg-heading-3 { font-family: var(--tg-font-heading, var(--tg-font-sans)); font-size: var(--tg-font-size-2xl); font-weight: var(--tg-weight-semi); line-height: var(--tg-leading-heading); }
.tg-heading-4 { font-family: var(--tg-font-heading, var(--tg-font-sans)); font-size: var(--tg-font-size-xl); font-weight: var(--tg-weight-semi); line-height: var(--tg-leading-heading); }
.tg-heading-5 { font-family: var(--tg-font-heading, var(--tg-font-sans)); font-size: var(--tg-font-size-lg); font-weight: var(--tg-weight-medium); line-height: var(--tg-leading-heading); }
.tg-heading-6 { font-family: var(--tg-font-heading, var(--tg-font-sans)); font-size: var(--tg-font-size-xs); font-weight: var(--tg-weight-semi); line-height: var(--tg-leading-heading); letter-spacing: var(--tg-tracking-caps, 0.06em); text-transform: uppercase; color: var(--tg-color-text-secondary); }
.tg-label {
font-family: var(--tg-font-sans);
font-size: var(--tg-label-font-size, var(--tg-font-size-xs));
font-weight: var(--tg-label-font-weight, var(--tg-weight-semi));
color: var(--tg-label-color, var(--tg-color-text-muted));
line-height: var(--tg-label-line-height, var(--tg-leading-ui));
}
.tg-overline {
font-family: var(--tg-font-sans);
font-size: var(--tg-label-font-size, var(--tg-font-size-xs));
font-weight: var(--tg-label-font-weight, var(--tg-weight-semi));
letter-spacing: var(--tg-label-caps-tracking, 0.07em);
text-transform: uppercase;
color: var(--tg-label-color, var(--tg-color-text-muted));
line-height: var(--tg-label-line-height, var(--tg-leading-ui));
}
/* ============================================================
6b. LINK COMPONENT
============================================================ */
.tg-link {
color: var(--tg-link-color);
text-decoration: underline;
text-decoration-color: var(--tg-link-underline-color);
text-underline-offset: 2px;
transition: color var(--tg-duration-base) var(--tg-ease-standard),
text-decoration-color var(--tg-duration-base) var(--tg-ease-standard);
}
.tg-link:hover {
color: var(--tg-link-color-hover);
text-decoration-color: var(--tg-link-color-hover);
}
/* A local content action, distinct from both navigation links and a
bordered ghost button in a toolbar. Use on a real button element. */
.tg-action-text {
appearance: none;
border: 0;
padding: 0;
background: transparent;
color: var(--tg-link-color);
font-family: var(--tg-font-sans);
font-size: var(--tg-font-size-sm);
font-weight: var(--tg-weight-semi);
line-height: var(--tg-leading-ui);
cursor: pointer;
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 2px;
transition: color var(--tg-duration-base) var(--tg-ease-standard), text-decoration-color var(--tg-duration-base) var(--tg-ease-standard);
}
.tg-action-text:hover { color: var(--tg-link-color-hover); text-decoration-color: currentColor; }
.tg-action-text:focus-visible { outline: 2px solid var(--tg-color-focus-ring); outline-offset: 3px; }
.tg-action-text:disabled, .tg-action-text[aria-disabled="true"] { color: var(--tg-color-text-disabled); cursor: not-allowed; pointer-events: none; }
/* ============================================================
7. UTILITY CLASSES — COLOR (text)
============================================================ */
.tg-text-brand { color: var(--tg-color-brand-primary-text); }
.tg-text-brand-secondary { color: var(--tg-color-brand-secondary-text); }
.tg-text-primary { color: var(--tg-color-text-primary); }
.tg-text-secondary { color: var(--tg-color-text-secondary); }
.tg-text-muted { color: var(--tg-color-text-muted); }
.tg-text-subtle { color: var(--tg-color-text-subtle); }
.tg-text-disabled { color: var(--tg-color-text-disabled); }
.tg-text-inverse { color: var(--tg-color-text-inverse); }
.tg-text-success { color: var(--tg-color-success-text); }
.tg-text-info { color: var(--tg-color-info-text); }
.tg-text-danger { color: var(--tg-color-danger-text); }
.tg-text-warning { color: var(--tg-color-warning-text); }
.tg-text-rating { color: var(--tg-color-rating-text); }
.tg-text-complement { color: var(--tg-color-complement); }
/* ============================================================
8. UTILITY CLASSES — BACKGROUND
============================================================ */
.tg-bg-base { background-color: var(--tg-surface-base); }
.tg-bg-raised { background-color: var(--tg-surface-raised); }
.tg-bg-sunken { background-color: var(--tg-surface-sunken); }
.tg-bg-primary { background-color: var(--tg-color-brand-primary); }
.tg-bg-primary-subtle { background-color: var(--tg-color-brand-primary-subtle); }
.tg-bg-secondary { background-color: var(--tg-color-brand-secondary); }
.tg-bg-secondary-subtle { background-color: var(--tg-color-brand-secondary-subtle); }
.tg-bg-success { background-color: var(--tg-color-success-subtle); }
.tg-bg-info { background-color: var(--tg-color-info-subtle); }
.tg-bg-danger { background-color: var(--tg-color-danger-subtle); }
.tg-bg-warning { background-color: var(--tg-color-warning-subtle); }
.tg-bg-rating { background-color: var(--tg-color-rating-subtle); }
/* ============================================================
9. UTILITY CLASSES — BADGES & PILLS
============================================================ */
.tg-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: var(--tg-badge-padding-y) var(--tg-badge-padding-x);
border-radius: var(--tg-badge-radius);
font-family: var(--tg-font-sans);
font-size: var(--tg-badge-font-size);
font-weight: var(--tg-badge-font-weight);
line-height: 1;
white-space: nowrap;
}
.tg-badge-primary { background: var(--tg-color-brand-primary-subtle); color: var(--tg-color-brand-primary-subtle-text); }
.tg-badge-secondary { background: var(--tg-color-brand-secondary-subtle); color: var(--tg-color-brand-secondary-subtle-text); }
.tg-badge-success { background: var(--tg-color-success-subtle); color: var(--tg-color-success-subtle-text); }
.tg-badge-info { background: var(--tg-color-info-subtle); color: var(--tg-color-info-subtle-text); }
.tg-badge-danger { background: var(--tg-color-danger-subtle); color: var(--tg-color-danger-subtle-text); }
.tg-badge-warning { background: var(--tg-color-warning-subtle); color: var(--tg-color-warning-subtle-text); }
.tg-badge-rating { background: var(--tg-color-rating-subtle); color: var(--tg-color-rating-subtle-text); }
/* ============================================================
10. BUTTONS
============================================================ */
.tg-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 37px;
padding: var(--tg-button-padding-y) var(--tg-button-padding-x);
border-radius: var(--tg-button-radius);
font-family: var(--tg-font-sans);
font-size: var(--tg-button-font-size);
font-weight: var(--tg-button-font-weight);
line-height: 1;
cursor: pointer;
border: var(--tg-border-width-thick) solid transparent;
transition: var(--tg-button-transition);
text-decoration: none;
white-space: nowrap;
box-sizing: border-box;
}
.tg-btn-primary {
background: var(--tg-button-primary-bg);
color: var(--tg-button-primary-text);
border-color: var(--tg-button-primary-border);
}
.tg-btn-primary:hover {
background: var(--tg-button-primary-bg-hover);
border-color: var(--tg-button-primary-border-hover);
transform: var(--tg-hover-lift-sm);
box-shadow: var(--tg-shadow-md);
}
.tg-btn-primary:active { transform: var(--tg-active-press); box-shadow: var(--tg-shadow-sm); }
.tg-btn-primary:focus-visible { outline: 2px solid var(--tg-color-focus-ring); outline-offset: 2px; }
.tg-btn-secondary {
background: var(--tg-button-secondary-bg);
color: var(--tg-button-secondary-text);
border-color: var(--tg-button-secondary-border);
}
.tg-btn-secondary:hover {
background: var(--tg-button-secondary-bg-hover);
transform: var(--tg-hover-lift-sm);
box-shadow: var(--tg-shadow-md);
}
.tg-btn-secondary:active { transform: var(--tg-active-press); box-shadow: none; }
.tg-btn-secondary:focus-visible { outline: 2px solid var(--tg-color-focus-ring); outline-offset: 2px; }
.tg-btn-ghost {
background: var(--tg-button-ghost-bg);
color: var(--tg-button-ghost-text);
border-color: var(--tg-button-ghost-border);
}
.tg-btn-ghost:hover {
background: var(--tg-button-ghost-bg-hover);
color: var(--tg-button-ghost-text-hover);
border-color: var(--tg-button-ghost-border-hover);
transform: var(--tg-hover-lift-sm);
}
.tg-btn-ghost:active { transform: var(--tg-active-press); }
.tg-btn-ghost:focus-visible { outline: 2px solid var(--tg-color-focus-ring); outline-offset: 2px; }
.tg-btn-danger {
background: var(--tg-button-danger-bg);
color: var(--tg-button-danger-text);
border-color: var(--tg-button-danger-border);
}
.tg-btn-danger:hover {
background: var(--tg-button-danger-bg-hover);
border-color: var(--tg-button-danger-border-hover);
transform: var(--tg-hover-lift-sm);
box-shadow: var(--tg-shadow-md);
}
.tg-btn-danger:active { transform: var(--tg-active-press); box-shadow: var(--tg-shadow-sm); }
.tg-btn-danger:focus-visible {
outline: 2px solid color-mix(in srgb, var(--tg-color-danger) 50%, transparent);
outline-offset: 2px;
}
.tg-btn-success {
background: var(--tg-button-success-bg);
color: var(--tg-button-success-text);
border-color: var(--tg-button-success-border);
}
.tg-btn-success:hover {
background: var(--tg-button-success-bg-hover);
border-color: var(--tg-button-success-border-hover);
transform: var(--tg-hover-lift-sm);
box-shadow: var(--tg-shadow-md);
}
.tg-btn-success:active { transform: var(--tg-active-press); box-shadow: var(--tg-shadow-sm); }
.tg-btn-success:focus-visible {
outline: 2px solid color-mix(in srgb, var(--tg-color-success) 50%, transparent);
outline-offset: 2px;
}
.tg-btn-info {
background: var(--tg-button-info-bg);
color: var(--tg-button-info-text);
border-color: var(--tg-button-info-border);
}
.tg-btn-info:hover {
background: var(--tg-button-info-bg-hover);
border-color: var(--tg-button-info-border-hover);
transform: var(--tg-hover-lift-sm);
box-shadow: var(--tg-shadow-md);
}
.tg-btn-info:active { transform: var(--tg-active-press); box-shadow: var(--tg-shadow-sm); }
.tg-btn-info:focus-visible {
outline: 2px solid color-mix(in srgb, var(--tg-color-info) 50%, transparent);
outline-offset: 2px;
}
.tg-btn-warning {
background: var(--tg-button-warning-bg);
color: var(--tg-button-warning-text);
border-color: var(--tg-button-warning-border);
}
.tg-btn-warning:hover {
background: var(--tg-button-warning-bg-hover);
border-color: var(--tg-button-warning-border-hover);
transform: var(--tg-hover-lift-sm);
box-shadow: var(--tg-shadow-md);
}
.tg-btn-warning:active { transform: var(--tg-active-press); box-shadow: var(--tg-shadow-sm); }
.tg-btn-warning:focus-visible {
outline: 2px solid color-mix(in srgb, var(--tg-color-warning) 50%, transparent);
outline-offset: 2px;
}
/* Gradient Buttons — both combos use only the brand's own colors, so
they read as "this brand" on any archetype. Hover reuses the same
--tg-shadow-md / --tg-hover-lift-sm every other button variant uses,
so the hover treatment (soft diffuse glow, hard ink offset, none at
all, etc.) always matches the archetype instead of a fixed effect. */
.tg-btn-gradient-primary-secondary {
background: linear-gradient(135deg, var(--tg-color-brand-primary), var(--tg-color-brand-secondary-hover)) !important;
color: var(--tg-on-brand-primary) !important;
border: none !important;
}
.tg-btn-gradient-primary-secondary:hover {
background: linear-gradient(135deg, var(--tg-color-brand-primary-hover), var(--tg-color-brand-secondary-hover)) !important;
box-shadow: var(--tg-shadow-md);
transform: var(--tg-hover-lift-sm);
}
.tg-btn-gradient-primary-hover {
background: linear-gradient(135deg, var(--tg-color-brand-primary), var(--tg-color-brand-primary-hover)) !important;
color: var(--tg-on-brand-primary) !important;
border: none !important;
}
.tg-btn-gradient-primary-hover:hover {
background: linear-gradient(135deg, var(--tg-color-brand-primary-hover), var(--tg-color-brand-primary)) !important;
box-shadow: var(--tg-shadow-md);
transform: var(--tg-hover-lift-sm);
}
/* Disabled state — keep each variant's visual identity, just muted */
.tg-btn:disabled,
.tg-btn[aria-disabled="true"] {
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
transform: none;
}
/* Primary/Danger are solid-fill buttons with no visible border when enabled — disabled state drops the border entirely rather than matching border-color to bg, which causes a visible seam ring on translucent colors */
.tg-btn-primary:disabled,
.tg-btn-primary[aria-disabled="true"],
.tg-btn-danger:disabled,
.tg-btn-danger[aria-disabled="true"],
.tg-btn-success:disabled,
.tg-btn-success[aria-disabled="true"],
.tg-btn-info:disabled,
.tg-btn-info[aria-disabled="true"],
.tg-btn-warning:disabled,
.tg-btn-warning[aria-disabled="true"] {
background: var(--tg-color-disabled-bg);
color: var(--tg-color-disabled);
border: none;
}
.tg-btn-secondary:disabled,
.tg-btn-secondary[aria-disabled="true"] {
background: transparent;
color: var(--tg-color-disabled);
border-color: var(--tg-color-disabled);
}
/* Ghost has a visible border when enabled — disabled state mutes it rather than removing it, so it still reads as a button */
.tg-btn-ghost:disabled,
.tg-btn-ghost[aria-disabled="true"] {
background: transparent;
color: var(--tg-color-disabled);
border-color: var(--tg-color-disabled);
}
/* Size variants */
.tg-btn-sm { min-height: 29px; padding: 6px 14px; font-size: var(--tg-font-size-xs); border-radius: var(--tg-shape-radius-button, var(--tg-radius-sm)); }
.tg-btn-lg { min-height: 45px; padding: 12px 28px; font-size: var(--tg-font-size-base); border-radius: var(--tg-shape-radius-button, var(--tg-radius-lg)); }
/* ============================================================
11. ALERT / NOTICE BLOCKS
============================================================ */
.tg-alert {
display: flex;
flex-direction: column;
gap: var(--tg-space-1);
padding: var(--tg-alert-padding-y) var(--tg-alert-padding-x);
border-radius: var(--tg-alert-radius);
font-size: var(--tg-alert-font-size);
line-height: var(--tg-leading-normal);
border-left: var(--tg-alert-border-width) solid transparent;
}
.tg-alert-icon-layout {
flex-direction: row;
gap: var(--tg-space-3);
align-items: flex-start;
}
.tg-alert-body { display: flex; flex-direction: column; gap: var(--tg-space-1); }
.tg-alert-title { font-weight: var(--tg-weight-semi); margin-bottom: var(--tg-space-1); font-size: var(--tg-font-size-sm); }
.tg-alert-success { background: var(--tg-color-success-subtle); border-left-color: var(--tg-color-success); color: var(--tg-color-success-subtle-text); }
.tg-alert-info { background: var(--tg-color-info-subtle); border-left-color: var(--tg-color-info); color: var(--tg-color-info-subtle-text); }
.tg-alert-danger { background: var(--tg-color-danger-subtle); border-left-color: var(--tg-color-danger); color: var(--tg-color-danger-subtle-text); }
.tg-alert-warning { background: var(--tg-color-warning-subtle); border-left-color: var(--tg-color-warning); color: var(--tg-color-warning-subtle-text); }
.tg-alert-rating { background: var(--tg-color-rating-subtle); border-left-color: var(--tg-color-rating); color: var(--tg-color-rating-subtle-text); }
.tg-alert-secondary { background: var(--tg-color-brand-secondary-subtle); border-left-color: var(--tg-color-brand-secondary); color: var(--tg-color-brand-secondary-subtle-text); }
/* ============================================================
12. CARD COMPONENTS
============================================================ */
.tg-card {
background: var(--tg-card-bg);
background-image: var(--tg-card-texture, none);
border: var(--tg-border-width) solid var(--tg-card-border);
border-radius: var(--tg-card-radius);
padding: var(--tg-card-padding);
box-shadow: var(--tg-card-shadow);
backdrop-filter: var(--tg-card-backdrop-blur, none);
-webkit-backdrop-filter: var(--tg-card-backdrop-blur, none);
transition: var(--tg-card-transition);
}
.tg-card-hover:hover {
border-color: var(--tg-card-border-hover);
box-shadow: var(--tg-card-shadow-hover);
transform: var(--tg-hover-lift-md);
}
.tg-card-hover.tg-card-primary:hover {
border-color: var(--tg-card-border-hover);
border-top-color: var(--tg-color-brand-primary-hover);
}
.tg-card-primary { border-top: 3px solid var(--tg-color-brand-primary); }
.tg-card-raised {
background: var(--tg-surface-raised);
box-shadow: var(--tg-shadow-sm);
}
.tg-metric-card { background: var(--tg-surface-raised); border-radius: var(--tg-radius-md); padding: var(--tg-space-4); }
.tg-metric-label { font-family:var(--tg-font-sans); font-size:var(--tg-label-font-size, var(--tg-font-size-xs)); color:var(--tg-label-color, var(--tg-color-text-muted)); font-weight:var(--tg-label-font-weight, var(--tg-weight-medium)); line-height:var(--tg-label-line-height, var(--tg-leading-ui)); margin-bottom:var(--tg-space-2); }
.tg-metric-value { font-size: var(--tg-font-size-2xl); font-weight: var(--tg-weight-bold); color: var(--tg-color-text-primary); line-height: 1; }
/* ============================================================
13. FORM / INPUT COMPONENTS
============================================================ */
.tg-form-label {
display: block;
font-family: var(--tg-font-sans);
font-size: var(--tg-font-size-sm);
font-weight: var(--tg-weight-semi);
line-height: var(--tg-leading-ui);
color: var(--tg-color-text-primary);
margin-bottom: var(--tg-space-1);
}
.tg-form-hint {
display: block;
font-family: var(--tg-font-sans);
font-size: var(--tg-font-size-xs);
color: var(--tg-color-text-muted);
margin-top: var(--tg-space-1);
line-height: var(--tg-leading-normal);
}
.tg-form-hint-error { color: var(--tg-color-danger); }
.tg-input {
display: block;
width: 100%;
background: var(--tg-input-bg);
color: var(--tg-input-text);
border: var(--tg-border-width-thick) solid var(--tg-input-border);
border-radius: var(--tg-input-radius);
padding: var(--tg-input-padding-y) var(--tg-input-padding-x);
font-family: var(--tg-font-sans);
font-size: var(--tg-input-font-size);
line-height: var(--tg-leading-normal);
transition: var(--tg-transition-colors), var(--tg-transition-shadow);
outline: none;
box-sizing: border-box;
}
.tg-input::placeholder { color: var(--tg-input-placeholder); }
.tg-input:hover { border-color: var(--tg-border-strong); }
.tg-input:focus,
.tg-input:focus-visible {
background: var(--tg-input-bg-focus);
border-color: var(--tg-input-border-focus);
box-shadow: 0 0 0 3px var(--tg-color-focus-ring);
outline: none;
}
.tg-input-error { border-color: var(--tg-input-border-error); }
.tg-input-error:focus,
.tg-input-error:focus-visible {
border-color: var(--tg-input-border-error);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--tg-color-danger) 25%, transparent);
}
.tg-input:disabled,
.tg-input[aria-disabled="true"] {
background: var(--tg-color-disabled-bg);
color: var(--tg-color-disabled);
border-color: var(--tg-color-disabled);
cursor: not-allowed;
pointer-events: none;
}
.tg-input:disabled::placeholder,
.tg-input[aria-disabled="true"]::placeholder { color: var(--tg-color-disabled); }
.tg-input-sm { padding: 4px var(--tg-space-2); font-size: var(--tg-font-size-xs); border-radius: var(--tg-radius-sm); }
.tg-input-lg { padding: var(--tg-space-3) var(--tg-space-4); font-size: var(--tg-font-size-base); border-radius: var(--tg-radius-lg); }
textarea.tg-input { resize: vertical; min-height: 96px; }
/* Select — chevron is a separate overlay icon, not a background-image on the
select itself. Chromium bleeds/tiles a select's own background-image into
the native options popup when opened; a decoupled overlay icon can't. */
.tg-select-wrapper {
position: relative;
display: block;
}
select.tg-input {
appearance: none;
-webkit-appearance: none;
padding-right: var(--tg-space-8);
cursor: pointer;
width: 100%;
}
.tg-select-chevron {
position: absolute;
top: 50%;
right: var(--tg-space-3);
transform: translateY(-50%);
pointer-events: none;
color: var(--tg-color-text-muted);
}
.tg-select-chevron svg { display: block; width: 12px; height: 12px; }
.tg-form-group {
display: flex;
flex-direction: column;
gap: var(--tg-space-1);
margin-bottom: var(--tg-space-4);
}
/* ============================================================
14. SLIDER COMPONENT
════════════════════════════════════════════════════════════
Styled range input. Cross-browser via WebKit and Firefox
pseudo-element selectors.
Fill up to the thumb position requires setting --value on
the element via the input event (see script.js for helper):
el.style.setProperty('--value', el.value);
el.style.setProperty('--min', el.min || 0);
el.style.setProperty('--max', el.max || 100);
The fill gradient uses these three properties to compute the
fill percentage: calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%)
Usage:
============================================================ */
.tg-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: var(--tg-slider-track-height);
border-radius: var(--tg-slider-radius);
outline: none;
cursor: pointer;
background: linear-gradient(
to right,
var(--tg-slider-track-fill) 0%,
var(--tg-slider-track-fill) calc((var(--value, 50) - var(--min, 0)) / (var(--max, 100) - var(--min, 0)) * 100%),
var(--tg-slider-track-bg) calc((var(--value, 50) - var(--min, 0)) / (var(--max, 100) - var(--min, 0)) * 100%),
var(--tg-slider-track-bg) 100%
);
transition: var(--tg-slider-transition);
}
/* WebKit / Blink thumb */
.tg-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: var(--tg-slider-thumb-size);
height: var(--tg-slider-thumb-size);
border-radius: var(--tg-radius-full);
background: var(--tg-slider-thumb-bg);
border: var(--tg-slider-thumb-border);
box-shadow: var(--tg-slider-thumb-shadow);
cursor: pointer;
transition: var(--tg-slider-thumb-transition);
}
.tg-slider:hover:not(:disabled)::-webkit-slider-thumb {
box-shadow: var(--tg-slider-thumb-shadow), var(--tg-slider-thumb-halo-hover);
transform: scale(var(--tg-slider-thumb-scale-hover));
}
.tg-slider:active:not(:disabled)::-webkit-slider-thumb {
box-shadow: var(--tg-slider-thumb-shadow), var(--tg-slider-thumb-halo-active);
cursor: grabbing;
transform: scale(var(--tg-slider-thumb-scale-active));
}
/* Firefox thumb */
.tg-slider::-moz-range-thumb {
width: var(--tg-slider-thumb-size);
height: var(--tg-slider-thumb-size);
border-radius: var(--tg-radius-full);
background: var(--tg-slider-thumb-bg);
border: var(--tg-slider-thumb-border);
box-shadow: var(--tg-slider-thumb-shadow);
cursor: pointer;
transition: var(--tg-slider-thumb-transition);
}
.tg-slider:hover:not(:disabled)::-moz-range-thumb {
box-shadow: var(--tg-slider-thumb-shadow), var(--tg-slider-thumb-halo-hover);
transform: scale(var(--tg-slider-thumb-scale-hover));
}
.tg-slider:active:not(:disabled)::-moz-range-thumb {
box-shadow: var(--tg-slider-thumb-shadow), var(--tg-slider-thumb-halo-active);
cursor: grabbing;
transform: scale(var(--tg-slider-thumb-scale-active));
}
/* Firefox track — hide the default fill since we use a background gradient */
.tg-slider::-moz-range-track {
background: transparent;
}
.tg-slider:focus-visible {
outline: none;
}
.tg-slider:focus-visible::-webkit-slider-thumb {
box-shadow: var(--tg-slider-thumb-shadow), 0 0 0 4px var(--tg-surface-base), 0 0 0 7px var(--tg-color-focus-ring);
}
.tg-slider:focus-visible::-moz-range-thumb {
box-shadow: var(--tg-slider-thumb-shadow), 0 0 0 4px var(--tg-surface-base), 0 0 0 7px var(--tg-color-focus-ring);
}
.tg-slider:disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* Color variants — override the track-fill/thumb custom properties directly
on the element; an explicit value on the element always wins over the
inherited :root default, so no extra specificity tricks are needed */
.tg-slider-secondary {
--tg-slider-track-fill: var(--tg-color-brand-secondary-control);
--tg-slider-thumb-bg: var(--tg-color-brand-secondary-control);
--tg-slider-thumb-border: 0;
/* Custom-property values inherit after resolution. Redeclare the halos
here so they resolve against this variant's secondary thumb fill. */
--tg-slider-thumb-halo-hover: 0 0 0 5px color-mix(in srgb, var(--tg-slider-thumb-bg) 18%, transparent);
--tg-slider-thumb-halo-active: 0 0 0 7px color-mix(in srgb, var(--tg-slider-thumb-bg) 26%, transparent);
}
/* ============================================================
15. TOGGLE / SWITCH COMPONENT
════════════════════════════════════════════════════════════
Built on a hidden for accessibility
and native form behavior. The label is the visual element.
Expected markup:
============================================================ */
.tg-toggle {
display: inline-flex;
align-items: center;
gap: var(--tg-space-3);
cursor: pointer;
user-select: none;
}
.tg-toggle-label {
font-family: var(--tg-font-sans);
font-size: var(--tg-font-size-sm);
font-weight: var(--tg-weight-medium);
color: var(--tg-color-text-secondary);
}
.tg-toggle-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.tg-toggle-track {
position: relative;
display: inline-flex;
align-items: center;
width: var(--tg-toggle-width);
height: var(--tg-toggle-height);
border-radius: var(--tg-toggle-radius);
background: var(--tg-toggle-bg-off);
transition: var(--tg-toggle-transition);
flex-shrink: 0;
}
.tg-toggle-thumb {
position: absolute;
left: 3px;
width: var(--tg-toggle-thumb-size);
height: var(--tg-toggle-thumb-size);
border-radius: var(--tg-radius-full);
background: var(--tg-toggle-thumb-bg-off);
box-shadow: var(--tg-toggle-thumb-shadow-off);
transition: transform var(--tg-duration-base) var(--tg-ease-spring), background-color var(--tg-duration-base) var(--tg-ease-standard), box-shadow var(--tg-duration-base) var(--tg-ease-standard);
}
/* Checked state — thumb slides right, track turns on, thumb switches to
the on-brand-primary on-color (contrast-validated against the brand
fill it now sits on, unlike the off-state neutral track) and drops
the ink-colored shadow (see --tg-toggle-thumb-shadow-on above). */
.tg-toggle-input:checked + .tg-toggle-track {
background: var(--tg-toggle-bg-on);
}
.tg-toggle-input:checked + .tg-toggle-track .tg-toggle-thumb {
box-shadow: var(--tg-toggle-thumb-shadow-on);
background: var(--tg-toggle-thumb-bg-on);
transform: translateX(calc(var(--tg-toggle-width) - var(--tg-toggle-thumb-size) - 6px));
}
/* Focus state */
.tg-toggle-input:focus-visible + .tg-toggle-track {
outline: 2px solid var(--tg-color-focus-ring);
outline-offset: 2px;
}
/* Hover — subtle track brightening */
.tg-toggle:hover .tg-toggle-track {
filter: brightness(1.08);
}
/* Disabled state */
.tg-toggle:has(.tg-toggle-input:disabled) {
cursor: not-allowed;
opacity: 0.45;
}
/* ============================================================
16. TAB COMPONENT
════════════════════════════════════════════════════════════
Underline-style tabs (not pill/button-style). The active
indicator is a 2px bottom border on the active tab button.
Expected markup:
Content
Content
JS: call initTabs('.tg-tabs') — see script.js.
============================================================ */
.tg-tabs {
display: flex;
flex-direction: column;
}
.tg-tab-list {
display: flex;
border-bottom: var(--tg-border-width) solid var(--tg-tab-border-color);
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
.tg-tab-list::-webkit-scrollbar { display: none; }
.tg-tab {
display: inline-flex;
align-items: center;
padding: var(--tg-tab-padding-y) var(--tg-tab-padding-x);
font-family: var(--tg-font-sans);
font-size: var(--tg-tab-font-size);
font-weight: var(--tg-tab-font-weight);
color: var(--tg-tab-color);
background: transparent;
border: none;
border-bottom: var(--tg-tab-indicator-height) solid transparent;
margin-bottom: calc(-1 * var(--tg-border-width));
cursor: pointer;
white-space: nowrap;
transition: var(--tg-tab-transition);
outline: none;
}
.tg-tab:hover {
color: var(--tg-tab-color-hover);
}
.tg-tab:focus-visible {
outline: 2px solid var(--tg-color-focus-ring);
outline-offset: -2px;
border-radius: var(--tg-radius-sm) var(--tg-radius-sm) 0 0;
}
.tg-tab.tg-tab-active,
.tg-tab[aria-selected="true"] {
color: var(--tg-tab-color-active);
font-weight: var(--tg-weight-semi);
border-bottom-color: var(--tg-tab-indicator-color);
}
.tg-tab-panel { padding-top: var(--tg-space-6); }
.tg-tab-panel-hidden { display: none; }
/* ============================================================
17. PROGRESS BAR COMPONENT
════════════════════════════════════════════════════════════
Semantic progress bar with size and status color variants.
Expected markup:
Size variants: tg-progress-sm (4px), tg-progress-md (8px, default)
Status variants: tg-progress-success, tg-progress-danger,
tg-progress-warning, tg-progress-info
============================================================ */
.tg-progress {
width: 100%;
background: var(--tg-progress-track-bg);
border-radius: var(--tg-progress-radius);
overflow: hidden;
height: var(--tg-progress-height-md);
}
.tg-progress-sm { height: var(--tg-progress-height-sm); }
.tg-progress-md { height: var(--tg-progress-height-md); }
.tg-progress-fill {
height: 100%;
background: var(--tg-progress-fill-bg);
border-radius: var(--tg-progress-radius);
transition: var(--tg-progress-transition);
}
/* Status variants — fill color only; other tokens unchanged */
.tg-progress-success .tg-progress-fill { background: var(--tg-color-success); }
.tg-progress-danger .tg-progress-fill { background: var(--tg-color-danger); }
.tg-progress-warning .tg-progress-fill { background: var(--tg-color-warning); }
.tg-progress-info .tg-progress-fill { background: var(--tg-color-info); }
/* ============================================================
18. HERO PATTERN OVERLAYS
════════════════════════════════════════════════════════════
Layer on top of any hero gradient for texture.
Usage:
============================================================ */
[class*="tg-pattern-"] {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.tg-pattern-grid {
background-image:
linear-gradient(var(--tg-pattern-line) 1px, transparent 1px),
linear-gradient(90deg, var(--tg-pattern-line) 1px, transparent 1px);
background-size: 40px 40px;
}
.tg-pattern-dots {
background-image: radial-gradient(
circle,
var(--tg-pattern-line) 1.5px,
transparent 1.5px
);
background-size: 24px 24px;
}
.tg-pattern-diagonal {
background-image: repeating-linear-gradient(
45deg,
var(--tg-pattern-line),
var(--tg-pattern-line) 1px,
transparent 1px,
transparent 12px
);
}
.tg-pattern-crosshatch {
background-image:
repeating-linear-gradient(
45deg,
var(--tg-pattern-line) 0,
var(--tg-pattern-line) 1px,
transparent 0,
transparent 50%
),
repeating-linear-gradient(
-45deg,
var(--tg-pattern-line) 0,
var(--tg-pattern-line) 1px,
transparent 0,
transparent 50%
);
background-size: 20px 20px;
}
.tg-pattern-circuit {
background-image:
linear-gradient(var(--tg-pattern-line) 1px, transparent 1px),
linear-gradient(90deg, var(--tg-pattern-line) 1px, transparent 1px),
linear-gradient(color-mix(in srgb, var(--tg-pattern-line) 50%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--tg-pattern-line) 50%, transparent) 1px, transparent 1px);
background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}
.tg-pattern-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 75%);
mask-image: linear-gradient(to bottom, black 0%, transparent 75%);
}
.tg-pattern-fade-top {
-webkit-mask-image: linear-gradient(to top, black 0%, transparent 75%);
mask-image: linear-gradient(to top, black 0%, transparent 75%);
}
.tg-pattern-fade-center {
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 100%);
mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 100%);
}
/* ============================================================
19. NAVBAR COMPONENT
============================================================ */
.tg-navbar {
background: var(--tg-navbar-bg);
border-bottom: var(--tg-border-width) solid var(--tg-navbar-border);
}
.tg-navbar-inner {
max-width: var(--tg-container-max);
margin: 0 auto;
height: var(--tg-navbar-height);
padding: 0 var(--tg-container-padding);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--tg-space-6);
}
.tg-navbar-logo {
font-family: var(--tg-font-heading, var(--tg-font-sans));
font-size: var(--tg-font-size-lg);
font-weight: var(--tg-weight-bold);
color: var(--tg-color-text-primary);
text-decoration: none;
white-space: nowrap;
}
.tg-navbar-links {
display: flex;
align-items: center;
gap: var(--tg-space-6);
list-style: none;
margin: 0;
padding: 0;
}
.tg-navbar-link {
color: var(--tg-navbar-link-color);
font-size: var(--tg-navbar-link-font-size);
font-weight: var(--tg-navbar-link-font-weight);
text-decoration: none;
transition: var(--tg-navbar-transition);
}
.tg-navbar-link:hover { color: var(--tg-navbar-link-color-hover); }
.tg-navbar-actions {
display: flex;
align-items: center;
gap: var(--tg-space-3);
flex-shrink: 0;
}
@media (max-width: 720px) {
.tg-navbar-links { display: none; }
}
/* ============================================================
20. HERO SECTION COMPONENT
============================================================ */
.tg-hero {
position: relative;
overflow: hidden;
padding: var(--tg-hero-padding-y) var(--tg-hero-padding-x);
text-align: center;
}
.tg-hero-inner {
position: relative;
z-index: 1;
max-width: var(--tg-hero-content-max);
margin: 0 auto;
}
.tg-hero-eyebrow {
display: inline-block;
color: var(--tg-hero-eyebrow-color);
font-size: var(--tg-font-size-sm);
font-weight: var(--tg-weight-semi);
letter-spacing: var(--tg-tracking-caps, 0.05em);
text-transform: uppercase;
margin: 0 0 var(--tg-space-4);
}
.tg-hero-headline { margin: 0 0 var(--tg-space-5); }
.tg-hero-subhead {
font-size: var(--tg-font-size-lg);
color: var(--tg-color-text-secondary);
line-height: var(--tg-leading-normal);
margin: 0 auto var(--tg-space-8);
}
.tg-hero-actions {
display: flex;
align-items: center;
justify-content: center;
gap: var(--tg-space-4);
flex-wrap: wrap;
}
@media (max-width: 640px) {
.tg-hero-actions { flex-direction: column; align-items: stretch; }
}
/* ============================================================
21. FEATURE GRID / CARD COMPONENT
============================================================ */
.tg-feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--tg-feature-grid-min), 1fr));
gap: var(--tg-feature-grid-gap);
}
.tg-feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: var(--tg-feature-icon-size);
height: var(--tg-feature-icon-size);
border-radius: var(--tg-feature-icon-radius);
background: var(--tg-feature-icon-bg);
color: var(--tg-feature-icon-color);
margin-bottom: var(--tg-space-4);
}
.tg-feature-title { margin: 0 0 var(--tg-space-2); }
.tg-feature-desc {
color: var(--tg-color-text-secondary);
line-height: var(--tg-leading-normal);
margin: 0;
}
/* ============================================================
22. CTA BAND COMPONENT
============================================================ */
.tg-cta-band {
background: var(--tg-cta-bg);
color: var(--tg-cta-text);
border: var(--tg-border-width) solid var(--tg-card-border);
border-radius: var(--tg-cta-radius);
padding: var(--tg-cta-padding-y) var(--tg-cta-padding-x);
box-shadow: var(--tg-card-shadow);
text-align: center;
}
.tg-cta-band .tg-heading-1,
.tg-cta-band .tg-heading-2 { color: var(--tg-cta-text); }
.tg-cta-band-subhead {
color: color-mix(in srgb, var(--tg-cta-text) 82%, transparent);
margin: 0 auto var(--tg-space-6);
max-width: var(--tg-hero-content-max);
}
.tg-cta-band-actions {
display: flex;
align-items: center;
justify-content: center;
gap: var(--tg-space-4);
flex-wrap: wrap;
}
.tg-btn-cta {
background: var(--tg-cta-button-bg);
color: var(--tg-cta-button-text);
border-color: var(--tg-cta-button-bg);
}
.tg-btn-cta:hover {
transform: var(--tg-hover-lift-sm);
box-shadow: var(--tg-shadow-md);
}
.tg-btn-cta:active { transform: var(--tg-active-press); }
.tg-btn-cta-ghost {
background: transparent;
color: var(--tg-cta-ghost-text);
border-color: var(--tg-cta-ghost-border);
}
.tg-btn-cta-ghost:hover { border-color: var(--tg-cta-text); }
/* ============================================================
23. FEATURE LIST / FEATURE NUMBERED (alternatives to Feature Grid)
════════════════════════════════════════════════════════════
Same purpose as .tg-feature-grid (§21), different compositions —
equally valid, not a fallback. .tg-feature-list reads quieter (no
card surface, just a divided list); .tg-feature-numbered-grid leans
on typography instead of an icon badge. Pick whichever suits the
page, per DESIGN.md's composition-freedom guidance.
============================================================ */
.tg-feature-list {
display: flex;
flex-direction: column;
}
.tg-feature-list-row {
display: flex;
align-items: flex-start;
gap: var(--tg-feature-list-gap);
padding: var(--tg-feature-list-row-gap) 0;
border-bottom: var(--tg-border-width) solid var(--tg-border-subtle);
}
.tg-feature-list-row:last-child { border-bottom: none; }
.tg-feature-list-row .tg-feature-icon {
width: var(--tg-feature-list-icon-size);
height: var(--tg-feature-list-icon-size);
flex-shrink: 0;
}
.tg-feature-numbered-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--tg-feature-numbered-min), 1fr));
gap: var(--tg-feature-numbered-gap);
}
/* No card, no shadow, no background — unlike Feature Grid/List, this
variant has nothing else separating one item from the next, so on an
archetype with little or no shadow/border language (terminal-dev,
luxury-minimal) the items read as plain floating text. A thin top
rule gives it a visual anchor without turning it into a card — the
same "thin rules instead of borders" move editorial already uses as
its own signature trait, reused here as the anchor for every
archetype that picks this variant, not just editorial. */
.tg-feature-numbered-item {
border-top: var(--tg-border-width-thick) solid var(--tg-border-default);
padding-top: var(--tg-space-5);
}
.tg-feature-numbered-index {
font-family: var(--tg-font-heading, var(--tg-font-sans));
font-size: var(--tg-feature-numbered-index-size);
font-weight: var(--tg-weight-display);
color: var(--tg-feature-numbered-index-color);
line-height: 1;
margin-bottom: var(--tg-space-3);
}
/* ============================================================
24. CTA BAR (alternative to CTA Band)
════════════════════════════════════════════════════════════
Same purpose as .tg-cta-band (§22) — a quieter, lower-weight
composition: a bordered surface bar instead of a filled brand-color
block. Equally valid, not a fallback for when the band feels like
too much.
============================================================ */
.tg-cta-bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--tg-cta-bar-gap);
background: var(--tg-cta-bar-bg);
border: var(--tg-border-width) solid var(--tg-cta-bar-border);
border-radius: var(--tg-cta-bar-radius);
padding: var(--tg-cta-bar-padding-y) var(--tg-cta-bar-padding-x);
}
/* ============================================================
25. ACCESSIBILITY
============================================================ */
@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;
}
}
/* ============================================================
6. APPLICATIONS — portable application component catalog
These components consume semantic tokens only. Behavior is host-owned;
see APPLICATIONS.md for keyboard, focus, dismissal, and live-region rules.
============================================================ */
:root {
--tg-app-nav-width: 16rem;
--tg-app-header-height: 4rem;
--tg-app-panel-bg: var(--tg-surface-raised);
--tg-app-selected-bg: var(--tg-color-brand-primary-subtle);
--tg-app-selected-text: var(--tg-color-brand-primary-text);
--tg-app-overlay: var(--tg-color-overlay);
--tg-app-focus-ring: 0 0 0 3px var(--tg-color-focus-ring);
}
.tg-app-shell { display:grid; grid-template-columns:var(--tg-app-nav-width) minmax(0,1fr); min-height:100vh; color:var(--tg-color-text-primary); background:var(--tg-surface-base); }
.tg-app-nav { padding:var(--tg-space-4); border-right:var(--tg-border-width) solid var(--tg-border-subtle); background:var(--tg-app-panel-bg); }
.tg-app-nav-list { display:grid; gap:var(--tg-space-1); margin:var(--tg-space-5) 0 0; padding:0; list-style:none; }
.tg-app-nav-link { display:flex; gap:var(--tg-space-3); align-items:center; min-height:44px; padding:0 var(--tg-space-3); color:var(--tg-color-text-secondary); border-radius:var(--tg-radius-md); text-decoration:none; }
.tg-app-nav-link:hover { color:var(--tg-color-text-primary); background:var(--tg-surface-sunken); }
.tg-app-nav-link[aria-current="page"] { color:var(--tg-app-selected-text); background:var(--tg-app-selected-bg); font-weight:var(--tg-weight-semi); }
.tg-app-main { min-width:0; }
.tg-app-header { display:flex; align-items:center; justify-content:space-between; gap:var(--tg-space-4); min-height:var(--tg-app-header-height); padding:0 var(--tg-space-6); border-bottom:var(--tg-border-width) solid var(--tg-border-subtle); }
.tg-app-content { max-width:var(--tg-container-max-wide); margin:auto; padding:var(--tg-space-8) var(--tg-space-6); }
.tg-avatar { display:inline-grid; place-items:center; flex:0 0 auto; width:2.5rem; height:2.5rem; overflow:hidden; border-radius:var(--tg-radius-full); background:var(--tg-color-brand-primary-subtle); color:var(--tg-color-brand-primary-text); font-weight:var(--tg-weight-bold); }
.tg-user-control { display:inline-flex; align-items:center; gap:var(--tg-space-2); min-height:44px; padding:var(--tg-space-1); border:0; border-radius:var(--tg-radius-full); color:var(--tg-color-text-primary); background:transparent; }
.tg-chip { display:inline-flex; align-items:center; gap:var(--tg-space-2); min-height:32px; padding:0 var(--tg-space-3); border:var(--tg-border-width) solid var(--tg-border-default); border-radius:var(--tg-radius-full); color:var(--tg-color-text-secondary); background:var(--tg-surface-base); }
button.tg-chip { cursor:pointer; } .tg-chip[aria-pressed="true"], .tg-chip[data-selected="true"] { color:var(--tg-app-selected-text); border-color:var(--tg-color-brand-primary); background:var(--tg-app-selected-bg); }
.tg-table-wrap { overflow-x:auto; border:var(--tg-border-width) solid var(--tg-border-subtle); border-radius:var(--tg-radius-lg); background:var(--tg-surface-base); }
.tg-table { width:100%; border-collapse:collapse; font-size:var(--tg-font-size-sm); } .tg-table th,.tg-table td { padding:var(--tg-space-3) var(--tg-space-4); text-align:left; border-bottom:var(--tg-border-width) solid var(--tg-border-subtle); } .tg-table th { color:var(--tg-label-color, var(--tg-color-text-secondary)); background:var(--tg-surface-sunken); font-family:var(--tg-font-sans); font-size:var(--tg-label-font-size, var(--tg-font-size-xs)); font-weight:var(--tg-label-font-weight, var(--tg-weight-semi)); line-height:var(--tg-label-line-height, var(--tg-leading-ui)); } .tg-table-num,.tg-pagination-item { font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } .tg-table-end { text-align:right !important; } .tg-table tr:last-child td { border-bottom:0; }
.tg-pagination { display:flex; align-items:center; gap:var(--tg-space-2); } .tg-pagination-info { color:var(--tg-color-text-secondary); font-size:var(--tg-font-size-sm); } .tg-pagination-item { min-width:2.5rem; } .tg-pagination [aria-current="page"] { color:var(--tg-on-brand-primary); background:var(--tg-color-brand-primary-control); }
.tg-popover,.tg-menu { position:absolute; z-index:var(--tg-z-dropdown); min-width:12rem; padding:var(--tg-space-2); border:var(--tg-border-width) solid var(--tg-border-subtle); border-radius:var(--tg-radius-md); background:var(--tg-app-panel-bg); box-shadow:var(--tg-shadow-md); }
.tg-menu-heading { margin:var(--tg-space-2) var(--tg-space-3); color:var(--tg-label-color, var(--tg-color-text-muted)); font-family:var(--tg-font-sans); font-size:var(--tg-label-font-size, var(--tg-font-size-xs)); font-weight:var(--tg-label-font-weight, var(--tg-weight-semi)); line-height:var(--tg-label-line-height, var(--tg-leading-ui)); } .tg-menu-heading-identity { margin:var(--tg-space-2) var(--tg-space-3); color:var(--tg-color-text-primary); font-family:var(--tg-font-sans); font-size:var(--tg-font-size-sm); font-weight:var(--tg-weight-semi); line-height:var(--tg-leading-ui); } .tg-menu-item-meta { margin-left:auto; color:var(--tg-color-text-muted); font-size:var(--tg-font-size-xs); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } .tg-menu [role="menuitem"] { display:flex; align-items:center; width:100%; min-height:40px; padding:0 var(--tg-space-3); border:0; border-radius:var(--tg-radius-sm); color:var(--tg-color-text-primary); background:transparent; text-align:left; } .tg-menu [role="menuitem"]:hover { background:var(--tg-surface-sunken); }
.tg-tooltip { position:absolute; z-index:var(--tg-z-dropdown); max-width:18rem; padding:var(--tg-space-2) var(--tg-space-3); border-radius:var(--tg-radius-sm); color:var(--tg-color-text-inverse); background:var(--tg-color-text-primary); font-size:var(--tg-font-size-xs); }
.tg-drawer { position:fixed; z-index:var(--tg-z-modal); inset:0 auto 0 0; width:min(90vw,24rem); padding:var(--tg-space-6); background:var(--tg-app-panel-bg); box-shadow:var(--tg-shadow-lg); } .tg-modal-backdrop { position:fixed; z-index:var(--tg-z-overlay); inset:0; background:var(--tg-app-overlay); } .tg-modal { position:fixed; z-index:var(--tg-z-modal); inset:50% auto auto 50%; width:min(calc(100vw - 2rem),36rem); transform:translate(-50%,-50%); padding:var(--tg-space-6); border:var(--tg-border-width) solid var(--tg-border-subtle); border-radius:var(--tg-radius-lg); background:var(--tg-app-panel-bg); box-shadow:var(--tg-shadow-xl); }
.tg-toast-region { position:fixed; z-index:var(--tg-z-toast); right:var(--tg-space-4); bottom:var(--tg-space-4); display:grid; gap:var(--tg-space-3); width:min(calc(100vw - 2rem),24rem); } .tg-toast { padding:var(--tg-space-4); border:var(--tg-border-width) solid var(--tg-border-default); border-radius:var(--tg-radius-md); background:var(--tg-app-panel-bg); box-shadow:var(--tg-shadow-lg); }
.tg-ai-surface { padding:var(--tg-space-5); border:var(--tg-border-width) solid var(--tg-color-brand-primary); border-radius:var(--tg-radius-lg); background:var(--tg-color-brand-primary-subtle); } .tg-ai-response { padding:var(--tg-space-4); border-radius:var(--tg-radius-md); background:var(--tg-surface-base); }
.tg-empty-state { display:grid; justify-items:center; gap:var(--tg-space-3); padding:var(--tg-space-12) var(--tg-space-6); color:var(--tg-color-text-secondary); text-align:center; } .tg-skeleton { display:block; min-height:1em; border-radius:var(--tg-radius-sm); background:linear-gradient(90deg,var(--tg-surface-sunken),var(--tg-surface-raised),var(--tg-surface-sunken)); background-size:200% 100%; animation:tg-skeleton var(--tg-duration-slower) var(--tg-ease-standard) infinite; }
:where(button,a,input,select,textarea,[tabindex]):focus-visible { outline:none; box-shadow:var(--tg-app-focus-ring); }
@keyframes tg-skeleton { to { background-position:-200% 0; } }
@media (max-width: 760px) { .tg-app-shell { grid-template-columns:1fr; } .tg-app-nav { display:none; } .tg-app-nav[data-open="true"] { display:block; position:fixed; z-index:var(--tg-z-modal); inset:0 auto 0 0; width:min(88vw,var(--tg-app-nav-width)); box-shadow:var(--tg-shadow-xl); } .tg-app-content { padding:var(--tg-space-6) var(--tg-space-4); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:0.01ms !important; animation-duration:0.01ms !important; animation-iteration-count:1 !important; } }
:root {
/* --- Archetype structural hatches --- */
--tg-card-texture: repeating-linear-gradient(45deg, var(--tg-border-subtle) 0, var(--tg-border-subtle) 1px, transparent 1px, transparent 7px);
}