/* ==========================================================================
   tokens.css — EML_SRV design tokens (LIGHT theme)
   Single source of truth for color, type, spacing, radii, shadows.
   Everything else references these custom properties; never hard-code values.

   TYPE RULE (non-negotiable): max font size 12px, min 10px.
     --fs-body  11px  body / table cells / inputs
     --fs-title 12px  page titles & section headers (semibold)
     --fs-label 10px  labels, captions, column headers, timestamps, badges
   ========================================================================== */

:root {
  /* ---- Surfaces & neutrals ---- */
  --c-surface:        #ffffff;   /* cards, table bg, drawers           */
  --c-bg:             #f7f8fa;   /* app/page background                */
  --c-surface-alt:    #eef0f3;   /* subtle fills, segmented track      */
  --c-surface-hover:  #f4f6f9;   /* row / nav hover                    */
  --c-row-hover:      #f7f9fc;   /* table row hover (cooler)           */

  /* ---- Text ---- */
  --c-text:           #1f2430;   /* primary                            */
  --c-text-secondary: #5b6472;   /* secondary                          */
  --c-text-muted:     #8a93a2;   /* meta, captions                     */
  --c-text-faint:     #aeb6c0;   /* timestamps, placeholders, hints    */
  --c-text-inverse:   #ffffff;

  /* ---- Borders / lines ---- */
  --c-border:         #e3e6ea;   /* hairline border                    */
  --c-border-strong:  #d7dbe1;   /* slightly stronger (inputs at rest) */
  --c-border-faint:   #eef0f3;   /* row separators                     */

  /* ---- Accent (restrained single blue) ---- */
  --c-accent:         #2f6fed;
  --c-accent-hover:   #2660d8;
  --c-accent-soft:    #eaf1fe;   /* selected nav / best-row tint       */
  --c-accent-soft-2:  #f5f9ff;   /* highlighted card bg                */
  --c-accent-border:  #cfe0fb;   /* border on accent-soft surfaces     */

  /* ---- Status tints (subtle, never loud) ---- */
  --c-pos-bg:    #e9f5ee;  --c-pos-fg:    #2f7d4f;  --c-pos-border:  #cfe7d8;
  --c-warn-bg:   #fdf3e2;  --c-warn-fg:   #9a6a16;  --c-warn-border: #f1e2b8;
  --c-err-bg:    #fbecec;  --c-err-fg:    #c0392b;  --c-err-border:  #f3d4d4;
  --c-neutral-bg:#eef0f3;  --c-neutral-fg:#5b6472;
  --c-info-bg:   #fff8e6;  --c-info-fg:   #8a6d1f;  --c-info-border: #f1e2b8;

  /* status dots */
  --c-dot-pos:  #2f7d4f;
  --c-dot-warn: #9a6a16;
  --c-dot-muted:#8a93a2;

  /* ---- Scrollbar ---- */
  --c-scroll-thumb:       #cdd2d9;
  --c-scroll-thumb-hover: #aeb6c0;

  /* ---- Typography ---- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-email: "Segoe UI", Calibri, Arial, sans-serif; /* original-message panel */

  /* the entire scale lives between 10 and 12px */
  --fs-title: 12px;   /* page titles, section headers (use with --fw-semibold) */
  --fs-num:   12px;   /* emphasis numbers                                      */
  --fs-body:  11px;   /* body, cells, inputs, buttons                          */
  --fs-label: 10px;   /* labels, captions, column headers, badges, timestamps  */
  --fs-micro: 9px;    /* nav group label / dense meta (within "10px floor"     */
                      /* exception reserved ONLY for the sidebar group eyebrow) */

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

  --lh-tight: 1.4;
  --lh-base:  1.45;
  --lh-loose: 1.55;

  --ls-caps: .06em;   /* uppercase column headers / labels */
  --ls-route:.04em;   /* route strings                     */

  /* ---- Spacing (4px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;

  /* ---- Radii ---- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 9px;
  --r-pill: 999px;

  /* ---- Shadows (soft, subtle only) ---- */
  --shadow-card:   0 1px 3px rgba(20, 26, 38, .06);
  --shadow-pop:    0 1px 4px rgba(20, 26, 38, .08);
  --shadow-drawer: -8px 0 28px rgba(20, 26, 38, .10);
  --shadow-drawer-2: -8px 0 28px rgba(20, 26, 38, .08);
  --shadow-seg:    0 1px 2px rgba(15, 20, 30, .08);

  /* ---- Sizing ---- */
  --sidebar-w:           212px;
  --sidebar-w-collapsed: 56px;
  --topbar-h:            52px;
  --control-h:           28px;  /* buttons, inputs, selects */
  --icon-size:           14px;
  --icon-stroke:         1.5;

  /* ---- Focus ring (accent) ---- */
  --focus-ring: 0 0 0 3px rgba(47, 111, 237, .12);

  /* ---- Motion ---- */
  --t-fast: .15s ease;
  --t-base: .16s ease;

  /* z-index scale */
  --z-drawer: 40;
  --z-sticky: 2;
  --z-tooltip: 60;
}

