/* =============================================================================
   TRILOCK PLATFORM — Shared Design Tokens
   =============================================================================
   Single source of truth for all visual tokens across V2 and Portal.
   Loaded BEFORE project-specific CSS in both apps.

   Copyrighted(c) by TriLock, LLC 2026
   ============================================================================= */

/* =============================================================================
   BASE TOKENS — Default Theme (Navy Blue / Cyan)
   ============================================================================= */

:root, [data-theme="theme-default"] {
    /* Font family */
    --font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

    /* Brand */
    --color-brand: #00d4ff;
    --color-brand-hover: #00b8e0;
    --color-brand-highlight: #33ddff;
    --color-on-brand: #ffffff;

    /* Surfaces */
    --color-bg-body: #1a1a2e;
    --color-bg-surface: #16213e;
    --color-bg-sidebar: #0f1a2e;
    --color-bg-sidebar-hover: rgba(255,255,255,0.08);
    --color-bg-sidebar-active: rgba(0,212,255,0.15);
    --color-bg-header: #0f3460;
    --color-bg-card: #1e2a4a;
    --color-bg-input: #0f3460;

    /* Text */
    --color-text: #e8e8e8;
    --color-text-secondary: #a0a0a0;
    --color-text-muted: #666666;
    --color-text-sidebar: #c8d6e5;
    --color-text-sidebar-active: #ffffff;
    --color-text-topbar: #e8e8e8;

    /* Borders */
    --color-border: #2a3f5f;
    --color-border-light: #2a3f5f;
    --color-border-sidebar: rgba(255,255,255,0.1);

    /* Buttons */
    --color-link: #00d4ff;
    --color-btn-bg: #0f3460;
    --color-btn-text: #00d4ff;
    --color-btn-hover: #1a4a7a;

    /* Status */
    --color-danger: #ff4444;
    --color-success: #00cc66;
    --color-warning: #ffaa00;
    --color-info: #00d4ff;

    /* Subtle status backgrounds */
    --color-bg-danger-subtle: rgba(220,53,69,0.08);
    --color-bg-success-subtle: rgba(40,167,69,0.12);
    --color-bg-warning-subtle: rgba(255,193,7,0.12);
    --color-bg-info-subtle: rgba(0,212,255,0.08);

    /* Role colors */
    --color-role-super: #ff4444;
    --color-role-master: #2563eb;
    --color-role-user: #666666;

    /* Report classification */
    --color-cls-human: #27ae60;
    --color-cls-bot: #f39c12;
    --color-cls-crawler: #e74c3c;

    /* Message bubbles */
    --color-bg-bubble-out: rgba(0, 212, 255, 0.12);
    --color-border-bubble-out: rgba(0, 212, 255, 0.2);
    --color-bg-email-in: #e8d5f5;
    --color-border-email-in: #d0b8e6;
    --color-bg-email-out: #d5e0f5;
    --color-border-email-out: #b8cce6;
    --color-email-link: #7c3aed;

    /* Contact states */
    --color-bg-orphan: #f0e8b0;
    --color-text-orphan: #8b0000;
    --color-bg-deleted: #fff0f0;

    /* Confirmation bars */
    --color-bg-confirm: #fff3cd;
    --color-text-confirm: #856404;

    /* Security badges */
    --color-security-bg: #8B6914;
    --color-security-text: #FFD700;
    --color-security-border: #DAA520;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-xl: 0 8px 32px rgba(0,0,0,0.5);
    --shadow-focus: 0 0 0 3px rgba(0,212,255,0.25);

    /* Overlays */
    --color-overlay: rgba(0,0,0,0.5);
    --color-overlay-light: rgba(0,0,0,0.3);
    --color-overlay-heavy: rgba(0,0,0,0.7);
    --color-white: #ffffff;
    --color-black: #000000;
    --color-secondary: #6c757d;

    /* Radii */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-2xl: 12px;
    --radius-pill: 10px;
    --radius-circle: 50%;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 30px;
    --space-4xl: 40px;

    /* Icon sizes */
    --icon-xs: 12px;
    --icon-sm: 14px;
    --icon-md: 16px;
    --icon-lg: 20px;
    --icon-xl: 24px;
    --icon-2xl: 32px;

    /* Transitions */
    --transition-fast: 0.15s;
    --transition-normal: 0.2s;
    --transition-slow: 0.3s;

    /* Layout */
    --layout-sidebar-width: 260px;
    --layout-topbar-height: 52px;
    --layout-rail-width: 48px;
    --layout-transition-speed: 0.25s;

    /* Icon rail (Portal only — default navy theme) */
    --color-bg-rail: #0a1628;

    /* Zone font sizing — scaled by [data-font-scale] attribute */
    --font-topbar: 14px;
    --font-sidebar: 13px;
    --font-sidebar-header: 11px;
    --font-content: 14px;
    --font-content-sm: 12px;
    --font-heading: 20px;
    --font-heading-sm: 16px;
    --font-table: 13px;
    --font-table-header: 12px;
    --font-input: 14px;
    --font-button: 13px;
    --font-badge: 11px;
    --font-tiny: 10px;
    --font-app-tile: 13px;
    --font-app-tile-icon: 32px;
    --font-msg: 14px;
}

