/* ==========================================================================
   特拉拉市集 · 站內傳訊 Design Tokens
   --------------------------------------------------------------------------
   ALL custom properties are scoped to .tllm-root to avoid WordPress theme
   pollution. Mount your widget inside <div class="tllm-root"> ... </div>.

   Theme: cool blue-gray on white, with strong frosted glass surfaces sitting
          above soft color blobs.
   ========================================================================== */

.tllm-root {
  /* ---- Surfaces ---- */
  --tllm-bg:            #F4F6FB;            /* page background behind glass */
  --tllm-surface:       #FFFFFF;            /* solid card */
  --tllm-surface-2:     #F8FAFC;            /* subtle alt surface */
  --tllm-surface-3:     #EEF2F7;            /* hover / pressed */

  /* ---- Glass (frosted) ---- */
  --tllm-glass:         rgba(255, 255, 255, 0.55);    /* lighter glass */
  --tllm-glass-strong:  rgba(255, 255, 255, 0.72);    /* content-heavy glass */
  --tllm-glass-edge:    rgba(255, 255, 255, 0.92);    /* inner top highlight */
  --tllm-glass-border:  rgba(255, 255, 255, 0.65);    /* visible white edge */
  --tllm-glass-border-2:rgba(15, 23, 42, 0.06);       /* subtle dark edge */
  --tllm-blur:          32px;                          /* default blur radius (tweakable) */
  --tllm-blur-sat:      180%;                          /* saturation boost */

  /* ---- Modal backdrop ---- */
  --tllm-scrim:         rgba(15, 23, 42, 0.32);

  /* ---- Brand ---- */
  --tllm-brand:         #0F4C81;            /* Tesla deep blue (unified) */
  --tllm-brand-hover:   #0B3C67;            /* darker than base for hover */
  --tllm-brand-pressed: #093052;            /* darker still for pressed */
  --tllm-brand-soft:    #DBEAFE;
  --tllm-brand-tint:    rgba(15, 76, 129, 0.08);
  --tllm-brand-ring:    rgba(15, 76, 129, 0.28);

  /* ---- Logo-derived accent (taken from teslala-market logo red cart) ---- */
  --tllm-accent-red:    #E63946;            /* logo red, used sparingly */
  --tllm-ink-navy:      #0E2C4A;            /* logo navy */

  /* ---- Status ---- */
  --tllm-success:       #10B981;
  --tllm-success-soft:  #D1FAE5;
  --tllm-warning:       #F59E0B;
  --tllm-warning-soft:  #FEF3C7;
  --tllm-danger:        #EF4444;
  --tllm-danger-soft:   #FEE2E2;
  --tllm-info:          #06B6D4;

  /* ---- Text ---- */
  --tllm-ink:           #0F172A;
  --tllm-ink-2:         #334155;
  --tllm-ink-3:         #64748B;
  --tllm-ink-4:         #94A3B8;
  --tllm-ink-on-brand:  #FFFFFF;
  --tllm-divider:       rgba(15, 23, 42, 0.08);
  --tllm-divider-2:     rgba(15, 23, 42, 0.04);

  /* ---- Background blobs (the soft colors the glass refracts) ---- */
  --tllm-blob-blue:     #BFDBFE;
  --tllm-blob-cyan:     #A5F3FC;
  --tllm-blob-violet:   #DDD6FE;
  --tllm-blob-rose:     #FBCFE8;
  --tllm-blob-mint:     #BBF7D0;
  --tllm-blob-peach:    #FED7AA;

  /* ---- Typography ---- */
  --tllm-font-zh:    "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --tllm-font-en:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tllm-font-num:   "Inter", "SF Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Typography — floor lifted to 15px per usability feedback (v1.5.85).
     Scale matches the main plugin's 1.5.67 type scale so chat reads
     consistently with the rest of the marketplace. */
  --tllm-fs-display: 36px;     /* hero headline */
  --tllm-fs-h1:      28px;     /* modal titles */
  --tllm-fs-h2:      22px;     /* section heads */
  --tllm-fs-h3:      19px;     /* list item names */
  --tllm-fs-body:    17px;     /* chat bubble, prose */
  --tllm-fs-sm:      16px;     /* metadata, secondary */
  --tllm-fs-xs:      15px;     /* chips, badges, timestamps — new floor */

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

  --tllm-lh-tight:    1.25;
  --tllm-lh-snug:     1.4;
  --tllm-lh-normal:   1.55;

  /* ---- Spacing scale (4px base) ---- */
  --tllm-sp-1:  4px;
  --tllm-sp-2:  8px;
  --tllm-sp-3:  12px;
  --tllm-sp-4:  16px;
  --tllm-sp-5:  20px;
  --tllm-sp-6:  24px;
  --tllm-sp-7:  32px;
  --tllm-sp-8:  40px;
  --tllm-sp-9:  48px;
  --tllm-sp-10: 64px;

  /* ---- Radius ---- */
  --tllm-r-xs:    6px;
  --tllm-r-sm:    10px;
  --tllm-r-md:    14px;
  --tllm-r-lg:    20px;
  --tllm-r-xl:    28px;
  --tllm-r-pill:  999px;

  /* ---- Shadows ---- */
  --tllm-shadow-card:     0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.05);
  --tllm-shadow-raised:   0 4px 12px rgba(15,23,42,.06), 0 12px 32px rgba(15,23,42,.08);
  --tllm-shadow-modal:    0 4px 12px rgba(15,23,42,.08), 0 24px 64px rgba(15,23,42,.18);
  --tllm-shadow-glass:    inset 0 1px 0 rgba(255,255,255,.9),
                          inset 0 -1px 0 rgba(15,23,42,.04),
                          0 8px 32px rgba(15,23,42,.10);
  --tllm-shadow-glass-lg: inset 0 1px 0 rgba(255,255,255,.95),
                          inset 0 -1px 0 rgba(15,23,42,.05),
                          0 12px 40px rgba(15,23,42,.14),
                          0 32px 80px rgba(15,23,42,.18);

  --tllm-ring-focus:     0 0 0 3px var(--tllm-brand-ring);

  /* ---- Motion ---- */
  --tllm-dur-fast: 140ms;
  --tllm-dur-base: 220ms;
  --tllm-dur-slow: 320ms;
  --tllm-ease:     cubic-bezier(.2, .7, .2, 1);

  /* ---- Z-stack (relative inside .tllm-root only) ---- */
  --tllm-z-base:    1;
  --tllm-z-sticky:  100;
  --tllm-z-scrim:   1000;
  --tllm-z-modal:   1010;
  --tllm-z-popover: 1020;
  --tllm-z-toast:   1030;
}