/* =========================================================
   Woospeak AI V15 — Design System Tokens
   Foundation layer: semantic variables only.
   No component should hard-code colors, radius, shadows or timings.
   ========================================================= */

:root,
#woospeak-ai-app{
  /* Theme identity */
  --ws-theme-current: dark;
  color-scheme: dark;

  /* Typography */
  --ws-font-sans: Inter, "Plus Jakarta Sans", Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --ws-font-weight-regular: 400;
  --ws-font-weight-medium: 600;
  --ws-font-weight-bold: 750;

  /* Spacing scale */
  --ws-space-1: 4px;
  --ws-space-2: 8px;
  --ws-space-3: 12px;
  --ws-space-4: 16px;
  --ws-space-5: 20px;
  --ws-space-6: 24px;
  --ws-space-8: 32px;
  --ws-space-10: 40px;
  --ws-space-12: 48px;

  /* Radius scale */
  --ws-radius-xs: 8px;
  --ws-radius-sm: 12px;
  --ws-radius-md: 16px;
  --ws-radius-lg: 22px;
  --ws-radius-xl: 28px;
  --ws-radius-pill: 999px;

  /* Motion */
  --ws-motion-fast: 160ms;
  --ws-motion-normal: 220ms;
  --ws-motion-slow: 320ms;
  --ws-ease-standard: cubic-bezier(.2,.8,.2,1);

  /* Dark theme semantic palette — V15 foundation keeps the current visual identity. */
  --ws-color-bg-page: #070a14;
  --ws-color-bg-page-2: #0a1020;
  --ws-color-surface: rgba(11,18,34,.78);
  --ws-color-surface-strong: rgba(12,20,38,.92);
  --ws-color-card: rgba(14,23,42,.82);
  --ws-color-card-soft: rgba(19,29,50,.74);
  --ws-color-field: rgba(16,26,46,.94);
  --ws-color-field-strong: rgba(22,34,57,.96);
  --ws-color-border: rgba(148,163,184,.20);
  --ws-color-border-strong: rgba(147,197,253,.34);
  --ws-color-text: #f8fbff;
  --ws-color-text-soft: rgba(226,232,240,.88);
  --ws-color-muted: rgba(203,213,225,.70);
  --ws-color-muted-2: rgba(148,163,184,.64);

  --ws-color-primary: #60a5fa;
  --ws-color-primary-strong: #2563eb;
  --ws-color-cyan: #22d3ee;
  --ws-color-violet: #8b5cf6;
  --ws-color-purple: #7c3aed;
  --ws-color-success: #34d399;
  --ws-color-warning: #fbbf24;
  --ws-color-danger: #fb7185;

  /* Gradients */
  --ws-gradient-primary: linear-gradient(135deg,var(--ws-color-primary-strong),var(--ws-color-purple));
  --ws-gradient-surface: radial-gradient(820px 270px at 8% 0%, rgba(59,130,246,.12), transparent 62%), linear-gradient(180deg, var(--ws-color-card), rgba(9,14,27,.82));
  --ws-gradient-field: linear-gradient(180deg,var(--ws-color-field-strong),var(--ws-color-field));
  --ws-gradient-page: radial-gradient(920px 540px at 14% -4%, rgba(37,99,235,.34), transparent 64%), radial-gradient(800px 560px at 84% 0%, rgba(124,58,237,.28), transparent 62%), radial-gradient(900px 620px at 50% 108%, rgba(14,165,233,.10), transparent 66%), linear-gradient(180deg,var(--ws-color-bg-page) 0%,var(--ws-color-bg-page-2) 46%,#060912 100%);

  /* Shadows and glow */
  --ws-shadow-sm: 0 10px 28px rgba(0,0,0,.20);
  --ws-shadow-md: 0 18px 54px rgba(0,0,0,.30);
  --ws-shadow-lg: 0 28px 90px rgba(0,0,0,.42);
  --ws-glow-blue: 0 0 34px rgba(96,165,250,.30);
  --ws-glow-violet: 0 0 42px rgba(124,58,237,.28);
  --ws-focus-ring: 0 0 0 4px rgba(96,165,250,.22);

  /* Legacy aliases kept during migration. New CSS must use semantic tokens above. */
  --ws-bg: var(--ws-color-bg-page);
  --ws-panel: var(--ws-color-surface);
  --ws-panel-strong: var(--ws-color-surface-strong);
  --ws-border: var(--ws-color-border);
  --ws-border-soft: rgba(148,163,184,.12);
  --ws-text: var(--ws-color-text);
  --ws-muted: var(--ws-color-muted);
  --ws-primary: var(--ws-color-primary-strong);
  --ws-primary-2: var(--ws-color-primary-strong);
  --ws-primary-3: var(--ws-color-primary);
  --ws-indigo: var(--ws-color-violet);
  --ws-success: var(--ws-color-success);
  --ws-warning: var(--ws-color-warning);
  --ws-danger: var(--ws-color-danger);

  --v3-bg: var(--ws-color-bg-page);
  --v3-bg-2: var(--ws-color-bg-page-2);
  --v3-panel: var(--ws-color-surface);
  --v3-panel-strong: var(--ws-color-surface-strong);
  --v3-card: var(--ws-color-card);
  --v3-card-soft: var(--ws-color-card-soft);
  --v3-field: var(--ws-color-field);
  --v3-field-2: var(--ws-color-field-strong);
  --v3-border: var(--ws-color-border);
  --v3-border-strong: var(--ws-color-border-strong);
  --v3-text: var(--ws-color-text);
  --v3-text-2: var(--ws-color-text-soft);
  --v3-muted: var(--ws-color-muted);
  --v3-muted-2: var(--ws-color-muted-2);
  --v3-blue: var(--ws-color-primary);
  --v3-blue-2: var(--ws-color-primary-strong);
  --v3-cyan: var(--ws-color-cyan);
  --v3-violet: var(--ws-color-violet);
  --v3-purple: var(--ws-color-purple);
  --v3-green: var(--ws-color-success);
  --v3-yellow: var(--ws-color-warning);
  --v3-red: var(--ws-color-danger);
  --v3-glow-blue: var(--ws-glow-blue);
  --v3-glow-violet: var(--ws-glow-violet);
  --v3-shadow: var(--ws-shadow-lg);
  --v3-shadow-soft: var(--ws-shadow-md);
  /* V15.0.7 CSS purge — centralized legacy literal colors. */
  --ws-legacy-amber-400: #fbbf24;
  --ws-legacy-amber-500: #f59e0b;
  --ws-legacy-amber-700: #b45309;
  --ws-legacy-amber-800: #92400e;
  --ws-legacy-black: #000000;
  --ws-legacy-black-soft: #111;
  --ws-legacy-blue-100: #dbeafe;
  --ws-legacy-blue-200: #bfdbfe;
  --ws-legacy-blue-300: #93c5fd;
  --ws-legacy-blue-400: #60a5fa;
  --ws-legacy-blue-50: #eff6ff;
  --ws-legacy-blue-500: #3b82f6;
  --ws-legacy-blue-600: #2563eb;
  --ws-legacy-blue-700: #1d4ed8;
  --ws-legacy-blue-800: #1e40af;
  --ws-legacy-blue-900: #1e3a8a;
  --ws-legacy-blue-brand-1: #2f5fe3;
  --ws-legacy-blue-brand-2: #1746a2;
  --ws-legacy-blue-tint-1: #eef6ff;
  --ws-legacy-blue-tint-2: #eaf2ff;
  --ws-legacy-blue-tint-3: #e7efff;
  --ws-legacy-blue-tint-4: #dfeaff;
  --ws-legacy-blue-tint-5: #eef4ff;
  --ws-legacy-blue-tint-6: #f6f8ff;
  --ws-legacy-blue-tint-7: #dbe4ff;
  --ws-legacy-cyan-400: #22d3ee;
  --ws-legacy-dark-690: #223047;
  --ws-legacy-dark-700: #20324d;
  --ws-legacy-dark-800: #182235;
  --ws-legacy-dark-820: #14213d;
  --ws-legacy-dark-830: #142033;
  --ws-legacy-dark-860: #0c1931;
  --ws-legacy-dark-870: #0a162c;
  --ws-legacy-dark-880: #0b172d;
  --ws-legacy-dark-900: #0b1220;
  --ws-legacy-dark-930: #0a1020;
  --ws-legacy-dark-940: #07111f;
  --ws-legacy-dark-950: #070a14;
  --ws-legacy-dark-980: #060912;
  --ws-legacy-gray-200: #e5e7eb;
  --ws-legacy-gray-500: #6b7280;
  --ws-legacy-green-100: #d1fae5;
  --ws-legacy-green-400: #4ade80;
  --ws-legacy-green-50: #ecfdf5;
  --ws-legacy-green-500: #22c55e;
  --ws-legacy-green-600: #16a34a;
  --ws-legacy-green-700: #15803d;
  --ws-legacy-green-800: #166534;
  --ws-legacy-hex-047857: #047857;
  --ws-legacy-hex-050b18: #050b18;
  --ws-legacy-hex-059669: #059669;
  --ws-legacy-hex-06101f: #06101f;
  --ws-legacy-hex-064e3b: #064e3b;
  --ws-legacy-hex-065f46: #065f46;
  --ws-legacy-hex-0b1428: #0b1428;
  --ws-legacy-hex-0f9f6e: #0f9f6e;
  --ws-legacy-hex-1e293b: #1e293b;
  --ws-legacy-hex-273548: #273548;
  --ws-legacy-hex-34d399: #34d399;
  --ws-legacy-hex-374151: #374151;
  --ws-legacy-hex-4f7cff: #4f7cff;
  --ws-legacy-hex-5f6f86: #5f6f86;
  --ws-legacy-hex-718096: #718096;
  --ws-legacy-hex-86efac: #86efac;
  --ws-legacy-hex-b9cae0: #b9cae0;
  --ws-legacy-hex-bbf7d0: #bbf7d0;
  --ws-legacy-hex-cdddff: #cdddff;
  --ws-legacy-hex-d6dfeb: #d6dfeb;
  --ws-legacy-hex-ddd6fe: #ddd6fe;
  --ws-legacy-hex-e0f2fe: #e0f2fe;
  --ws-legacy-hex-edf8f2: #edf8f2;
  --ws-legacy-hex-f5fcf8: #f5fcf8;
  --ws-legacy-hex-f6f8fb: #f6f8fb;
  --ws-legacy-hex-f7fbff: #f7fbff;
  --ws-legacy-hex-f8fbff: #f8fbff;
  --ws-legacy-hex-fbf4dc: #fbf4dc;
  --ws-legacy-hex-fbfdff: #fbfdff;
  --ws-legacy-hex-fdf1ef: #fdf1ef;
  --ws-legacy-hex-fffaf9: #fffaf9;
  --ws-legacy-hex-fffbeb: #fffbeb;
  --ws-legacy-hex-fffdf5: #fffdf5;
  --ws-legacy-indigo-400: #818cf8;
  --ws-legacy-indigo-500: #6366f1;
  --ws-legacy-indigo-600: #4f46e5;
  --ws-legacy-indigo-700: #4338ca;
  --ws-legacy-red-100: #fee2e2;
  --ws-legacy-red-200: #fecaca;
  --ws-legacy-red-400: #f87171;
  --ws-legacy-red-50: #fef2f2;
  --ws-legacy-red-500: #ef4444;
  --ws-legacy-red-600: #dc2626;
  --ws-legacy-red-700: #b91c1c;
  --ws-legacy-red-800: #991b1b;
  --ws-legacy-sky-500: #0ea5e9;
  --ws-legacy-slate-200: #e2e8f0;
  --ws-legacy-slate-300: #cbd5e1;
  --ws-legacy-slate-400: #94a3b8;
  --ws-legacy-slate-50: #f8fafc;
  --ws-legacy-slate-500: #64748b;
  --ws-legacy-slate-600: #475569;
  --ws-legacy-slate-700: #334155;
  --ws-legacy-slate-800: #1f2937;
  --ws-legacy-slate-850: #172033;
  --ws-legacy-slate-900: #111827;
  --ws-legacy-slate-950: #0f172a;
  --ws-legacy-soft-1: #eef4fb;
  --ws-legacy-soft-2: #f7f9fc;
  --ws-legacy-soft-3: #eef2f7;
  --ws-legacy-soft-border-1: #dbe3ef;
  --ws-legacy-violet-400: #a78bfa;
  --ws-legacy-violet-500: #8b5cf6;
  --ws-legacy-violet-600: #7c3aed;
  --ws-legacy-violet-700: #6d28d9;
  --ws-legacy-violet-800: #5b21b6;
  --ws-legacy-white: #ffffff;

}


