/* ========================================================================== TGA Design Tokens The single source of truth for color, spacing, type, radius, shadow, motion and layout. Light is the default; dark theme overrides via [data-theme="dark"] on . ========================================================================== */ :root { /* ── Brand ───────────────────────────────────────────────────────── */ /* Warm anthracite primary + restrained brass/copper accent. Used sparingly for primary actions, focus rings and active states. */ --brand-50: #f7f2ec; --brand-100: #ece0d0; --brand-200: #d8c1a3; --brand-300: #c19f78; --brand-400: #ae8559; --brand-500: #966c3f; /* primary brand */ --brand-600: #7a5631; --brand-700: #5e4226; --brand-800: #432f1c; --brand-900: #2a1d11; --brand: var(--brand-500); --brand-hover: var(--brand-600); --brand-active: var(--brand-700); --brand-soft: var(--brand-50); /* tinted backgrounds */ --brand-on: #ffffff; /* text/icon on brand */ /* ── Neutrals ────────────────────────────────────────────────────── */ /* Warm anthracite neutrals — slightly warmer than slate. */ --neutral-0: #ffffff; --neutral-50: #f8f7f5; --neutral-100: #f1efeb; --neutral-150: #e8e5df; --neutral-200: #ddd9d2; --neutral-300: #c5c0b6; --neutral-400: #9c958a; --neutral-500: #74706a; --neutral-600: #56524d; --neutral-700: #3e3b37; --neutral-800: #2a2926; --neutral-900: #1a1917; --neutral-950: #0f0e0d; /* ── Surfaces ────────────────────────────────────────────────────── */ --surface-base: var(--neutral-50); /* page background */ --surface-raised: var(--neutral-0); /* cards, sidebar */ --surface-sunken: var(--neutral-100); /* nav active, table head, hovered */ --surface-overlay: rgba(26, 25, 23, 0.55); --surface-tint: var(--brand-soft); /* ── Borders ─────────────────────────────────────────────────────── */ --border-subtle: var(--neutral-150); --border-default: var(--neutral-200); --border-strong: var(--neutral-300); --border-focus: var(--brand); /* ── Text ────────────────────────────────────────────────────────── */ --text-primary: var(--neutral-900); --text-secondary: var(--neutral-700); --text-muted: var(--neutral-500); --text-disabled: var(--neutral-400); --text-inverse: var(--neutral-0); --text-link: var(--brand-600); --text-link-hover: var(--brand-700); --text-on-brand: #ffffff; /* ── Status colors (foreground / soft background / border) ───────── */ --success: #2f7d4a; --success-fg: #134e2c; --success-bg: #e7f3ec; --success-border: #b9dcc4; --warning: #b07a14; --warning-fg: #6c4a08; --warning-bg: #fbf2dd; --warning-border: #e9d49a; --danger: #b3372d; --danger-fg: #7a221b; --danger-bg: #fbe9e7; --danger-border: #ecbab4; --info: #2563a8; --info-fg: #143d6e; --info-bg: #e6eff9; --info-border: #b6cbe6; /* ── Radius ──────────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* ── Shadows (kept very subtle — content first) ──────────────────── */ --shadow-xs: 0 1px 2px rgba(20, 18, 14, 0.04); --shadow-sm: 0 2px 4px rgba(20, 18, 14, 0.05), 0 1px 2px rgba(20, 18, 14, 0.04); --shadow-md: 0 6px 16px rgba(20, 18, 14, 0.07), 0 2px 4px rgba(20, 18, 14, 0.04); --shadow-lg: 0 16px 40px rgba(20, 18, 14, 0.10), 0 4px 10px rgba(20, 18, 14, 0.05); --shadow-focus: 0 0 0 3px rgba(150, 108, 63, 0.25); /* ── Typography ──────────────────────────────────────────────────── */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --fs-12: 0.75rem; /* 12px — micro */ --fs-13: 0.8125rem; /* 13px — meta */ --fs-14: 0.875rem; /* 14px — body small */ --fs-15: 0.9375rem; /* 15px — body default for UI */ --fs-16: 1rem; /* 16px — body */ --fs-18: 1.125rem; /* 18px — h4 */ --fs-22: 1.375rem; /* 22px — h3 */ --fs-28: 1.75rem; /* 28px — h2 / page title */ --fs-36: 2.25rem; /* 36px — h1 / display */ --lh-tight: 1.25; --lh-snug: 1.4; --lh-normal: 1.55; --lh-relaxed: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ── Spacing (4 / 8 grid) ────────────────────────────────────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 56px; --space-10: 64px; --space-12: 96px; /* ── Component sizes ─────────────────────────────────────────────── */ --control-h-sm: 28px; --control-h-md: 36px; /* default for buttons, inputs, selects, tags-large */ --control-h-lg: 44px; --control-px: 12px; /* ── Layout ──────────────────────────────────────────────────────── */ --sidebar-w: 248px; --sidebar-w-collapsed: 64px; --header-h: 56px; --content-max: 1440px; --content-px: 24px; /* ── Z-index scale ───────────────────────────────────────────────── */ --z-sidebar: 100; --z-header: 110; --z-dropdown: 1000; --z-popover: 1100; --z-modal: 1200; --z-toast: 1300; --z-tooltip: 1400; /* ── Motion ──────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.5, 0, 0.3, 1); --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 240ms; color-scheme: light; } /* ============================================================================ Dark theme ============================================================================ */ [data-theme="dark"] { --brand: var(--brand-400); --brand-hover: var(--brand-300); --brand-active: var(--brand-200); --brand-soft: rgba(174, 133, 89, 0.12); --brand-on: #ffffff; --surface-base: #16140f; --surface-raised: #1f1c17; --surface-sunken: #2a2620; --surface-overlay: rgba(0, 0, 0, 0.65); --surface-tint: rgba(174, 133, 89, 0.10); --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.16); --border-focus: var(--brand-300); --text-primary: #f3efe8; --text-secondary: #d6cfc2; --text-muted: #998f80; --text-disabled: #6b6358; --text-inverse: var(--neutral-900); --text-link: var(--brand-300); --text-link-hover: var(--brand-200); --text-on-brand: var(--neutral-950); --success: #4caf6e; --success-fg: #b6e5c1; --success-bg: rgba(76, 175, 110, 0.12); --success-border: rgba(76, 175, 110, 0.32); --warning: #d4a64a; --warning-fg: #f1d488; --warning-bg: rgba(212, 166, 74, 0.12); --warning-border: rgba(212, 166, 74, 0.32); --danger: #d96459; --danger-fg: #f0b6ae; --danger-bg: rgba(217, 100, 89, 0.12); --danger-border: rgba(217, 100, 89, 0.32); --info: #5b95d2; --info-fg: #b9d3ee; --info-bg: rgba(91, 149, 210, 0.12); --info-border: rgba(91, 149, 210, 0.32); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.30); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.50), 0 4px 10px rgba(0, 0, 0, 0.35); --shadow-focus: 0 0 0 3px rgba(193, 159, 120, 0.30); color-scheme: dark; } /* Auto-mode: use system preference if no explicit theme is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --brand: var(--brand-400); --brand-hover: var(--brand-300); --brand-active: var(--brand-200); --brand-soft: rgba(174, 133, 89, 0.12); --surface-base: #16140f; --surface-raised: #1f1c17; --surface-sunken: #2a2620; --surface-overlay: rgba(0, 0, 0, 0.65); --surface-tint: rgba(174, 133, 89, 0.10); --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.16); --border-focus: var(--brand-300); --text-primary: #f3efe8; --text-secondary: #d6cfc2; --text-muted: #998f80; --text-disabled: #6b6358; --text-inverse: var(--neutral-900); --text-link: var(--brand-300); --text-link-hover: var(--brand-200); --text-on-brand: var(--neutral-950); --success: #4caf6e; --success-fg: #b6e5c1; --success-bg: rgba(76, 175, 110, 0.12); --success-border: rgba(76, 175, 110, 0.32); --warning: #d4a64a; --warning-fg: #f1d488; --warning-bg: rgba(212, 166, 74, 0.12); --warning-border: rgba(212, 166, 74, 0.32); --danger: #d96459; --danger-fg: #f0b6ae; --danger-bg: rgba(217, 100, 89, 0.12); --danger-border: rgba(217, 100, 89, 0.32); --info: #5b95d2; --info-fg: #b9d3ee; --info-bg: rgba(91, 149, 210, 0.12); --info-border: rgba(91, 149, 210, 0.32); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.30); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.50), 0 4px 10px rgba(0, 0, 0, 0.35); --shadow-focus: 0 0 0 3px rgba(193, 159, 120, 0.30); color-scheme: dark; } }