/* =============================================================================
   V2 DARK THEME (YouTube/Discord inspired neutral dark)
   ============================================================================= */

[data-theme="theme-dark"] {
    --font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --color-brand: #3ea6ff;
    --color-brand-hover: #65b8ff;
    --color-brand-highlight: #5dade2;

    --color-bg-body: #0f0f0f;
    --color-bg-surface: #1a1a1a;
    --color-bg-sidebar: #0d1117;
    --color-bg-sidebar-hover: rgba(255,255,255,0.06);
    --color-bg-sidebar-active: rgba(255,255,255,0.12);
    --color-bg-header: #161616;
    --color-bg-rail: #0a0a0a;
    --color-bg-card: #1e1e1e;
    --color-bg-input: #252525;

    --color-text: #f1f1f1;
    --color-text-secondary: #aaaaaa;
    --color-text-muted: #717171;
    --color-text-sidebar: #8b949e;
    --color-text-sidebar-active: #f0f6fc;
    --color-text-topbar: #e0e0e0;

    --color-border: #303030;
    --color-border-light: #383838;
    --color-border-sidebar: rgba(255,255,255,0.06);

    --color-btn-bg: #272727;
    --color-btn-text: #3ea6ff;
    --color-btn-hover: #3a3a3a;

    --color-danger: #ff4444;
    --color-success: #2ea043;
    --color-warning: #e3b341;
    --color-link: #3ea6ff;
    --color-info: #3ea6ff;

    --color-bg-danger-subtle: rgba(220,53,69,0.10);
    --color-bg-success-subtle: rgba(46,160,67,0.15);
    --color-bg-warning-subtle: rgba(227,179,65,0.12);
    --color-bg-info-subtle: rgba(62,166,255,0.10);

    --color-role-super: #ff4444;
    --color-role-master: #3ea6ff;
    --color-role-user: #717171;

    --color-bg-bubble-out: #263850;
    --color-border-bubble-out: #2d4a6a;
    --color-bg-email-in: #352840;
    --color-border-email-in: #4a3560;
    --color-bg-email-out: #283548;
    --color-border-email-out: #354868;
    --color-email-link: #a78bfa;

    --color-bg-orphan: #4a4a20;
    --color-text-orphan: #ff6b6b;
    --color-bg-deleted: #3a2020;

    --color-bg-confirm: #3d3200;
    --color-text-confirm: #ffc107;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
    --shadow-xl: 0 8px 32px rgba(0,0,0,0.6);
    --shadow-focus: 0 0 0 3px rgba(62,166,255,0.25);
}

/* =============================================================================
   V2 LIGHT THEME (Outlook White — clean white/gray, MS blue accent)
   ============================================================================= */