/* =========================================================
   V15.0.7.9 — Theme engine
   Default remains dark. The root app carries data-theme="dark|light|auto".
   Auto follows the operating system preference without changing stored choice.
   ========================================================= */
#woospeak-ai-app[data-theme="dark"],
#woospeak-ai-app[data-theme="auto"]{
  --ws-theme-current: dark;
  color-scheme: dark;
}

#woospeak-ai-app[data-theme="light"]{
  --ws-theme-current: light;
  color-scheme: light;

  --ws-color-bg-page: #f6f8ff;
  --ws-color-bg-page-2: #eef4ff;
  --ws-color-surface: rgba(255,255,255,.86);
  --ws-color-surface-strong: rgba(255,255,255,.96);
  --ws-color-card: rgba(255,255,255,.92);
  --ws-color-card-soft: rgba(248,251,255,.92);
  --ws-color-field: rgba(255,255,255,.98);
  --ws-color-field-strong: rgba(248,251,255,.98);
  --ws-color-border: rgba(15,23,42,.14);
  --ws-color-border-strong: rgba(37,99,235,.34);
  --ws-color-text: #0f172a;
  --ws-color-text-soft: rgba(30,41,59,.90);
  --ws-color-muted: rgba(71,85,105,.78);
  --ws-color-muted-2: rgba(100,116,139,.70);

  --ws-gradient-surface: radial-gradient(820px 270px at 8% 0%, rgba(59,130,246,.10), transparent 62%), linear-gradient(180deg, var(--ws-color-card), rgba(248,251,255,.92));
  --ws-gradient-field: linear-gradient(180deg,var(--ws-color-field-strong),var(--ws-color-field));
  --ws-gradient-page: radial-gradient(920px 540px at 14% -4%, rgba(37,99,235,.14), transparent 64%), radial-gradient(800px 560px at 84% 0%, rgba(124,58,237,.12), transparent 62%), linear-gradient(180deg,var(--ws-color-bg-page) 0%,var(--ws-color-bg-page-2) 100%);

  --ws-shadow-sm: 0 10px 28px rgba(15,23,42,.08);
  --ws-shadow-md: 0 18px 54px rgba(15,23,42,.12);
  --ws-shadow-lg: 0 28px 90px rgba(15,23,42,.16);
  --ws-glow-blue: 0 0 30px rgba(37,99,235,.14);
  --ws-glow-violet: 0 0 34px rgba(124,58,237,.12);
  --ws-focus-ring: 0 0 0 4px rgba(37,99,235,.16);
}

