/**
 * ToqiSmart Unified Design Tokens (v5.5)
 * Official 4-Theme Matrix:
 * - 2 Warm Luxury Themes: Obsidian Gold (Dark) & Alpine Gold (Light)
 * - 2 Cool Minimalist Themes: Titanium Slate (Dark) & Alpine Slate (Light)
 */

/* ============================================================
   THEME 1: OBSIDIAN GOLD (Default / Warm Espresso Charcoal & Amber Gold)
   ============================================================ */
:root,
[data-theme="obsidian-gold"] {
    --theme-name: "obsidian-gold";

    --gold-50: #fbf9f4;
    --gold-100: #f7f2e8;
    --gold-200: #efe4cc;
    --gold-300: #e3cb9c;
    --gold-400: #d7b165;
    --gold-500: #c6942f;
    --gold-600: #a57b27;
    --gold-700: #886620;
    --gold-800: #70531a;
    --gold-900: #533e13;
    --gold-950: #291f0a;

    --primary: #d6a84f;
    --primary-light: var(--gold-400);
    --primary-glow: rgba(198, 148, 47, 0.28);
    --primary-contrast: var(--gold-950);
    --secondary: var(--gold-600);
    --secondary-glow: rgba(168, 121, 44, 0.25);
    --success: #34d399;
    --success-glow: rgba(52, 211, 153, 0.2);
    --warning: #f59e0b;
    --danger: #f87171;
    --danger-muted: rgba(248, 113, 113, 0.14);

    --color-info: #8aa7b8;
    --color-info-muted: rgba(138, 167, 184, 0.14);
    --color-purple: #c084fc;
    --color-purple-muted: rgba(192, 132, 252, 0.14);
    --color-purple-text: #e9d5ff;
    --color-emerald-text: #a7f3d0;

    /* Base Warm Espresso Charcoal (Leve e Confortável) */
    --bg: #211914;
    --bg-dark: #17110e;
    --surface: #2a211b;
    --surface-card: #34281f;
    --surface-header: rgba(42, 33, 27, 0.96);
    --surface-overlay: rgba(214, 168, 79, 0.05);
    --surface-hover: rgba(214, 168, 79, 0.10);
    --surface-active: rgba(214, 168, 79, 0.16);

    --border: rgba(194, 149, 67, 0.30);
    --border-hover: rgba(241, 199, 107, 0.55);

    --text: var(--gold-50);
    --text-main: var(--gold-50);
    --text-muted: var(--gold-200);
    --text-subtle: var(--gold-300);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 6px 24px rgba(0, 0, 0, 0.40);
    --shadow-drawer: -10px 0 40px rgba(0, 0, 0, 0.65);
    --glow-primary: 0 0 24px rgba(214, 168, 79, 0.35);
    --glow-accent: drop-shadow(0 2px 10px rgba(214, 168, 79, 0.6));

    --ambient-grad-1: rgba(214, 168, 79, 0.07);
    --ambient-grad-2: rgba(168, 121, 44, 0.05);
    --theme-color: #211914;
}

/* ============================================================
   THEME 2: ALPINE GOLD (Light Mode Gourmet / Warm Cashmere & Royal Gold)
   ============================================================ */
[data-theme="alpine-gold"] {
    --theme-name: "alpine-gold";

    --gold-50: #fbf8f3;
    --gold-100: #f8f2e8;
    --gold-200: #f0e2cb;
    --gold-300: #e5c89a;
    --gold-400: #dbac61;
    --gold-500: #cb8d2a;
    --gold-600: #a97623;
    --gold-700: #8c611d;
    --gold-800: #724f17;
    --gold-900: #553b11;
    --gold-950: #2a1d09;

    /* Brand source is #9A6B1F (500–600). Action/text uses 700 so ivory/cream pairs clear 4.5:1. */
    --primary: var(--gold-700);
    --primary-light: var(--gold-400);
    --primary-glow: rgba(169, 118, 35, 0.20);
    --primary-contrast: var(--gold-50);
    --secondary: var(--gold-800);
    --secondary-glow: rgba(118, 80, 29, 0.15);
    --success: #047857;
    --success-glow: rgba(5, 150, 105, 0.15);
    --warning: #92400e;
    --danger: #b91c1c;
    --danger-muted: rgba(220, 38, 38, 0.10);

    --color-info: #466f82;
    --color-info-muted: rgba(70, 111, 130, 0.10);
    --color-purple: #7c3aed;
    --color-purple-muted: rgba(124, 58, 237, 0.10);
    --color-purple-text: #5b21b6;
    --color-emerald-text: #065f46;

    /* Base Warm Cashmere / Stone 50 */
    --bg: #f3ede4;
    --bg-dark: #e7ddcf;
    --surface: #fbf7f0;
    --surface-card: #f6efe4;
    --surface-header: rgba(251, 247, 240, 0.96);
    --surface-overlay: rgba(154, 107, 31, 0.03);
    --surface-hover: rgba(154, 107, 31, 0.06);
    --surface-active: rgba(154, 107, 31, 0.10);

    --border: #d9cdbd;
    --border-hover: rgba(154, 107, 31, 0.45);

    --text: var(--gold-950);
    --text-main: var(--gold-950);
    --text-muted: var(--gold-800);
    --text-subtle: var(--gold-700);

    --shadow-sm: 0 1px 3px rgba(68, 64, 60, 0.08);
    --shadow-card: 0 4px 20px rgba(68, 64, 60, 0.07), 0 1px 3px rgba(68, 64, 60, 0.04);
    --shadow-drawer: -10px 0 40px rgba(68, 64, 60, 0.15);
    --glow-primary: 0 0 16px rgba(154, 107, 31, 0.22);
    --glow-accent: drop-shadow(0 2px 8px rgba(154, 107, 31, 0.35));

    --ambient-grad-1: rgba(154, 107, 31, 0.04);
    --ambient-grad-2: rgba(118, 80, 29, 0.03);
    --theme-color: #f3ede4;
}