[data-theme="theme-light"] {
    --font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

    /* Brand */
    --color-brand: #0078d4;
    --color-brand-hover: #106ebe;
    --color-brand-highlight: #4ba0e0;
    --color-on-brand: #ffffff;

    /* Surfaces (clean white/gray, blue header) */
    --color-bg-body: #f5f5f5;
    --color-bg-surface: #ffffff;
    --color-bg-sidebar: #f0f0f0;
    --color-bg-sidebar-hover: rgba(0,120,212,0.08);
    --color-bg-sidebar-active: rgba(0,120,212,0.15);
    --color-bg-header: #0063B1;
    --color-bg-rail: #e8e8e8;
    --color-bg-card: #ffffff;
    --color-bg-input: #f0f0f0;

    /* Text (high contrast, topbar white on blue header) */
    --color-text: #242424;
    --color-text-secondary: #484644;
    --color-text-muted: #707070;
    --color-text-sidebar: #242424;
    --color-text-sidebar-active: #0078d4;
    --color-text-topbar: #ffffff;
    --color-topbar-brand: #ffffff;

    /* Borders */
    --color-border: #d0d0d0;
    --color-border-light: #e0e0e0;
    --color-border-sidebar: rgba(0,0,0,0.1);

    /* Buttons */
    --color-link: #0078d4;
    --color-btn-bg: #f0f0f0;
    --color-btn-text: #0078d4;
    --color-btn-hover: #e0e0e0;

    /* Status */
    --color-danger: #d13438;
    --color-success: #107c10;
    --color-warning: #ca5010;
    --color-info: #0078d4;

    /* Subtle status backgrounds */
    --color-bg-danger-subtle: rgba(209,52,56,0.08);
    --color-bg-success-subtle: rgba(16,124,16,0.08);
    --color-bg-warning-subtle: rgba(202,80,16,0.08);
    --color-bg-info-subtle: rgba(0,120,212,0.08);

    /* Role colors */
    --color-role-super: #d13438;
    --color-role-master: #0078d4;
    --color-role-user: #707070;

    /* Report classification */
    --color-cls-human: #107c10;
    --color-cls-bot: #ca5010;
    --color-cls-crawler: #d13438;

    /* Message bubbles */
    --color-bg-bubble-out: rgba(0,120,212,0.08);
    --color-border-bubble-out: rgba(0,120,212,0.2);
    --color-bg-email-in: #f3e9f9;
    --color-border-email-in: #d0b8e6;
    --color-bg-email-out: #e9f0f9;
    --color-border-email-out: #b8cce6;
    --color-email-link: #5c2d91;

    /* Contact states */
    --color-bg-orphan: #fff3cd;
    --color-text-orphan: #856404;
    --color-bg-deleted: #f8d7da;

    /* Confirmation bars */
    --color-bg-confirm: #fff3cd;
    --color-text-confirm: #856404;

    /* Security badges */
    --color-security-bg: #fff3cd;
    --color-security-text: #856404;
    --color-security-border: #ffeeba;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.15);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.2);
    --shadow-xl: 0 8px 32px rgba(0,0,0,0.25);
    --shadow-focus: 0 0 0 3px rgba(0,120,212,0.25);

    /* Overlays */
    --color-overlay: rgba(0,0,0,0.5);
    --color-overlay-light: rgba(0,0,0,0.3);
    --color-overlay-heavy: rgba(0,0,0,0.7);
    --color-white: #ffffff;
    --color-black: #000000;
    --color-secondary: #6c757d;
}

/* =============================================================================
   V2 OUTLOOK DARK THEME (Microsoft Outlook Dark Mode inspired)
   ============================================================================= */

