/* ==========================================================================
   Niwa Chatbot – Design Tokens
   ---------------------------------------------------------------------------
   Central source of truth for ALL visual values.
   Components MUST use these variables – never hardcode colors, sizes, etc.

   Default values here match the LIGHT theme.
   Theme overrides live in niwa-theme-light.css / niwa-theme-dark.css.

   TOKEN NAMING:  --niwa-{category}-{property}-{variant}
   CATEGORIES:    color, space, font, radius, shadow, transition, layout
   ========================================================================== */

:root {

  /* ── Brand Colors ─────────────────────────────────────────────────────── */
  /* --niwa-color-primary defined in theme files (light/dark) */
  --niwa-color-primary-active:      #1B4227;
  --niwa-color-primary-subtle:      #E8F0EB;
  --niwa-color-accent:              #D4A853;
  --niwa-color-accent-hover:        #C49A45;

  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --niwa-color-surface-base:        #F8F7F4;
  --niwa-color-surface-raised:      #FFFFFF;
  --niwa-color-surface-overlay:     rgba(0, 0, 0, 0.06);
  --niwa-color-surface-sunken:      #F0EDE6;

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --niwa-color-text-primary:        #1A1A1A;
  --niwa-color-text-secondary:      #6B7280;
  --niwa-color-text-tertiary:       #9CA3AF;
  --niwa-color-text-inverse:        #FFFFFF;
  --niwa-color-text-link:           #2D5A3D;

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --niwa-color-border-default:      #E5E7EB;
  --niwa-color-border-subtle:       #F0F0F0;
  --niwa-color-border-focus:        #2D5A3D;

  /* ── Feedback ─────────────────────────────────────────────────────────── */
  --niwa-color-success:             #16A34A;
  --niwa-color-warning:             #F59E0B;
  --niwa-color-error:               #DC2626;
  --niwa-color-info:                #2563EB;

  /* ── Message Bubbles ──────────────────────────────────────────────────── */
  --niwa-color-bubble-bot:          #F0EDE6;
  --niwa-color-bubble-bot-text:     #1A1A1A;
  --niwa-color-bubble-user:         #2D5A3D;
  --niwa-color-bubble-user-text:    #FFFFFF;

  /* ── Spacing Scale ────────────────────────────────────────────────────── */
  --niwa-space-xs:    4px;
  --niwa-space-sm:    8px;
  --niwa-space-md:    12px;
  --niwa-space-lg:    16px;
  --niwa-space-xl:    24px;
  --niwa-space-2xl:   32px;
  --niwa-space-3xl:   48px;

  /* ── Typography ───────────────────────────────────────────────────────── */
  --niwa-font-family:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --niwa-font-size-xs:          11px;
  --niwa-font-size-sm:          13px;
  --niwa-font-size-md:          14px;
  --niwa-font-size-lg:          16px;
  --niwa-font-size-xl:          18px;
  --niwa-font-size-2xl:         22px;
  --niwa-font-weight-normal:    400;
  --niwa-font-weight-medium:    500;
  --niwa-font-weight-semibold:  600;
  --niwa-font-weight-bold:      700;
  --niwa-line-height-tight:     1.2;
  --niwa-line-height-normal:    1.5;
  --niwa-line-height-relaxed:   1.7;

  /* ── Border Radius ────────────────────────────────────────────────────── */
  --niwa-radius-sm:     6px;
  --niwa-radius-md:     10px;
  --niwa-radius-lg:     22px;
  --niwa-radius-xl:     20px;
  --niwa-radius-full:   9999px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --niwa-shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.08);
  --niwa-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.1);
  --niwa-shadow-lg:     0 8px 30px rgba(0, 0, 0, 0.12);
  --niwa-shadow-xl:     0 12px 40px rgba(0, 0, 0, 0.18);

  /* ── Transitions ──────────────────────────────────────────────────────── */
  --niwa-transition-fast:       150ms ease-out;
  --niwa-transition-normal:     250ms ease-out;
  --niwa-transition-slow:       400ms ease-out;
  --niwa-animation-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --niwa-flyout-width:          380px;
  --niwa-flyout-height:         680px;
  --niwa-flyout-max-height:     85vh;
  --niwa-chathead-size:         60px;
  --niwa-header-height:         64px;
  --niwa-input-bar-height:      64px;
  --niwa-nav-height:            48px;
  --niwa-flyout-offset-right:   24px;
  --niwa-flyout-offset-bottom:  54px;
  --niwa-layer-floating:        2147483646;
  --niwa-layer-attention:       2147483647;

  /* ── Glass Morphism ───────────────────────────────────────────────────── */
  --niwa-glass-bg:              rgba(255, 255, 255, 0.15);
  --niwa-glass-blur:            blur(24px);
  --niwa-glass-border:          1px solid rgba(255, 255, 255, 0.18);
  --niwa-glass-shadow:          0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* ── Orb Animation Property ─────────────────────────────────────────────── */
@property --niwa-orb-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}