:root {
    /* Core colors */
    --tb-color-bg: #f5f7f4;
    --tb-color-surface: #ffffff;
    --tb-color-surface-muted: #f0f3ef;
    --tb-color-surface-alt: #f8faf7;
    --tb-color-border: #d8ddd6;
    --tb-color-border-strong: #c4cdc5;
    --tb-color-text: #182018;
    --tb-color-text-muted: #5e685f;

    --tb-color-accent: #2b8535;
    --tb-color-accent-hover: #277a31;
    --tb-color-accent-strong: #1f6930;
    --tb-color-accent-soft: #e8f5ea;
    --tb-color-accent-soft-strong: #d7eedb;

    --tb-color-warning: #cb6d12;
    --tb-color-warning-soft: #fdf0e1;
    --tb-color-warning-border: #f5d2ab;
    --tb-color-danger: #c53d33;
    --tb-color-danger-soft: #f8e6e4;
    --tb-color-danger-border: #ffcdd2;

    --tb-color-success: #2e7d32;
    --tb-color-success-strong: #1e6d29;
    --tb-color-success-soft: #e8f5e9;
    --tb-color-success-border: #c8e6c9;
    --tb-color-success-border-soft: #b9dfbf;

    --tb-color-danger-strong: #a93129;

    --tb-color-white: #ffffff;
    --tb-color-black: #000000;

    --tb-color-focus: #204ecf;

    --tb-color-overlay-50: rgba(0, 0, 0, 0.5);
    --tb-color-overlay-strong: rgba(16, 24, 16, 0.78);
    --tb-color-shadow-card-hover: rgba(0, 0, 0, 0.1);
    --tb-color-surface-gradient-start: #ffffff;
    --tb-color-surface-gradient-end: #f4f8f3;

    /* Tactics Studio semantic colors */
    --tb-tactics-text-muted: #6c757d;
    --tb-tactics-text-strong: #212529;
    --tb-tactics-text-secondary: #4a5561;
    --tb-tactics-control-text: #22303a;
    --tb-tactics-divider: #e3e8ee;
    --tb-tactics-panel-border: #d6dde4;
    --tb-tactics-panel-border-hover: #aab6c2;
    --tb-tactics-panel-bg-subtle: #f8fafb;
    --tb-tactics-option-border-hover: #c5d0db;
    --tb-tactics-option-bg-hover: #f6f9fb;
    --tb-tactics-floating-shadow: rgba(20, 31, 41, 0.2);
    --tb-tactics-danger: #c62828;
    --tb-tactics-danger-soft: rgba(198, 40, 40, 0.08);
    --tb-tactics-danger-alt: #e53935;
    --tb-tactics-danger-alt-soft: rgba(229, 57, 53, 0.1);
    --tb-tactics-warning: #f9a825;
    --tb-tactics-warning-soft: rgba(249, 168, 37, 0.16);
    --tb-tactics-warning-text: #7a4e07;
    --tb-tactics-success-soft: rgba(46, 125, 50, 0.08);
    --tb-tactics-success-soft-strong: rgba(46, 125, 50, 0.09);
    --tb-tactics-toggle-off: #ccc;
    --tb-tactics-badge-bg: #f0f0f0;
    --tb-tactics-field-grass: #3f9f4c;
    --tb-tactics-field-shadow: rgba(0, 0, 0, 0.15);
    --tb-tactics-field-line: rgba(255, 255, 255, 0.9);
    --tb-tactics-field-stripe-light: rgba(255, 255, 255, 0.045);
    --tb-tactics-field-stripe-dark: rgba(0, 0, 0, 0.03);
    --tb-tactics-swatch-border: rgba(15, 23, 42, 0.25);
    --tb-tactics-marker-swatch-shadow: rgba(17, 17, 17, 0.2);
    --tb-tactics-marker-red: #d32f2f;
    --tb-tactics-marker-dark: #1f2937;
    --tb-tactics-marker-selected-glow: rgba(41, 98, 255, 0.7);
    --tb-tactics-marker-fill: rgba(255, 255, 255, 0.95);
    --tb-tactics-marker-stroke: rgba(0, 0, 0, 0.4);
    --tb-tactics-marker-selected-fill: rgba(41, 98, 255, 0.9);
    --tb-tactics-marker-selected-stroke: rgba(255, 255, 255, 0.9);
    --tb-tactics-marker-text: #333;
    --tb-tactics-touch-outline: rgba(46, 125, 50, 0.45);
    --tb-tactics-touch-inset: rgba(46, 125, 50, 0.36);
    --tb-tactics-touch-drop: rgba(33, 150, 243, 0.36);
    --tb-tactics-touch-transparent: rgba(46, 125, 50, 0);

    /* Typography */
    --tb-font-family: "TB Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --tb-font-size-xs: 12px;
    --tb-font-size-sm: 14px;
    --tb-font-size-md: 16px;
    --tb-font-size-base: var(--tb-font-size-md); /* alias for md, used in match-field */
    --tb-font-size-lg: 18px;
    --tb-font-size-xl: 24px;
    --tb-font-size-2xl: 36px;
    --tb-font-weight-medium: 500;
    --tb-font-weight-semibold: 600;
    --tb-font-weight-bold: 700;

    /* Line-height */
    --tb-line-height-dense: 1;       /* buttons, badges, icons */
    --tb-line-height-normal: 1.2;    /* headings, labels */
    --tb-line-height-comfortable: 1.4; /* content, readability */
    --tb-line-height-relaxed: 1.5;   /* body copy, paragraphs */

    /* Radius */
    --tb-radius-sm: 10px;
    --tb-radius-md: 12px;
    --tb-radius-lg: 16px;
    --tb-radius-round: 999px;
    --tb-radius-fab: 999px;

    /* Spacing */
    --tb-space-1: 4px;
    --tb-space-2: 8px;
    --tb-space-3: 12px;
    --tb-space-4: 16px;
    --tb-space-5: 20px;
    --tb-space-6: 24px;
    --tb-space-8: 32px;

    /* Shadows */
    --tb-shadow-sm: 0 1px 2px rgba(16, 24, 16, 0.06);
    --tb-shadow-md: 0 8px 20px rgba(24, 32, 24, 0.14);
    --tb-shadow-lg: 0 12px 34px rgba(24, 32, 24, 0.16);

    /* Sizing */
    --tb-touch-target: 44px;
    --tb-button-height-sm: 40px;
    --tb-button-height-md: 44px;
    --tb-button-height-lg: 48px;
    --tb-chip-height: 34px;
    --tb-fab-size: 56px;
    --tb-fab-size-compact: 48px;
    --tb-layout-max: 1220px;
    --tb-layout-max-auth: 520px;

    /* Legacy compatibility aliases for existing CSS */
    --primary: var(--tb-color-accent);
    --primary-hover: var(--tb-color-accent-hover);
    --primary-light: var(--tb-color-accent-soft);
    --primary-color: var(--tb-color-accent);
    --bg-body: var(--tb-color-bg);
    --bg-card: var(--tb-color-surface);
    --text-main: var(--tb-color-text);
    --text-muted: var(--tb-color-text-muted);
    --border-color: var(--tb-color-border);
    --spacing: var(--tb-space-4);
    --radius: var(--tb-radius-md);
    --shadow: var(--tb-shadow-sm);
    --font-family: var(--tb-font-family);
}