/* ============================================================
   THEME 3: TITANIUM SLATE (Dark Pro Minimalist / Neutral Graphite & Laser Indigo)
   ============================================================ */
[data-theme="titanium-slate"] {
    --theme-name: "titanium-slate";

    --slate-50: #f6f7f9;
    --slate-100: #edeff2;
    --slate-200: #d8dde4;
    --slate-300: #b3bdcc;
    --slate-400: #8a9ab2;
    --slate-500: #5f7595;
    --slate-600: #50627c;
    --slate-700: #425067;
    --slate-800: #364254;
    --slate-900: #28313e;
    --slate-950: #14181f;

    --primary: #91a4be;
    --primary-light: var(--slate-300);
    --primary-glow: rgba(95, 117, 149, 0.28);
    --primary-contrast: var(--slate-950);
    --secondary: var(--slate-600);
    --secondary-glow: rgba(99, 118, 149, 0.2);
    --success: #10b981;
    --success-glow: rgba(16, 185, 129, 0.2);
    --warning: #f59e0b;
    --danger: #f87171;
    --danger-muted: rgba(239, 68, 68, 0.12);

    --color-info: #8aa7b8;
    --color-info-muted: rgba(138, 167, 184, 0.12);
    --color-purple: #8b5cf6;
    --color-purple-muted: rgba(139, 92, 246, 0.12);
    --color-purple-text: #c4b5fd;
    --color-emerald-text: #6ee7b7;

    /* Base Titânio Neutro Grafite */
    --bg: #1b1f24;
    --bg-dark: #12161a;
    --surface: #252a30;
    --surface-card: #2d333a;
    --surface-header: rgba(37, 42, 48, 0.96);
    --surface-overlay: rgba(135, 152, 178, 0.04);
    --surface-hover: rgba(135, 152, 178, 0.08);
    --surface-active: rgba(135, 152, 178, 0.14);

    --border: rgba(164, 177, 194, 0.24);
    --border-hover: rgba(135, 152, 178, 0.50);

    --text: var(--slate-50);
    --text-main: var(--slate-50);
    --text-muted: var(--slate-300);
    --text-subtle: var(--slate-400);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 6px 24px rgba(0, 0, 0, 0.45);
    --shadow-drawer: -10px 0 40px rgba(0, 0, 0, 0.65);
    --glow-primary: 0 0 24px rgba(135, 152, 178, 0.32);
    --glow-accent: drop-shadow(0 2px 8px rgba(135, 152, 178, 0.5));

    --ambient-grad-1: rgba(135, 152, 178, 0.06);
    --ambient-grad-2: rgba(99, 118, 149, 0.04);
    --theme-color: #1b1f24;
}

/* ============================================================
   THEME 4: ALPINE SLATE (Light Mode Minimalist Pro / Crisp Slate 50 & Deep Indigo)
   ============================================================ */