[data-theme="theme-outlook-light"] {
    --font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

    /* Brand — Microsoft blue */
    --color-brand: #0078d4;
    --color-brand-hover: #1a86d9;
    --color-brand-highlight: #4ba0e0;
    --color-on-brand: #ffffff;

    /* Surfaces — Outlook dark palette with pitch black header */
    --color-bg-body: #1f1f1f;
    --color-bg-surface: #292929;
    --color-bg-sidebar: #1f1f1f;
    --color-bg-sidebar-hover: rgba(255,255,255,0.06);
    --color-bg-sidebar-active: rgba(0,120,212,0.20);
    --color-bg-header: #141414;
    --color-bg-rail: #141414;
    --color-bg-card: #292929;
    --color-bg-input: #333333;

    /* Text — light on dark (topbar white on black header) */
    --color-text: #f3f3f3;
    --color-text-secondary: #c8c8c8;
    --color-text-muted: #8a8a8a;
    --color-text-sidebar: #d0d0d0;
    --color-text-sidebar-active: #ffffff;
    --color-text-topbar: #ffffff;
    --color-topbar-brand: #ffffff;

    /* Borders */
    --color-border: #3d3d3d;
    --color-border-light: #333333;
    --color-border-sidebar: rgba(255,255,255,0.08);

    /* Buttons */
    --color-link: #4ba0e0;
    --color-btn-bg: #333333;
    --color-btn-text: #4ba0e0;
    --color-btn-hover: #3d3d3d;

    /* Status */
    --color-danger: #f85149;
    --color-success: #3fb950;
    --color-warning: #d29922;
    --color-info: #4ba0e0;

    /* Subtle status backgrounds */
    --color-bg-danger-subtle: rgba(248,81,73,0.12);
    --color-bg-success-subtle: rgba(63,185,80,0.12);
    --color-bg-warning-subtle: rgba(210,153,34,0.12);
    --color-bg-info-subtle: rgba(0,120,212,0.12);

    /* Role colors */
    --color-role-super: #f85149;
    --color-role-master: #4ba0e0;
    --color-role-user: #8a8a8a;

    /* Report classification */
    --color-cls-human: #3fb950;
    --color-cls-bot: #d29922;
    --color-cls-crawler: #f85149;

    /* Message bubbles */
    --color-bg-bubble-out: rgba(0,120,212,0.18);
    --color-border-bubble-out: rgba(0,120,212,0.30);
    --color-bg-email-in: #352840;
    --color-border-email-in: #4a3560;
    --color-bg-email-out: #283548;
    --color-border-email-out: #354868;
    --color-email-link: #a78bfa;

    /* Contact states */
    --color-bg-orphan: #4a4a20;
    --color-text-orphan: #ff6b6b;
    --color-bg-deleted: #3a2020;

    /* Confirmation bars */
    --color-bg-confirm: #3d3200;
    --color-text-confirm: #ffc107;

    /* Security badges */
    --color-security-bg: #3d3200;
    --color-security-text: #ffc107;
    --color-security-border: #665200;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.45);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.55);
    --shadow-xl: 0 8px 32px rgba(0,0,0,0.65);
    --shadow-focus: 0 0 0 3px rgba(0,120,212,0.30);

    /* Overlays */
    --color-overlay: rgba(0,0,0,0.55);
    --color-overlay-light: rgba(0,0,0,0.35);
    --color-overlay-heavy: rgba(0,0,0,0.75);
    --color-white: #ffffff;
    --color-black: #000000;
    --color-secondary: #8a8a8a;
}

/* =============================================================================
   PORTAL DARK THEME (Neutral dark)
   ============================================================================= */

