/* ═══════════════════════════════════════════════════════════════════
   design-tokens.css — Vikaa Studio IQ Enterprise Design System
   v20260612 — Master token file shared by all 7 Studio IQ tools
   Each tool imports this BEFORE its own <style> block and overrides
   only the tokens it needs to customise.
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* ── Font Families ─────────────────────────────────────────────── */
  --font-ui:   'Montserrat', sans-serif;   /* nav, labels, headings, buttons */
  --font-body: 'Roboto', sans-serif;       /* paragraphs, descriptions */
  --font-mono: ui-monospace, 'Cascadia Code', monospace; /* IDs, SQL, tech values */

  /* ── Font Sizes ─────────────────────────────────────────────────── */
  --fs-tool-name: 0.98rem;   /* tool name in app header */
  --fs-tab:       0.73rem;   /* tab navigation text */
  --fs-card-title:0.80rem;   /* card / section headings */
  --fs-label:     0.68rem;   /* form field labels */
  --fs-body:      0.76rem;   /* body text, table cells, input values */
  --fs-table-th:  0.72rem;   /* table header <th> */
  --fs-table-td:  0.76rem;   /* table cell <td> */
  --fs-btn:       0.72rem;   /* button text */
  --fs-badge:     0.62rem;   /* badge / pill text */
  --fs-hint:      0.68rem;   /* hint, meta, caption, empty-state */
  --fs-small:     0.64rem;   /* small overline / section label */
  --fs-tiny:      0.58rem;   /* ultra-small: rail labels, column overlines */

  /* ── Diagram-specific (Platform Architecture tool) ──────────────── */
  --fs-diag-block-title: 0.80rem;
  --fs-diag-block-sub:   0.68rem;
  --fs-diag-section:     0.76rem;
  --fs-diag-badge:       0.62rem;
  --fs-diag-tooltip-h:   0.82rem;
  --fs-diag-tooltip-b:   0.74rem;
  --fs-diag-footer:      0.68rem;

  /* ── Font Weights ───────────────────────────────────────────────── */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ── Text Colors ────────────────────────────────────────────────── */
  --clr-text-primary:   #1e293b;  /* main headings, primary values */
  --clr-text-secondary: #475569;  /* body copy, form labels */
  --clr-text-muted:     #94a3b8;  /* hint text, meta, empty states */
  --clr-text-hint:      #6b7280;  /* uppercase overlines only */

  /* ── Brand / Accent Colors ──────────────────────────────────────── */
  --clr-brand:        #17bcfe;
  --clr-brand-light:  rgba(23, 188, 254, 0.10);
  --clr-brand-border: rgba(23, 188, 254, 0.30);
  --clr-brand-solid:  #bae6fd;

  /* ── Status / Semantic Colors ───────────────────────────────────── */
  --clr-success:        #22c55e;
  --clr-success-bg:     #d1fae5;
  --clr-success-border: #6ee7b7;
  --clr-success-text:   #065f46;

  --clr-warning:        #f59e0b;
  --clr-warning-bg:     #fef3c7;
  --clr-warning-border: #fcd34d;
  --clr-warning-text:   #92400e;

  --clr-error:          #ef4444;
  --clr-error-bg:       #fee2e2;
  --clr-error-border:   #fca5a5;
  --clr-error-text:     #991b1b;

  --clr-info:           #17bcfe;
  --clr-info-bg:        #e0f2fe;
  --clr-info-border:    #7dd3fc;
  --clr-info-text:      #0369a1;

  /* ── Backgrounds & Borders ──────────────────────────────────────── */
  --clr-bg-page:        #f4f6f9;  /* page / app shell */
  --clr-bg-card:        #ffffff;  /* card, panel, modal */
  --clr-bg-subtle:      #f8fafc;  /* input fields, inset wells */
  --clr-bg-inset:       #f1f5f9;  /* table row alt, inner sections */
  --clr-border:         #e5e7eb;  /* standard card / input border */
  --clr-border-strong:  #d1d5db;  /* stronger visual separation */

  /* ── Shape, Radius & Shadow ─────────────────────────────────────── */
  --radius-card:   12px;
  --radius-btn:     8px;
  --radius-badge:  20px;
  --radius-input:   8px;
  --radius-small:   6px;

  --shadow-card:     0 2px  8px rgba(0, 0, 0, 0.04);
  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.12);
}