/* ============================================================
   PREM AI - DESIGN TOKENS
   The visual DNA of the widget. Change here, updates everywhere.
   ============================================================ */

:root {

  /* ---------- BRAND COLORS ---------- */
  --prem-primary:          #0F4C5C;   /* Deep teal - trust, calm */
  --prem-primary-dark:     #0A3844;   /* Hover / pressed */
  --prem-primary-light:    #1A6B7F;   /* Softer state */
  --prem-primary-soft:     #E6F0F3;   /* Light tint for backgrounds */

  --prem-accent:           #E36414;   /* Thai sunset orange - action */
  --prem-accent-dark:      #C2540E;   /* Hover */
  --prem-accent-light:     #FB8B24;   /* Highlight */
  --prem-accent-soft:      #FEF0E5;   /* Tint */

  --prem-success:          #06A77D;
  --prem-warning:          #F4A261;
  --prem-error:            #D62828;

  /* ---------- SURFACES ---------- */
  --prem-surface:          #FFFBF7;   /* Warm cream base */
  --prem-surface-2:        #F5EFE6;   /* Cards, bubbles */
  --prem-surface-3:        #EFE7DB;   /* Deeper accent */
  --prem-surface-inverse:  #1A1A1A;   /* Dark mode / overlays */

  /* ---------- TEXT ---------- */
  --prem-text:             #1A1A1A;
  --prem-text-muted:       #6B6B6B;
  --prem-text-inverse:     #FFFFFF;
  --prem-text-on-primary:  #FFFFFF;

  /* ---------- BORDERS ---------- */
  --prem-border:           #E5DED3;
  --prem-border-strong:    #CFC4B3;
  --prem-border-focus:     #0F4C5C;

  /* ---------- SHADOWS ---------- */
  --prem-shadow-sm:  0 1px 2px rgba(15, 76, 92, 0.06);
  --prem-shadow-md:  0 4px 12px rgba(15, 76, 92, 0.10);
  --prem-shadow-lg:  0 12px 32px rgba(15, 76, 92, 0.16);
  --prem-shadow-xl:  0 24px 48px rgba(15, 76, 92, 0.20);

  /* ---------- RADII ---------- */
  --prem-radius-sm:   8px;
  --prem-radius-md:   12px;
  --prem-radius-lg:   16px;
  --prem-radius-xl:   24px;
  --prem-radius-pill: 999px;

  /* ---------- SPACING (8px grid) ---------- */
  --prem-space-1:  4px;
  --prem-space-2:  8px;
  --prem-space-3:  12px;
  --prem-space-4:  16px;
  --prem-space-5:  20px;
  --prem-space-6:  24px;
  --prem-space-8:  32px;
  --prem-space-10: 40px;
  --prem-space-12: 48px;

  /* ---------- TYPOGRAPHY ---------- */
  --prem-font: 'Inter', 'Noto Sans', 'Noto Sans Thai', 'Noto Sans Arabic',
               'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --prem-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --prem-fs-xs:   11px;
  --prem-fs-sm:   13px;
  --prem-fs-base: 15px;
  --prem-fs-md:   16px;
  --prem-fs-lg:   18px;
  --prem-fs-xl:   22px;
  --prem-fs-2xl:  28px;

  --prem-lh-tight: 1.25;
  --prem-lh-base:  1.55;
  --prem-lh-loose: 1.75;

  --prem-fw-regular: 400;
  --prem-fw-medium:  500;
  --prem-fw-semibold: 600;
  --prem-fw-bold:    700;

  /* ---------- MOTION ---------- */
  --prem-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --prem-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --prem-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --prem-duration-fast: 150ms;
  --prem-duration-base: 220ms;
  --prem-duration-slow: 320ms;

  /* ---------- Z-INDEX ---------- */
  --prem-z-widget: 999999;
  --prem-z-overlay: 999998;

  /* ---------- LAYOUT ---------- */
  --prem-widget-width:  380px;
  --prem-widget-height: 600px;
  --prem-header-h:      72px;
  --prem-footer-h:      76px;
}

/* ============================================================
   DARK MODE (opt-in via [data-prem-theme="dark"] on :root)
   ============================================================ */
[data-prem-theme="dark"] {
  --prem-surface:         #0F1416;
  --prem-surface-2:       #1A2024;
  --prem-surface-3:       #242B30;
  --prem-text:            #F0EDE8;
  --prem-text-muted:      #9AA3A8;
  --prem-border:          #2E3538;
  --prem-border-strong:   #3D4448;
  --prem-primary-soft:    #0E2A32;
  --prem-accent-soft:     #2E1C0F;
}

/* ============================================================
   RTL SUPPORT (Arabic, Hebrew)
   ============================================================ */
[dir="rtl"] {
  --prem-rtl: 1;
}

/* ============================================================
   REDUCED MOTION (accessibility)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --prem-duration-fast: 0ms;
    --prem-duration-base: 0ms;
    --prem-duration-slow: 0ms;
  }
}