[data-theme="dark"] {
    color-scheme: dark;

    --color-bg-body: #121212;
    --color-bg-surface: #1e1e1e;
    --color-bg-sidebar: #0d1117;
    --color-bg-sidebar-hover: rgba(255,255,255,0.06);
    --color-bg-sidebar-active: rgba(255,255,255,0.12);
    --color-bg-header: #1e1e1e;
    --color-bg-rail: #0a0a0a;
    --color-bg-card: #252525;
    --color-bg-input: #2a2a2a;

    --color-text: #e0e0e0;
    --color-text-secondary: #a0a0a0;
    --color-text-muted: #666666;
    --color-text-sidebar: #8b949e;
    --color-text-sidebar-active: #f0f6fc;
    --color-text-topbar: #e0e0e0;

    --color-border: #333333;
    --color-border-light: #2a2a2a;
    --color-border-sidebar: rgba(255,255,255,0.06);

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
    --shadow-xl: 0 8px 32px rgba(0,0,0,0.6);
    --shadow-focus: 0 0 0 3px rgba(46,134,193,0.25);

    --color-brand: #2e86c1;
    --color-brand-hover: #3498db;
    --color-brand-highlight: #5dade2;

    --color-bg-danger-subtle: rgba(220,53,69,0.10);
    --color-bg-success-subtle: rgba(0,204,102,0.12);
    --color-bg-warning-subtle: rgba(255,170,0,0.12);
    --color-bg-info-subtle: rgba(46,134,193,0.10);
}

/* =============================================================================
   PORTAL LIGHT THEME (Outlook White — clean white/gray, MS blue accent)
   ============================================================================= */

[data-theme="light"] {
    color-scheme: light;

    /* Brand */
    --color-brand: #0078d4;
    --color-brand-hover: #106ebe;
    --color-brand-highlight: #4ba0e0;
    --color-on-brand: #ffffff;

    /* Surfaces (clean white/gray, blue header) */
    --color-bg-body: #f5f5f5;
    --color-bg-surface: #ffffff;
    --color-bg-sidebar: #f0f0f0;
    --color-bg-sidebar-hover: rgba(0,120,212,0.08);
    --color-bg-sidebar-active: rgba(0,120,212,0.15);
    --color-bg-header: #0063B1;
    --color-bg-rail: #e8e8e8;
    --color-bg-card: #ffffff;
    --color-bg-input: #f0f0f0;

    /* Text (high contrast, topbar white on blue header) */
    --color-text: #242424;
    --color-text-secondary: #484644;
    --color-text-muted: #707070;
    --color-text-sidebar: #242424;
    --color-text-sidebar-active: #0078d4;
    --color-text-topbar: #ffffff;
    --color-topbar-brand: #ffffff;

    /* Borders */
    --color-border: #d0d0d0;
    --color-border-light: #e0e0e0;
    --color-border-sidebar: rgba(0,0,0,0.1);

    /* Buttons */
    --color-link: #0078d4;
    --color-btn-bg: #f0f0f0;
    --color-btn-text: #0078d4;
    --color-btn-hover: #e0e0e0;

    /* Status */
    --color-danger: #d13438;
    --color-success: #107c10;
    --color-warning: #ca5010;
    --color-info: #0078d4;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.15);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.2);
    --shadow-xl: 0 8px 32px rgba(0,0,0,0.25);
    --shadow-focus: 0 0 0 3px rgba(0,120,212,0.25);

    /* Subtle status backgrounds */
    --color-bg-danger-subtle: rgba(209,52,56,0.08);
    --color-bg-success-subtle: rgba(16,124,16,0.08);
    --color-bg-warning-subtle: rgba(202,80,16,0.08);
    --color-bg-info-subtle: rgba(0,120,212,0.08);
}

/* =============================================================================
   PORTAL OUTLOOK DARK THEME (Microsoft Outlook Dark Mode inspired)
   ============================================================================= */