@media (prefers-color-scheme: light){
  #woospeak-ai-app[data-theme="auto"]{
    --ws-theme-current: light;
    color-scheme: light;

    --ws-color-bg-page: #f6f8ff;
    --ws-color-bg-page-2: #eef4ff;
    --ws-color-surface: rgba(255,255,255,.86);
    --ws-color-surface-strong: rgba(255,255,255,.96);
    --ws-color-card: rgba(255,255,255,.92);
    --ws-color-card-soft: rgba(248,251,255,.92);
    --ws-color-field: rgba(255,255,255,.98);
    --ws-color-field-strong: rgba(248,251,255,.98);
    --ws-color-border: rgba(15,23,42,.14);
    --ws-color-border-strong: rgba(37,99,235,.34);
    --ws-color-text: #0f172a;
    --ws-color-text-soft: rgba(30,41,59,.90);
    --ws-color-muted: rgba(71,85,105,.78);
    --ws-color-muted-2: rgba(100,116,139,.70);

    --ws-gradient-surface: radial-gradient(820px 270px at 8% 0%, rgba(59,130,246,.10), transparent 62%), linear-gradient(180deg, var(--ws-color-card), rgba(248,251,255,.92));
    --ws-gradient-field: linear-gradient(180deg,var(--ws-color-field-strong),var(--ws-color-field));
    --ws-gradient-page: radial-gradient(920px 540px at 14% -4%, rgba(37,99,235,.14), transparent 64%), radial-gradient(800px 560px at 84% 0%, rgba(124,58,237,.12), transparent 62%), linear-gradient(180deg,var(--ws-color-bg-page) 0%,var(--ws-color-bg-page-2) 100%);

    --ws-shadow-sm: 0 10px 28px rgba(15,23,42,.08);
    --ws-shadow-md: 0 18px 54px rgba(15,23,42,.12);
    --ws-shadow-lg: 0 28px 90px rgba(15,23,42,.16);
    --ws-glow-blue: 0 0 30px rgba(37,99,235,.14);
    --ws-glow-violet: 0 0 34px rgba(124,58,237,.12);
    --ws-focus-ring: 0 0 0 4px rgba(37,99,235,.16);
  }
}

