/**
 * TheraBee web — design tokens + system dark mode (aligned with desktop Tauri styles.css).
 * Loaded before inline rules in base.html.twig.
 */
:root {
  color-scheme: light dark;

  --tb-body-bg: #ffffff;
  --tb-main-bg: #ffffff;
  --tb-chrome-bg: #f3f1e8;
  --tb-surface: #ffffff;
  --tb-border: #e5e2dc;
  --tb-text: #333333;
  --tb-text-soft: #555555;
  --tb-text-muted: #969696;
  --tb-text-faint: #777777;
  --tb-text-dark: #444444;

  --tb-control-bg: #faf9f5;
  --tb-control-bg-hover: #f1eee6;
  --tb-control-border: #ded9cf;
  --tb-control-border-hover: #cec7ba;

  --tb-primary: #b17b7e;
  --tb-primary-hover: #a15e61;
  --tb-on-primary: #ffffff;

  --tb-accent-warm: #ffbd59;
  --tb-orange-btn: #ffbc57;
  --tb-orange-btn-text: #6b4200;
  --tb-orange-btn-hover-bg: #f3ad40;
  --tb-orange-btn-hover-text: #5a3900;
  --tb-orange-btn-border: #f3d59a;
  --tb-orange-btn-border-hover: #ebc67d;

  --tb-hr: #f5f4f0;
  --tb-sidebar-row: #ece8dd;
  --tb-badge-pill-bg: #f5f4f0;
  --tb-search-bg: #f9f9f7;

  --tb-dropdown-hover-text: #cc7a00;
  --tb-dropdown-hover-bg: #faead1;
  --tb-danger: #dc2626;
  --tb-danger-soft: #aa6e72;

  --tb-user-info-bg: #f9fafb;
  --tb-shadow-card: 0 10px 25px rgba(0, 0, 0, 0.08);
  --tb-shadow-drawer: 4px 0 24px rgba(0, 0, 0, 0.08);
  --tb-shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.2);
  --tb-shadow-float: 0 8px 20px rgba(0, 0, 0, 0.08);
  --tb-shadow-input: 0 1px 3px rgba(0, 0, 0, 0.1);
  --tb-backdrop: rgba(0, 0, 0, 0.35);
  --tb-border-mid: #dddddd;

  --tb-login-page-bg: #fcfbf9;
  --tb-login-heading: #2c5f6f;
  --tb-login-teal-border: #51859d;
  --tb-login-teal-focus: #3d6b7d;
  --tb-login-muted: #7a6f6a;
  --tb-login-signup-border: #e0e0e0;
  --tb-teal-link: #2c5f6f;

  --tb-accent-ring: #ffbc5733;

  --tb-alert-danger-bg: #fef2f2;
  --tb-alert-danger-border: #fecaca;
  --tb-alert-danger-text: #dc2626;
  --tb-alert-success-bg: #f0fdf4;
  --tb-alert-success-border: #bbf7d0;
  --tb-alert-success-text: #16a34a;
  --tb-alert-warning-bg: #fffbeb;
  --tb-alert-warning-border: #fde68a;
  --tb-alert-warning-text: #92400e;

  --tb-badge-admin-bg: #fef3c7;
  --tb-badge-admin-text: #d97706;
  --tb-badge-user-bg: #dbeafe;
  --tb-badge-user-text: #2563eb;

  --tb-status-success-bg: #e0f5ed;
  --tb-status-success-text: #2eb885;
  --tb-status-warn-bg: #fff5e6;
  --tb-status-warn-text: #ffa000;
  --tb-status-error-bg: #ffebee;
  --tb-status-error-text: #c62828;
  --tb-status-ready-bg: #faead1;
  --tb-status-ready-text: #cc7a00;

  --tb-muted-gray: #6b7280;
  --tb-toggle-icon: #7a7467;
  --tb-subtle-border: #ddd8cf;
  --tb-subtle-bg: #f8f7f3;
  --tb-subtle-bg2: #f3f1ed;
  --tb-subtle-bg3: #edeae3;
  --tb-subtle-bg4: #fffdfa;
  --tb-warm-tint: #fffaf3;
  --tb-warm-tint2: #fff8ee;
  --tb-warm-tint3: #fff5e7;
  --tb-warm-tint4: #fff3e0;
  --tb-warm-border: #f2d4a5;
  --tb-warm-shadow: #f0e2c6;
  --tb-amber-deep: #a1671a;
  --tb-red-deep: #b91c1c;
  --tb-fee-bg: #fee2e2;
  --tb-neutral-border: #e5e5e5;
  --tb-info-tint: #e0f0f4;
  --tb-accent-wash: #ffbc571a;
  --tb-rose-soft: #aa6e72;

  /* Recording modal: “app required” hint (aligned with alert warning tokens) */
  --tb-recording-hint-bg: var(--tb-alert-warning-bg);
  --tb-recording-hint-border: var(--tb-alert-warning-border);
  --tb-recording-hint-text: var(--tb-alert-warning-text);

  --tb-nav-link-hover-bg: rgba(255, 255, 255, 0.2);
  --tb-primary-focus-ring: rgba(177, 123, 126, 0.15);
  --tb-primary-focus-ring-tight: rgba(177, 123, 126, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tb-body-bg: #14121a;
    --tb-main-bg: #14121a;
    --tb-chrome-bg: #171425;
    --tb-surface: #191726;
    --tb-border: rgba(255, 255, 255, 0.12);
    --tb-text: #eaeaea;
    --tb-text-soft: #c8c8c8;
    --tb-text-muted: #a0a0a0;
    --tb-text-faint: #8a8a8a;
    --tb-text-dark: #d0d0d0;

    --tb-control-bg: #252032;
    --tb-control-bg-hover: #2e2a40;
    --tb-control-border: rgba(255, 255, 255, 0.18);
    --tb-control-border-hover: rgba(255, 255, 255, 0.28);

    --tb-primary: #c99396;
    --tb-primary-hover: #d4a8ab;
    --tb-on-primary: #ffffff;

    --tb-accent-warm: #e8a040;
    --tb-orange-btn: #b8893a;
    --tb-orange-btn-text: #f5e6c8;
    --tb-orange-btn-hover-bg: #c99745;
    --tb-orange-btn-hover-text: #fff8ec;
    --tb-orange-btn-border: rgba(232, 160, 64, 0.35);
    --tb-orange-btn-border-hover: rgba(243, 180, 90, 0.5);

    --tb-hr: rgba(255, 255, 255, 0.1);
    --tb-sidebar-row: #2a2638;
    --tb-badge-pill-bg: #2d2838;
    --tb-search-bg: #1f1c28;

    --tb-dropdown-hover-text: #f3a64a;
    --tb-dropdown-hover-bg: rgba(243, 166, 74, 0.14);
    --tb-danger: #f87171;
    --tb-danger-soft: #e8a0a3;

    --tb-user-info-bg: #1f1c28;
    --tb-shadow-card: 0 10px 28px rgba(0, 0, 0, 0.45);
    --tb-shadow-drawer: 4px 0 32px rgba(0, 0, 0, 0.5);
    --tb-shadow-modal: 0 12px 48px rgba(0, 0, 0, 0.55);
    --tb-shadow-float: 0 8px 24px rgba(0, 0, 0, 0.35);
    --tb-shadow-input: 0 1px 3px rgba(0, 0, 0, 0.35);
    --tb-backdrop: rgba(0, 0, 0, 0.6);
    --tb-border-mid: rgba(255, 255, 255, 0.2);

    --tb-login-page-bg: #14121a;
    --tb-login-heading: #8ec9d4;
    --tb-login-teal-border: #5a8a9a;
    --tb-login-teal-focus: #7eb8c8;
    --tb-login-muted: #a89f98;
    --tb-login-signup-border: rgba(255, 255, 255, 0.15);
    --tb-teal-link: #8ec9d4;

    --tb-accent-ring: rgba(243, 166, 74, 0.35);

    --tb-alert-danger-bg: #2d1a1c;
    --tb-alert-danger-border: #7f1d1d;
    --tb-alert-danger-text: #fca5a5;
    --tb-alert-success-bg: #14291e;
    --tb-alert-success-border: #166534;
    --tb-alert-success-text: #4ade80;
    --tb-alert-warning-bg: #2d2714;
    --tb-alert-warning-border: #a16207;
    --tb-alert-warning-text: #fcd34d;

    --tb-badge-admin-bg: #422006;
    --tb-badge-admin-text: #fcd34d;
    --tb-badge-user-bg: #1e3a5f;
    --tb-badge-user-text: #93c5fd;

    --tb-status-success-bg: #1a3328;
    --tb-status-success-text: #5ee9b5;
    --tb-status-warn-bg: #3d3514;
    --tb-status-warn-text: #fcd34d;
    --tb-status-error-bg: #3d1818;
    --tb-status-error-text: #fca5a5;
    --tb-status-ready-bg: #3d3018;
    --tb-status-ready-text: #f3a64a;

    --tb-muted-gray: #9ca3af;
    --tb-toggle-icon: #b8b0a8;
    --tb-subtle-border: rgba(255, 255, 255, 0.12);
    --tb-subtle-bg: #1c1a24;
    --tb-subtle-bg2: #22202c;
    --tb-subtle-bg3: #252032;
    --tb-subtle-bg4: #1a1822;
    --tb-warm-tint: #2a2418;
    --tb-warm-tint2: #2d261a;
    --tb-warm-tint3: #30291c;
    --tb-warm-tint4: #332c1e;
    --tb-warm-border: #5c4a28;
    --tb-warm-shadow: #4a3d22;
    --tb-amber-deep: #fbbf24;
    --tb-red-deep: #f87171;
    --tb-fee-bg: #450a0a;
    --tb-neutral-border: rgba(255, 255, 255, 0.12);
    --tb-info-tint: #1a2d32;
    --tb-accent-wash: rgba(243, 166, 74, 0.12);
    --tb-rose-soft: #d4a8ab;

    --tb-recording-hint-bg: var(--tb-alert-warning-bg);
    --tb-recording-hint-border: var(--tb-alert-warning-border);
    --tb-recording-hint-text: var(--tb-alert-warning-text);

    --tb-nav-link-hover-bg: rgba(255, 255, 255, 0.08);
    --tb-primary-focus-ring: rgba(201, 147, 150, 0.35);
    --tb-primary-focus-ring-tight: rgba(201, 147, 150, 0.3);
  }
}