[data-theme="alpine-slate"] {
    --theme-name: "alpine-slate";

    --indigo-50: #f5f7fa;
    --indigo-100: #ebeef4;
    --indigo-200: #d3dbe8;
    --indigo-300: #aab9d5;
    --indigo-400: #7b95c1;
    --indigo-500: #4c6ea9;
    --indigo-600: #3f5c8d;
    --indigo-700: #344c74;
    --indigo-800: #2b3e5f;
    --indigo-900: #202e46;
    --indigo-950: #101723;

    --primary: #344b73;
    --primary-light: var(--indigo-400);
    --primary-glow: rgba(63, 92, 141, 0.20);
    --primary-contrast: var(--indigo-50);
    --secondary: var(--indigo-700);
    --secondary-glow: rgba(73, 99, 131, 0.15);
    --success: #047857;
    --success-glow: rgba(5, 150, 105, 0.15);
    --warning: #92400e;
    --danger: #b91c1c;
    --danger-muted: rgba(220, 38, 38, 0.10);

    --color-info: #466f82;
    --color-info-muted: rgba(70, 111, 130, 0.10);
    --color-purple: #7c3aed;
    --color-purple-muted: rgba(124, 58, 237, 0.10);
    --color-purple-text: #5b21b6;
    --color-emerald-text: #065f46;

    /* Base Crisp Slate 50 (Apple Light / Linear Pro) */
    --bg: #eef1f3;
    --bg-dark: #e1e6ea;
    --surface: #f8fafb;
    --surface-card: #f1f4f6;
    --surface-header: rgba(248, 250, 251, 0.96);
    --surface-overlay: rgba(52, 75, 115, 0.03);
    --surface-hover: rgba(52, 75, 115, 0.06);
    --surface-active: rgba(52, 75, 115, 0.10);

    --border: #d1d9df;
    --border-hover: rgba(52, 75, 115, 0.45);

    --text: var(--indigo-950);
    --text-main: var(--indigo-950);
    --text-muted: var(--indigo-800);
    --text-subtle: var(--indigo-700);

    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-card: 0 4px 20px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-drawer: -10px 0 40px rgba(15, 23, 42, 0.15);
    --glow-primary: 0 0 16px rgba(52, 75, 115, 0.22);
    --glow-accent: drop-shadow(0 2px 8px rgba(52, 75, 115, 0.35));

    --ambient-grad-1: rgba(52, 75, 115, 0.04);
    --ambient-grad-2: rgba(73, 99, 131, 0.03);
    --theme-color: #eef1f3;
}

/* ============================================================
    SEMANTIC ALIASES & SHARED SCALES (Inherits from active theme)
   ============================================================ */
:root {
    --bg-base: var(--bg);
    --surface-border: var(--border);
    --surface-border-hover: var(--border-hover);
    --accent-info: var(--color-info);
    --accent-info-muted: var(--color-info-muted);
    --accent-amber: var(--secondary);
    --accent-amber-muted: var(--secondary-glow);
    --accent-emerald: var(--success);
    --accent-emerald-muted: var(--success-glow);
    --accent-danger: var(--danger);
    --accent-danger-muted: var(--danger-muted);
    --theme-color: var(--bg);

    /* Integration and data semantics shared by Admin surfaces */
    --integration-whatsapp: #25d366;
    --integration-whatsapp-dark: #005c4b;
    --integration-whatsapp-read: #53bdeb;
    --integration-whatsapp-muted: #8696a0;
    --integration-whatsapp-text: #e9edef;
    --surface-preview: var(--bg-dark);
    --surface-preview-card: var(--surface-card);
    --data-purple: var(--color-purple);
    --data-purple-text: var(--color-purple-text);
    --overlay-surface: rgba(255, 255, 255, 0.04);
    --overlay-scrim: rgba(0, 0, 0, 0.10);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --shadow-soft: rgba(0, 0, 0, 0.30);
    --integration-whatsapp-text-muted: rgba(233, 237, 239, 0.60);

    /* Systematic shadow token system */
    --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.40);
    --shadow-3: 0 8px 32px rgba(0, 0, 0, 0.45);
    --shadow-primary: 0 0 24px rgba(214, 168, 79, 0.35);
    --shadow-success: 0 0 24px rgba(52, 211, 153, 0.3);
    --shadow-danger: 0 0 24px rgba(248, 113, 113, 0.3);

    /* Border width token system */
    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-width-3: 3px;
    --border-width: var(--border-width-1);

    /* Typography Scale */
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-text: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --text-2xs: 0.6875rem;
    /* 11px */
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.8125rem;
    /* 13px */
    --text-base: 0.875rem;
    /* 14px */
    --text-md: 0.9375rem;
    /* 15px */
    --text-lg: 1rem;
    /* 16px */
    --text-xl: 1.0625rem;
    /* 17px */
    --text-2xl: 1.25rem;
    /* 20px */
    --text-3xl: 1.5rem;
    /* 24px */
    --text-4xl: 1.875rem;
    /* 30px */

    /* Radius Scale */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 24px;
    --radius-pill: 9999px;
    --radius: var(--radius-lg);

    /* Layout & Touch Constants */
    --sidebar-w: 272px;
    --sidebar-collapsed-w: 68px;
    --header-h: 68px;
    --container-max-w: 1280px;
    --touch-target-min: 44px;
    --border-focus: var(--primary);
    --focus-ring: 0 0 0 2px var(--primary-glow);
}

/*
 * PWA/Android chrome is always dark (Titanium #1B1F24 + color-scheme: dark).
 * Native widgets (select popup, scrollbars, date inputs) follow the theme.
 */
[data-theme="obsidian-gold"],
[data-theme="titanium-slate"] {
    color-scheme: dark;
}

[data-theme="alpine-gold"],
[data-theme="alpine-slate"],
[data-theme="alpine-gold"] body,
[data-theme="alpine-slate"] body {
    color-scheme: light;
}