/* =========================================================
   V16.0.3 — Woospeak Design System / Premium color foundation
   Purpose: objective light-mode palette with strong contrast and fewer greys.
   Dark theme remains the reference. Light theme keeps the dark page stage but
   uses clean blue-white surfaces, not grey-on-grey blocks.
   ========================================================= */
#woospeak-ai-app{
  --wds-space-page: clamp(24px, 4vw, 56px);
  --wds-surface-0: var(--ws-color-bg-page);
  --wds-surface-1: var(--ws-color-surface);
  --wds-surface-2: var(--ws-color-card);
  --wds-surface-3: var(--ws-color-card-soft);
  --wds-text-1: var(--ws-color-text);
  --wds-text-2: var(--ws-color-text-soft);
  --wds-text-3: var(--ws-color-muted);
  --wds-line: var(--ws-color-border);
  --wds-line-strong: var(--ws-color-border-strong);
  --wds-accent: var(--ws-gradient-primary);
  --wds-shadow-card: var(--ws-shadow-md);
}

#woospeak-ai-app[data-theme="light"]{
  /* Accessible light palette: fewer greys, stronger text, cleaner hierarchy. */
  --wds-page-navy:#060b16;
  --wds-page-navy-2:#0b1224;
  --wds-snow:#fbfdff;
  --wds-ice:#f4f8ff;
  --wds-blue-ice:#edf5ff;
  --wds-blue-soft:#e5f0ff;
  --wds-field:#ffffff;
  --wds-text-ink:#111827;
  --wds-text-body:#243246;
  --wds-text-muted:#5f6f86;
  --wds-border:#d7e4f5;
  --wds-border-strong:#b7cdeb;
  --wds-divider:#dce8f7;
  --wds-blue:#2563eb;
  --wds-violet:#7c3aed;
  --wds-cyan:#22d3ee;

  --ws-color-bg-page:var(--wds-page-navy);
  --ws-color-bg-page-2:var(--wds-page-navy-2);
  --ws-color-surface:var(--wds-ice);
  --ws-color-surface-strong:var(--wds-snow);
  --ws-color-card:var(--wds-snow);
  --ws-color-card-soft:var(--wds-blue-ice);
  --ws-color-field:var(--wds-field);
  --ws-color-field-strong:var(--wds-field);
  --ws-color-border:var(--wds-border);
  --ws-color-border-strong:var(--wds-border-strong);
  --ws-color-text:var(--wds-text-ink);
  --ws-color-text-soft:var(--wds-text-body);
  --ws-color-muted:var(--wds-text-muted);
  --ws-color-muted-2:#7a8aa1;

  --ws-gradient-page:
    radial-gradient(920px 540px at 14% -4%, rgba(37,99,235,.34), transparent 64%),
    radial-gradient(800px 560px at 84% 0%, rgba(124,58,237,.26), transparent 62%),
    linear-gradient(180deg,#071021 0%,#0a1020 48%,#060912 100%);
  --ws-gradient-surface:
    radial-gradient(760px 260px at 10% 0%, rgba(37,99,235,.055), transparent 64%),
    linear-gradient(180deg,var(--wds-snow),var(--wds-blue-ice));
  --ws-gradient-field:linear-gradient(180deg,#ffffff,#f7faff);
  --ws-gradient-soft-section:linear-gradient(180deg,#f6f9ff,#edf5ff);
  --ws-gradient-primary:linear-gradient(135deg,var(--wds-blue),var(--wds-violet));

  --ws-shadow-sm:0 8px 18px rgba(15,23,42,.07);
  --ws-shadow-md:0 14px 34px rgba(15,23,42,.10);
  --ws-shadow-lg:0 22px 58px rgba(15,23,42,.14);
  --ws-focus-ring:0 0 0 4px rgba(37,99,235,.16);

  --wds-surface-0:var(--ws-color-bg-page);
  --wds-surface-1:var(--wds-snow);
  --wds-surface-2:var(--wds-ice);
  --wds-surface-3:var(--wds-blue-ice);
  --wds-text-1:var(--wds-text-ink);
  --wds-text-2:var(--wds-text-body);
  --wds-text-3:var(--wds-text-muted);
  --wds-line:var(--wds-border);
  --wds-line-strong:var(--wds-border-strong);
  --wds-shadow-card:var(--ws-shadow-md);
}


/* =========================================================
   V17.0.3 — THEME CONTRACT / CSS-ONLY ARCHITECTURE LOCK
   Rule: PHP/JS/HTML are identical. Dark is canonical. Light changes variables only.
   Component CSS must consume these semantic variables and must not branch on theme.
   ========================================================= */
#woospeak-ai-app{
  --ws-surface-canonical: var(--ws-color-card);
  --ws-surface-canonical-soft: var(--ws-color-card-soft);
  --ws-surface-canonical-strong: var(--ws-color-surface-strong);
  --ws-field-canonical: var(--ws-color-field);
  --ws-border-canonical: var(--ws-color-border);
  --ws-border-canonical-strong: var(--ws-color-border-strong);
  --ws-text-canonical: var(--ws-color-text);
  --ws-text-canonical-soft: var(--ws-color-text-soft);
  --ws-text-canonical-muted: var(--ws-color-muted);
  --ws-canonical-panel-bg: var(--ws-gradient-surface);
  --ws-canonical-field-bg: var(--ws-gradient-field);
  --ws-canonical-primary-bg: var(--ws-gradient-primary);
  --ws-canonical-success-bg: linear-gradient(180deg, rgba(16,185,129,.16), rgba(16,185,129,.08));
  --ws-canonical-danger-bg: linear-gradient(180deg, rgba(239,68,68,.16), rgba(239,68,68,.08));
}
#woospeak-ai-app[data-theme="light"]{
  /* V17.0.4 readability correction.
     Legacy "light" aliases must remain light surfaces, never text colors.
     Otherwise old rules such as background:var(--ws-legacy-hex-f8fbff) become dark text values
     and old dark panels using color:var(--ws-legacy-hex-f8fbff) become unreadable.
     Only legacy DARK aliases are remapped to light surfaces. */
  --ws-legacy-white:#ffffff;
  --ws-legacy-slate-50:#f8fafc;
  --ws-legacy-slate-100:#f1f5f9;
  --ws-legacy-slate-200:#e2e8f0;
  --ws-legacy-blue-tint-1:#eef6ff;
  --ws-legacy-blue-tint-2:#eaf2ff;
  --ws-legacy-blue-tint-3:#e7efff;
  --ws-legacy-hex-f8fbff:#f8fbff;
  --ws-legacy-hex-fbfdff:#fbfdff;
  --ws-legacy-hex-f7fbff:#f7fbff;
  --ws-legacy-soft-1:#eef4fb;
  --ws-legacy-soft-2:#f7f9fc;
  --ws-legacy-soft-3:#eef2f7;

  /* Legacy dark aliases are safe to convert into light surfaces. */
  --ws-legacy-dark-980:var(--ws-color-card-soft);
  --ws-legacy-dark-950:var(--ws-color-card-soft);
  --ws-legacy-dark-940:var(--ws-color-card-soft);
  --ws-legacy-dark-930:var(--ws-color-card-soft);
  --ws-legacy-dark-900:var(--ws-color-card);
  --ws-legacy-dark-880:var(--ws-color-card);
  --ws-legacy-dark-870:var(--ws-color-card);
  --ws-legacy-dark-860:var(--ws-color-card-soft);
  --ws-legacy-dark-830:var(--ws-color-field);
  --ws-legacy-dark-820:var(--ws-color-field);
  --ws-legacy-dark-800:var(--ws-color-field);
  --ws-legacy-dark-700:var(--ws-color-border);
  --ws-legacy-dark-690:var(--ws-color-border-strong);
}

