/* ------------------------------------------------------------------
   Zscaler PT Observability — Design Tokens
   Editorial / Pinterest-inspired: warm cream chrome, ink text, one
   saturated red CTA, fully-rounded cards, no gradients, no shadows
   beyond soft elevation. Data is the load-bearing element.
   Reference: DESIGN-pinterest.md
------------------------------------------------------------------ */

:root {
  /* ── Surface / background ─────────────────────────────────────── */
  --canvas:          #ffffff;
  --surface-soft:    #fbfbf9;   /* page background                    */
  --surface-card:    #f6f6f3;   /* card / panel                       */
  --surface-elevated:#ffffff;   /* elevated card / modal              */
  --surface-inset:   #f0f0ec;   /* inputs, table body                 */
  --surface-dark:    #262622;   /* on-dark chip / footer accent       */

  /* ── Ink / text ───────────────────────────────────────────────── */
  --ink:        #000000;
  --ink-soft:   #211922;
  --body:       #33332e;
  --charcoal:   #262622;
  --mute:       #62625b;
  --ash:        #91918c;
  --stone:      #c8c8c1;

  /* ── Borders / dividers ───────────────────────────────────────── */
  --hairline-soft:#e5e5e0;
  --hairline:     #dadad3;

  /* ── Brand (Dark Blue CTA) ────────────────────────────────────── */
  --primary:         #1e3a8a;
  --primary-pressed: #1e40af;
  --on-primary:      #ffffff;

  /* ── Secondary chip (cool ink on cream) ───────────────────────── */
  --secondary-bg:      #e5e5e0;
  --secondary-pressed: #c8c8c1;
  --on-secondary:      #000000;

  /* ── Accent (used sparingly) ──────────────────────────────────── */
  --accent-blue:   #435ee5;
  --accent-purple: #7e238b;

  /* ── Semantic status (kept vivid; sit on cream surfaces) ──────── */
  --ok:      #103c25;   /* dark green ink */
  --ok-fill: #22a06b;   /* chart fill */
  --ok-bg:   #c7f0da;
  --warn:      #7a4a00;
  --warn-fill: #f59e0b;
  --warn-bg:   #ffe6a6;
  --crit:      #9e0a0a;
  --crit-fill: #e60023;
  --crit-bg:   #ffd4d4;
  --info:      #1e3a8a;
  --info-fill: #435ee5;
  --info-bg:   #dbe4ff;

  /* ── Chart palette (on cream) ─────────────────────────────────── */
  --c1: #e60023;   /* Pinterest red — primary series */
  --c2: #262622;   /* Ink                            */
  --c3: #22a06b;   /* Green                          */
  --c4: #f59e0b;   /* Amber                          */
  --c5: #435ee5;   /* Cobalt                         */
  --c6: #7e238b;   /* Purple                         */
  --c7: #0aa2a2;   /* Teal                           */
  --c8: #a83e00;   /* Rust                           */

  /* ── Typography ───────────────────────────────────────────────── */
  --font-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Inter Tight', 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

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

  /* ── Radius (Pinterest: 16px cards, pill buttons) ─────────────── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;      /* pin card */
  --r-xl: 24px;
  --r-pill: 999px;

  /* ── Shadow (very restrained) ─────────────────────────────────── */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.02);
  --shadow-2: 0 1px 2px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.04);
  --shadow-hover: 0 2px 4px rgba(0,0,0,0.06), 0 10px 30px rgba(0,0,0,0.06);
  --shadow-focus: 0 0 0 3px rgba(67,94,229,0.28);

  /* ── Layout ───────────────────────────────────────────────────── */
  --sidebar-w: 244px;
  --header-h: 72px;
  --content-max: 1720px;

  /* ── Motion ───────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
}

/* ------------------------------------------------------------------
   DARK THEME — same tokens, inverted values.
   Toggled via `<html data-theme="dark">` (see js/theme.js).
------------------------------------------------------------------ */
:root[data-theme="dark"] {
  --canvas:           #0b1220;
  --surface-soft:     #0a111d;   /* app bg           */
  --surface-card:     #121b2e;   /* card             */
  --surface-elevated: #17223a;   /* elevated card    */
  --surface-inset:    #0e1626;   /* input / table bg */
  --surface-dark:     #f6f6f3;   /* inverted accent chip */

  --ink:      #f3f5f9;
  --ink-soft: #e6ecf5;
  --body:     #d6dbe4;
  --charcoal: #ffffff;
  --mute:     #9aa4b8;
  --ash:      #6f7a92;
  --stone:    #3a4460;

  --hairline-soft: rgba(255,255,255,0.06);
  --hairline:      rgba(255,255,255,0.12);

  /* Brand blue kept vibrant on dark */
  --primary:         #3b82f6;
  --primary-pressed: #2563eb;
  --on-primary:      #ffffff;

  --secondary-bg:      #1a2540;
  --secondary-pressed: #24314f;
  --on-secondary:      #ffffff;

  --accent-blue:   #6b8bff;
  --accent-purple: #b76ac1;

  /* Semantic — darker fills, brighter foreground */
  --ok:        #7ee2a7;
  --ok-fill:   #22c55e;
  --ok-bg:     rgba(34, 197, 94, 0.14);
  --warn:      #fbc16b;
  --warn-fill: #f59e0b;
  --warn-bg:   rgba(245, 158, 11, 0.16);
  --crit:      #ff8a8a;
  --crit-fill: #ef4444;
  --crit-bg:   rgba(239, 68, 68, 0.16);
  --info:      #86d4f5;
  --info-fill: #38bdf8;
  --info-bg:   rgba(56, 189, 248, 0.16);

  /* Chart palette re-tuned for dark backgrounds */
  --c1: #ff5c7a;   /* red    */
  --c2: #e6ecf5;   /* off-white (was ink) */
  --c3: #34d399;   /* green  */
  --c4: #fbbf24;   /* amber  */
  --c5: #7aa2ff;   /* cobalt */
  --c6: #c78bff;   /* purple */
  --c7: #2dd4bf;   /* teal   */
  --c8: #ff9770;   /* rust   */

  --shadow-1: 0 1px 0 rgba(255,255,255,0.03);
  --shadow-2: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
  --shadow-hover: 0 2px 4px rgba(0,0,0,0.45), 0 12px 32px rgba(0,0,0,0.45);
  --shadow-focus: 0 0 0 3px rgba(107,139,255,0.28);
}