/*
 * Super WhatsApp — design tokens
 * Extracted 2026-07-04 from specs/super-whatsapp/snapshot.html and the authored
 * Design Component source (Super WhatsApp.dc.html).
 *
 * The design itself declares NO CSS custom properties — every value below is a
 * literal lifted from inline styles / style-hover / style-focus attributes.
 * The workspace has no existing token system (fresh scaffold, no source code,
 * no specship index), so every token here is NEW; nothing maps to a prior name.
 * Gray steps intentionally mirror the Tailwind gray ramp the design reuses.
 */

:root {
  /* ── Brand (green ramp) ─────────────────────────────────────────── */
  --sw-brand-700: #007050;        /* hover/darken step for primary actions */
  --sw-brand-600: #00875a;        /* PRIMARY brand green — buttons, links, focus */
  --sw-brand-500: #16a34a;        /* accent green / logo gradient end */
  --sw-brand-400: #22c55e;        /* success accents */
  --sw-brand-300: #34d399;        /* light success accent */
  --sw-brand-200: #bbf7d0;        /* pill / badge fill */
  --sw-brand-100: #dcfce7;        /* soft badge fill */
  --sw-brand-50:  #f0fdf4;        /* tinted panel background */

  /* Green-cast neutrals unique to this design (not Tailwind) */
  --sw-surface-page: #f7faf8;     /* app/body background */
  --sw-surface-tint: #e8ede9;     /* hairlines & tinted borders on green surfaces */
  --sw-surface-mist: #fafbfa;     /* off-white card variant */
  --sw-surface-sage: #f5f7f5;     /* subtle section background */
  --sw-border-sage:  #d6e3dc;     /* soft green-gray border */
  --sw-border-hover: #c8d6cf;     /* card border on hover */

  /* ── Neutrals (Tailwind gray ramp, as used) ─────────────────────── */
  --sw-gray-900: #111827;         /* headings / primary text */
  --sw-gray-700: #374151;         /* body text */
  --sw-gray-500: #6b7280;         /* secondary text */
  --sw-gray-400: #9ca3af;         /* placeholder / muted */
  --sw-gray-300: #d1d5db;         /* strong borders */
  --sw-gray-200: #e5e7eb;         /* default borders */
  --sw-gray-100: #f3f4f6;         /* hover fills / wells */
  --sw-gray-50:  #f9fafb;         /* table stripes / panel bg */
  --sw-white:    #ffffff;
  --sw-input-bg: #fafafa;         /* input resting background */
  --sw-slate-300: #cbd5e1;        /* disabled / inactive strokes */

  /* ── Semantic ───────────────────────────────────────────────────── */
  --sw-danger-600: #dc2626;
  --sw-danger-100: #fecdd3;
  --sw-danger-75:  #ffe4e6;
  --sw-danger-50:  #fff1f2;
  --sw-warning-600: #ea580c;
  --sw-warning-200: #fed7aa;
  --sw-warning-50:  #fff7ed;
  --sw-info-600: #2563eb;
  --sw-info-50:  #eff6ff;
  --sw-indigo-600: #4f46e5;
  --sw-indigo-50:  #eef2ff;

  /* Google sign-in button glyph (fixed brand colors) */
  --sw-google-blue:   #4285f4;
  --sw-google-green:  #34a853;
  --sw-google-yellow: #fbbc05;
  --sw-google-red:    #ea4335;

  /* ── Typography ─────────────────────────────────────────────────── */
  --sw-font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --sw-font-mono: ui-monospace, monospace;
  /* Dense half-pixel scale as authored (13px is the workhorse body size) */
  --sw-text-2xs: 10.5px;
  --sw-text-xs:  11px;
  --sw-text-sm:  12px;          /* also 11.5 / 12.5 / 13.5 half-steps in use */
  --sw-text-md:  13px;
  --sw-text-base: 14px;
  --sw-text-lg:  15px;
  --sw-text-xl:  17px;
  --sw-text-2xl: 18px;
  --sw-text-3xl: 26px;
  --sw-text-4xl: 28px;

  /* ── Spacing (px scale as used, most-frequent steps) ────────────── */
  --sw-space-1: 5px;
  --sw-space-2: 8px;
  --sw-space-3: 10px;
  --sw-space-4: 12px;
  --sw-space-5: 14px;
  --sw-space-6: 16px;
  --sw-space-7: 20px;
  --sw-space-8: 28px;

  /* ── Radii ──────────────────────────────────────────────────────── */
  --sw-radius-sm:   7px;          /* inputs, small controls */
  --sw-radius-md:   8px;          /* buttons */
  --sw-radius-lg:   10px;         /* cards */
  --sw-radius-xl:   12px;
  --sw-radius-2xl:  14px;         /* large cards / modals */
  --sw-radius-3xl:  16px;
  --sw-radius-pill: 20px;         /* pills / chips */
  --sw-radius-full: 50%;          /* avatars, status dots */

  /* ── Elevation ──────────────────────────────────────────────────── */
  --sw-shadow-card:       0 1px 3px rgba(0, 0, 0, 0.04);
  --sw-shadow-card-hover: 0 4px 14px rgba(0, 0, 0, 0.1);
  --sw-shadow-brand:      0 1px 5px rgba(0, 135, 90, 0.3);    /* primary button */
  --sw-shadow-brand-hover: 0 4px 14px rgba(0, 135, 90, 0.1);  /* card hover, brand tint */
  --sw-shadow-modal:      0 20px 48px rgba(0, 0, 0, 0.15);
  --sw-shadow-popover:    0 8px 24px rgba(0, 0, 0, 0.22);

  /* Focus rings (applied via box-shadow, not outline) */
  --sw-ring-brand:  0 0 0 3px rgba(0, 135, 90, 0.09);
  --sw-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.08);

  /* ── Motion ─────────────────────────────────────────────────────── */
  /* No `transition` properties anywhere — state swaps (hover/focus) are
     instant attribute-driven style swaps. Motion is keyframe-only: */
  --sw-anim-fade-in:  fadeIn 0.18s ease;         /* also 0.2s variant */
  --sw-anim-scale-in: scaleIn 0.22s ease both;   /* modals; 0.16s small variant */
  --sw-anim-fade-up:  fadeUp 0.4s ease both;     /* page/card entrances */
  --sw-anim-notif-in: notifIn 0.3s ease both;    /* toast slide-in from right */
  --sw-anim-spin:     spin 0.7s linear infinite; /* loaders */
  --sw-anim-pulse:    pulse 1.6s ease infinite;  /* live/status dots */
}