[data-theme="outlook-light"] {
    color-scheme: dark;

    /* Brand — Microsoft blue */
    --color-brand: #0078d4;
    --color-brand-hover: #1a86d9;
    --color-brand-highlight: #4ba0e0;
    --color-on-brand: #ffffff;

    /* Surfaces — Outlook dark palette with pitch black header */
    --color-bg-body: #1f1f1f;
    --color-bg-surface: #292929;
    --color-bg-sidebar: #1f1f1f;
    --color-bg-sidebar-hover: rgba(255,255,255,0.06);
    --color-bg-sidebar-active: rgba(0,120,212,0.20);
    --color-bg-header: #141414;
    --color-bg-rail: #141414;
    --color-bg-card: #292929;
    --color-bg-input: #333333;

    /* Text — light on dark (topbar white on black header) */
    --color-text: #f3f3f3;
    --color-text-secondary: #c8c8c8;
    --color-text-muted: #8a8a8a;
    --color-text-sidebar: #d0d0d0;
    --color-text-sidebar-active: #ffffff;
    --color-text-topbar: #ffffff;
    --color-topbar-brand: #ffffff;

    /* Borders */
    --color-border: #3d3d3d;
    --color-border-light: #333333;
    --color-border-sidebar: rgba(255,255,255,0.08);

    /* Buttons */
    --color-link: #4ba0e0;
    --color-btn-bg: #333333;
    --color-btn-text: #4ba0e0;
    --color-btn-hover: #3d3d3d;

    /* Status */
    --color-danger: #f85149;
    --color-success: #3fb950;
    --color-warning: #d29922;
    --color-info: #4ba0e0;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.45);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.55);
    --shadow-xl: 0 8px 32px rgba(0,0,0,0.65);
    --shadow-focus: 0 0 0 3px rgba(0,120,212,0.30);

    /* Subtle status backgrounds */
    --color-bg-danger-subtle: rgba(248,81,73,0.12);
    --color-bg-success-subtle: rgba(63,185,80,0.12);
    --color-bg-warning-subtle: rgba(210,153,34,0.12);
    --color-bg-info-subtle: rgba(0,120,212,0.12);
}

/* =============================================================================
   FONT SCALE SYSTEM — data-font-scale (0-7)
   Scale 0 = base (no attribute). Scales 1-7 progressively increase zone vars.
   ============================================================================= */

[data-font-scale="1"] { --font-topbar:15px; --font-sidebar:14px; --font-sidebar-header:12px; --font-content:15px; --font-content-sm:13px; --font-heading:21px; --font-heading-sm:17px; --font-table:14px; --font-table-header:13px; --font-input:15px; --font-button:14px; --font-badge:12px; --font-tiny:11px; --font-app-tile:14px; }
[data-font-scale="2"] { --font-topbar:16px; --font-sidebar:15px; --font-sidebar-header:13px; --font-content:16px; --font-content-sm:14px; --font-heading:22px; --font-heading-sm:18px; --font-table:15px; --font-table-header:14px; --font-input:16px; --font-button:15px; --font-badge:13px; --font-tiny:12px; --font-app-tile:15px; }
[data-font-scale="3"] { --font-topbar:17px; --font-sidebar:16px; --font-sidebar-header:14px; --font-content:17px; --font-content-sm:15px; --font-heading:23px; --font-heading-sm:19px; --font-table:16px; --font-table-header:15px; --font-input:17px; --font-button:16px; --font-badge:14px; --font-tiny:13px; --font-app-tile:16px; }
[data-font-scale="4"] { --font-topbar:18px; --font-sidebar:17px; --font-sidebar-header:15px; --font-content:18px; --font-content-sm:16px; --font-heading:24px; --font-heading-sm:20px; --font-table:17px; --font-table-header:16px; --font-input:18px; --font-button:17px; --font-badge:15px; --font-tiny:14px; --font-app-tile:17px; }
[data-font-scale="5"] { --font-topbar:19px; --font-sidebar:18px; --font-sidebar-header:16px; --font-content:19px; --font-content-sm:17px; --font-heading:26px; --font-heading-sm:21px; --font-table:18px; --font-table-header:17px; --font-input:19px; --font-button:18px; --font-badge:16px; --font-tiny:15px; --font-app-tile:18px; }
[data-font-scale="6"] { --font-topbar:20px; --font-sidebar:19px; --font-sidebar-header:17px; --font-content:20px; --font-content-sm:18px; --font-heading:28px; --font-heading-sm:22px; --font-table:19px; --font-table-header:18px; --font-input:20px; --font-button:19px; --font-badge:17px; --font-tiny:16px; --font-app-tile:19px; }
[data-font-scale="7"] { --font-topbar:22px; --font-sidebar:20px; --font-sidebar-header:18px; --font-content:22px; --font-content-sm:20px; --font-heading:30px; --font-heading-sm:24px; --font-table:20px; --font-table-header:19px; --font-input:22px; --font-button:20px; --font-badge:18px; --font-tiny:17px; --font-app-tile:20px; }