/* =========================================================
   V17.0.20 — WDS 2.0 canonical controls tokens
   Purpose: Select / LoadingCard tokens. Components use these tokens only.
   ========================================================= */
#woospeak-ai-app{
  --wds-control-height: 38px;
  --wds-control-radius: var(--ws-radius-pill);
  --wds-control-bg: var(--ws-gradient-field);
  --wds-control-border: var(--ws-color-border);
  --wds-control-border-hover: var(--ws-color-border-strong);
  --wds-control-text: var(--ws-color-text);
  --wds-control-label: var(--ws-color-muted);
  --wds-control-caret: var(--ws-color-muted);
  --wds-control-shadow: var(--ws-shadow-sm);
  --wds-control-focus: var(--ws-focus-ring);

  --wds-loading-text: var(--ws-color-text-soft);
  --wds-loading-track: rgba(226,232,240,.24);
  --wds-loading-progress: var(--ws-gradient-primary);
}

#woospeak-ai-app[data-theme="light"]{
  --wds-control-height: 40px;
  --wds-control-bg: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  --wds-control-border: #d7e4f5;
  --wds-control-border-hover: #adc5e7;
  --wds-control-text: #111827;
  --wds-control-label: #344154;
  --wds-control-caret: #52627a;
  --wds-control-shadow: 0 8px 18px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.90);
  --wds-control-focus: 0 0 0 4px rgba(99,102,241,.16), 0 10px 24px rgba(15,23,42,.08);

  --wds-loading-text: #243246;
  --wds-loading-track: #dbe7f7;
  --wds-loading-progress: linear-gradient(135deg,#2563eb,#7c3aed);
}

@media (prefers-color-scheme: light){
  #woospeak-ai-app[data-theme="auto"]{
    --wds-control-height: 40px;
    --wds-control-bg: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    --wds-control-border: #d7e4f5;
    --wds-control-border-hover: #adc5e7;
    --wds-control-text: #111827;
    --wds-control-label: #344154;
    --wds-control-caret: #52627a;
    --wds-control-shadow: 0 8px 18px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.90);
    --wds-control-focus: 0 0 0 4px rgba(99,102,241,.16), 0 10px 24px rgba(15,23,42,.08);

    --wds-loading-text: #243246;
    --wds-loading-track: #dbe7f7;
    --wds-loading-progress: linear-gradient(135deg,#2563eb,#7c3aed);
  }
}