/* ==========================================================================
   THEME / PALETTES — each palette overrides only the accent family and the
   neutral surface/border family (the gray "chrome" picks up a faint hue).
   Surfaces stay pure white; text, status tints, type, spacing & shadows are
   shared across all palettes. Driven by [data-theme] on <html>.
   ========================================================================== */

/* Azure — default. Calm blue on cool slate. (Equals :root.) */
[data-theme="azure"] {
  --c-accent: #2f6fed;  --c-accent-hover: #2660d8;  --c-accent-soft: #eaf1fe;
  --c-accent-soft-2: #f5f9ff;  --c-accent-border: #cfe0fb;
  --focus-ring: 0 0 0 3px rgba(47, 111, 237, .12);
  --c-bg: #f7f8fa;  --c-surface: #ffffff;  --c-surface-alt: #eef0f3;
  --c-surface-hover: #f4f6f9;  --c-row-hover: #f7f9fc;
  --c-border: #e3e6ea;  --c-border-strong: #d7dbe1;  --c-border-faint: #eef0f3;
}

/* Evergreen — restrained green, faint warm-green base. */
[data-theme="evergreen"] {
  --c-accent: #1f8a5b;  --c-accent-hover: #1a774e;  --c-accent-soft: #e6f4ec;
  --c-accent-soft-2: #f3faf6;  --c-accent-border: #c3e3d1;
  --focus-ring: 0 0 0 3px rgba(31, 138, 91, .15);
  --c-bg: #f4f8f5;  --c-surface: #ffffff;  --c-surface-alt: #e8f1ea;
  --c-surface-hover: #eef6f0;  --c-row-hover: #f2f9f4;
  --c-border: #dce7df;  --c-border-strong: #ccd9d0;  --c-border-faint: #e8f1ea;
}

/* Indigo — violet-blue, faint violet base. */
[data-theme="indigo"] {
  --c-accent: #5b54d6;  --c-accent-hover: #4e47c4;  --c-accent-soft: #ecebfb;
  --c-accent-soft-2: #f6f5fe;  --c-accent-border: #d4d1f5;
  --focus-ring: 0 0 0 3px rgba(91, 84, 214, .15);
  --c-bg: #f6f6fb;  --c-surface: #ffffff;  --c-surface-alt: #ecebf5;
  --c-surface-hover: #f1f0f9;  --c-row-hover: #f5f4fb;
  --c-border: #e1e0ec;  --c-border-strong: #d3d1e0;  --c-border-faint: #ecebf5;
}

/* Claude — warm coral/clay accent on a warm cream base. */
[data-theme="claude"] {
  --c-accent: #c2613f;  --c-accent-hover: #a94f30;  --c-accent-soft: #f7ebe3;
  --c-accent-soft-2: #fdf8f4;  --c-accent-border: #eed8c9;
  --focus-ring: 0 0 0 3px rgba(194, 97, 63, .18);
  --c-bg: #f7f4ef;  --c-surface: #ffffff;  --c-surface-alt: #f0ece4;
  --c-surface-hover: #f5f1ea;  --c-row-hover: #faf7f1;
  --c-border: #e7e0d6;  --c-border-strong: #d8d0c4;  --c-border-faint: #f0ece4;
}

/* Arctic Frost — cool steel-blue accent on crisp cool-slate chrome. */
[data-theme="arctic"] {
  --c-accent: #4a6fa5;  --c-accent-hover: #3d5e8e;  --c-accent-soft: #e7eef7;
  --c-accent-soft-2: #f4f7fb;  --c-accent-border: #cdddf0;
  --focus-ring: 0 0 0 3px rgba(74, 111, 165, .16);
  --c-bg: #f6f8fb;  --c-surface: #ffffff;  --c-surface-alt: #eef1f6;
  --c-surface-hover: #f2f5fa;  --c-row-hover: #f3f6fb;
  --c-border: #dfe4ec;  --c-border-strong: #d2d9e3;  --c-border-faint: #eef1f6;
}