/* =============================================================================
   MESSAGE FONT SCALE — data-msg-scale (0-7)
   Independent control for message bubble text. Overrides --font-msg from base.
   ============================================================================= */

[data-msg-scale="1"] { --font-msg: 15px; }
[data-msg-scale="2"] { --font-msg: 16px; }
[data-msg-scale="3"] { --font-msg: 18px; }
[data-msg-scale="4"] { --font-msg: 20px; }
[data-msg-scale="5"] { --font-msg: 22px; }
[data-msg-scale="6"] { --font-msg: 24px; }
[data-msg-scale="7"] { --font-msg: 28px; }

/* =============================================================================
   ICON SIZE UTILITY CLASSES
   ============================================================================= */

.icon-xs  { width: var(--icon-xs);  height: var(--icon-xs);  }
.icon-sm  { width: var(--icon-sm);  height: var(--icon-sm);  }
.icon-md  { width: var(--icon-md);  height: var(--icon-md);  }
.icon-lg  { width: var(--icon-lg);  height: var(--icon-lg);  }
.icon-xl  { width: var(--icon-xl);  height: var(--icon-xl);  }
.icon-2xl { width: var(--icon-2xl); height: var(--icon-2xl); }

/* =============================================================================
   UNIFIED BUTTON SYSTEM
   Base .tl-btn + variants. Page-prefixed buttons (.cc-btn, .tk-btn, etc.)
   remain in project CSS but inherit token values.
   ============================================================================= */

.tl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-button);
    font-weight: 500;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-btn-bg);
    color: var(--color-btn-text);
    cursor: pointer;
    transition: background var(--transition-normal);
    text-decoration: none;
    white-space: nowrap;
}
.tl-btn:hover:not(:disabled) { background: var(--color-btn-hover); }
.tl-btn:active:not(:disabled) { transform: scale(0.98); }
.tl-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.tl-btn-primary { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-brand); }
.tl-btn-primary:hover:not(:disabled) { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }

.tl-btn-secondary { background: var(--color-bg-card); border-color: var(--color-border); color: var(--color-text); }
.tl-btn-secondary:hover:not(:disabled) { border-color: var(--color-brand); }

.tl-btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-white); }
.tl-btn-danger:hover:not(:disabled) { opacity: 0.85; }

.tl-btn-success { background: var(--color-success); border-color: var(--color-success); color: var(--color-white); }
.tl-btn-success:hover:not(:disabled) { opacity: 0.85; }

.tl-btn-ghost { background: none; border-color: transparent; color: var(--color-text-secondary); }
.tl-btn-ghost:hover:not(:disabled) { background: var(--color-btn-hover); color: var(--color-text); }

.tl-btn-link { background: none; border: none; color: var(--color-brand); padding: var(--space-xs); cursor: pointer; text-decoration: underline; font-size: var(--font-button); }
.tl-btn-link:hover:not(:disabled) { opacity: 0.8; }

.tl-btn-sm { padding: var(--space-xs) var(--space-md); font-size: var(--font-badge); border-radius: var(--radius-md); }
.tl-btn-lg { padding: var(--space-md) var(--space-2xl); font-size: var(--font-content); }

.tl-btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    transition: background var(--transition-fast);
}
.tl-btn-icon:hover:not(:disabled) { background: var(--color-btn-hover); color: var(--color-text); }
.tl-btn-icon:disabled { opacity: 0.3; cursor: default; }