/* =========================================================
   SENSEI Media DS — Product UI extension
   Layers on top of colors_and_type.css. Adds:
   - Cool slate neutral scale (parallel to warm paper)
   - Product UI font (IBM Plex Sans) — distinct from marketing display
   - App-surface semantic tokens (--bg-app-*, --surface-*)
   - Density tokens for dense product UI
   - Form / control tokens (focus ring, input height)
   - Z-index scale
   ========================================================= */

/* IBM Plex Sans — replace with: npm i @fontsource/ibm-plex-sans
   then: import '@fontsource/ibm-plex-sans/400.css' etc. in main.jsx */

:root {
  /* ---------- COOL NEUTRAL (slate) — for product surfaces ---------- */
  --slate-0:  #ffffff;
  --slate-1:  #f7f8fa;
  --slate-2:  #eef0f4;
  --slate-3:  #e2e5eb;
  --slate-4:  #c9cfd9;
  --slate-5:  #9aa4b2;
  --slate-6:  #6b7585;
  --slate-7:  #4a5260;
  --slate-8:  #2e333d;
  --slate-9:  #1a1d24;
  --slate-10: #0f1115;

  /* ---------- PRODUCT FONT ----------
     IBM Plex Sans — neutral but characterful (slab-influenced details,
     tabular numbers); clearly distinct from Inter and from Cormorant.
     Used for product headings, table cells, KPIs. */
  --font-product: 'IBM Plex Sans', 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* ---------- PRODUCT SURFACES (semantic, theme-aware) ----------
     Light theme defaults — overridden by [data-theme="dark"] below. */
  --bg-app:        var(--slate-1);   /* app canvas */
  --bg-sidebar:    var(--slate-9);   /* dark sidebar (cross-theme) */
  --bg-surface:    var(--slate-0);   /* cards, table */
  --bg-surface-2:  var(--slate-1);   /* nested surface, table header */
  --bg-hover:      var(--slate-2);   /* row hover */
  --bg-selected:   color-mix(in srgb, var(--accent) 8%, var(--slate-0));
  --bg-input:      var(--slate-0);

  --fg-sidebar:        #d6d9df;      /* sidebar text */
  --fg-sidebar-dim:    #8d96a4;
  --fg-sidebar-active: #ffffff;

  --border-app:     var(--slate-3);
  --border-strong:  var(--slate-4);
  --border-input:   var(--slate-4);

  --focus-ring:     0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);

  /* ---------- DENSITY ----------
     Product UI needs smaller, more predictable controls than marketing. */
  --control-h-sm: 28px;
  --control-h-md: 36px;
  --control-h-lg: 44px;        /* meets touch target floor */
  --row-h:        44px;        /* table row height */
  --row-h-compact: 36px;

  /* ---------- PRODUCT TYPE SCALE ----------
     Smaller, denser scale than marketing. */
  --fs-product-display: 28px;  /* page title */
  --fs-product-h2: 20px;       /* section title */
  --fs-product-h3: 16px;       /* card title */
  --fs-product-body: 14px;     /* default body */
  --fs-product-meta: 13px;     /* meta, table cell secondary */
  --fs-product-micro: 11px;    /* uppercase eyebrows in product */

  /* ---------- Z-INDEX SCALE ---------- */
  --z-sidebar: 20;
  --z-header:  30;
  --z-dropdown: 40;
  --z-modal:   50;
  --z-toast:   60;
}

/* ---------- DARK THEME OVERRIDES ---------- */
[data-theme="dark"] {
  --bg-app:        var(--slate-10);
  --bg-sidebar:    #0a0c10;
  --bg-surface:    var(--slate-9);
  --bg-surface-2:  #161921;
  --bg-hover:      #232833;
  --bg-selected:   color-mix(in srgb, var(--accent) 14%, var(--slate-9));
  --bg-input:      var(--slate-9);

  --fg-sidebar:        #c9ced8;
  --fg-sidebar-dim:    #6b7585;
  --fg-sidebar-active: #ffffff;

  --border-app:    #232833;
  --border-strong: #3b4250;
  --border-input:  #3b4250;

  --focus-ring:    0 0 0 3px color-mix(in srgb, var(--accent) 36%, transparent);
}

/* ---------- PRODUCT BASE ---------- */
.product-ui {
  font-family: var(--font-product);
  font-size: var(--fs-product-body);
  color: var(--fg-1);
  background: var(--bg-app);
  font-feature-settings: "ss01", "tnum";   /* tabular numbers on */
}
.product-ui h1, .product-ui h2, .product-ui h3, .product-ui h4 {
  font-family: var(--font-product);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fg-1);
  margin: 0;
}

/* ---------- VOICE-IN-PRODUCT UTILITY ----------
   This class enforces "approachable product copy": tight line-height,
   no italics, sentence case. */
.product-copy {
  font-family: var(--font-product);
  font-size: var(--fs-product-body);
  line-height: 1.5;
  color: var(--fg-2);
}