/* =============================================================================
   Indago — Regulatory Design System
   colors_and_type.css — canonical, reusable design tokens
   -----------------------------------------------------------------------------
   Every value here is grounded in real source evidence captured from the
   Indago product repository (github.com/Indago-bio/Indago, web/ Vue 3 SPA) and
   the brand assets. See README.md → "Provenance" and DESIGN.md for rationale.

   How the system is structured:
     - Indago's PRODUCT UI is light-mode-native: white surfaces, Tailwind-gray
       neutrals, blue-600 (#2563eb) as the single action color, used sparingly.
       The :root block below is that light product theme.
     - Indago's BRAND/marketing layer is dark and premium: the indigo gradient
       orb + hero wave on a near-black indigo-navy. That is exposed as
       [data-theme="dark"] and the --brand-* / --grad-* tokens.
   Bind by pasting this file into a <link> or the first <style> of any artifact.
   ============================================================================= */

/* =============================================================================
   BRAND WEBFONTS — self-hosted, no external runtime dependency
   -----------------------------------------------------------------------------
   The live PRODUCT app ships a native system stack (see DESIGN.md §3); these two
   brand faces are the MARKETING / BRAND layer (landing pages, decks, promo):
     - DM Sans  → logo / headings / display (clarity + precision)
     - Raleway  → body copy / taglines       (elegance + readability)
   Both are variable WOFF2 files (one file spans the weight axis), subsetted to
   latin + latin-ext, served from ./fonts/ so previews render offline and in
   locked-down/audit environments. Source: Google Fonts (SIL OFL 1.1).
   ============================================================================= */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/raleway-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/raleway-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------------------------------------------------------------------------
     1. CORE PALETTE  (raw scales — reference these through semantic roles below)
     Neutrals are the exact gray ramp the product ships (Tailwind-gray family,
     verified by frequency across web/src/**.vue).
     --------------------------------------------------------------------------- */

  /* Neutrals / "Ink" ramp */
  --ink-950: #111827;   /* headings, strongest text            (21 uses) */
  --ink-900: #1f2937;   /* primary body text                   (46 uses) */
  --ink-700: #374151;   /* secondary text, chip text           (25 uses) */
  --ink-500: #6b7280;   /* muted text, inactive nav            (58 uses) */
  --ink-400: #9ca3af;   /* faint meta, counts, timestamps      (19 uses) */
  --ink-300: #d1d5db;   /* control borders                     (21 uses) */
  --ink-200: #e5e7eb;   /* default hairline border             (59 uses) */
  --ink-150: #e2e4e8;   /* header / divider border             (app chrome) */
  --ink-100: #f3f4f6;   /* subtle fill, inset divider          (27 uses) */
  --ink-50:  #f9fafb;   /* page background, hover fill          (18 uses) */
  --ink-25:  #f8fafc;   /* faintest panel wash                 */
  --white:   #ffffff;

  /* Indago Blue — the product action color (blue-600 family) */
  --blue-700: #1d4ed8;  /* pressed */
  --blue-600: #2563eb;  /* PRIMARY action — buttons, active tab, links (46 uses) */
  --blue-500: #3b82f6;
  --blue-300: #93c5fd;
  --blue-50:  #eff6ff;

  /* Brand Indigo — logo gradient + focus glow + marketing accents */
  --indigo-700: #4338ca;
  --indigo-600: #4f46e5;  /* focus ring glow, brand secondary (15 uses) */
  --indigo-500: #6366f1;
  --indigo-400: #776cff;  /* periwinkle — documented brand swatch */
  --indigo-royal: #4f5bf5;/* royal — documented brand swatch */

  /* Logo gradient — the ACTUAL stops, sampled pixel-for-pixel from the
     rendered logo orb (more saturated than the documented swatches above).
     These drive indago-orb.svg and --grad-brand so the token can never
     drift from the mark. Horizontal (left → right), matching the orb. */
  --grad-logo-1: #2455f8;  /* left stop  — sampled from logo orb */
  --grad-logo-2: #7e6dff;  /* right stop — sampled from logo orb */

  /* Pre-IND amber — the document-mode signal (distinct from CTD blue) */
  --amber-600: #d97706;
  --amber-500: #f59e0b;   /* Pre-IND active state */
  --amber-800: #92400e;   /* amber chip text */
  --amber-100: #fef3c7;   /* amber chip fill */

  /* Status — success / danger (exact product values) */
  --green-700: #065f46;   /* success text */
  --green-600: #059669;   /* success / resolved */
  --green-100: #d1fae5;   /* success fill (GLP chip) */
  --red-700:   #b91c1c;
  --red-600:   #dc2626;   /* danger / delete */
  --red-500:   #ef4444;   /* destructive icon, PDF mark */

  /* ---------------------------------------------------------------------------
     2. SEMANTIC ROLES — the tokens you actually consume in UI
     LIGHT theme (product default).
     --------------------------------------------------------------------------- */
  --bg:            var(--ink-50);     /* app/page background */
  --surface:       var(--white);      /* cards, panels, nav, modals */
  --surface-sunken:var(--ink-50);     /* wells, hovered rows */
  --surface-hover: var(--ink-50);
  --fg:            var(--ink-900);    /* body text */
  --fg-strong:     var(--ink-950);    /* headings */
  --fg-muted:      var(--ink-500);    /* secondary text */
  --fg-faint:      var(--ink-400);    /* meta, counts */
  --border:        var(--ink-200);    /* default hairline */
  --border-strong: var(--ink-300);    /* control / interactive border */
  --border-divider:var(--ink-100);    /* inset section dividers */

  --accent:        var(--blue-600);   /* PRIMARY action */
  --accent-hover:  var(--blue-700);
  --accent-tint:   rgba(37, 99, 235, 0.08);  /* active nav / icon wash */
  --accent-tint-2: rgba(37, 99, 235, 0.04);  /* active tab background */
  --brand:         var(--indigo-600); /* brand indigo (gradient, glow) */
  --mode-preind:   var(--amber-500);  /* Pre-IND document mode */

  --focus-ring:    0 0 0 3px rgba(79, 70, 229, 0.10);  /* indigo glow (inputs) */
  --focus-ring-blue: 0 0 0 1px rgba(37, 99, 235, 0.20);/* blue 1px (compact controls) */

  /* Brand gradient — matches the logo orb exactly (sampled stops, horizontal).
     Used on the orb, hero accents, and marketing CTAs. */
  --grad-brand: linear-gradient(90deg, var(--grad-logo-1) 0%, var(--grad-logo-2) 100%);

  /* ---------------------------------------------------------------------------
     3. TYPOGRAPHY
     Two layers, one system:
       - BRAND / marketing (landing, decks, promo): DM Sans for logo, headings &
         display, Raleway for body copy & taglines — the self-hosted webfaces
         declared above. This is the default for any new brand-facing artifact.
       - PRODUCT app: ships a native system stack (no webfont) for instant render
     The system is exactly TWO faces: DM Sans (display/headings/logo) and Raleway
     (body/taglines/labels). There is no third "system" font token — the bare
     `sans-serif` generic is only a last-resort fallback if a webface fails to load.
     IDs / hashes / module codes (BLAKE3 claim ids, CTD targets like 2.6.6.3) render
     in DM Sans with tabular numerics rather than a separate monospace face.
     --------------------------------------------------------------------------- */
  --font-display: 'DM Sans', sans-serif;   /* logo, headings, hero, display sizes */
  --font-body:    'Raleway', sans-serif;   /* body copy, taglines, labels */
  --font-sans:    var(--font-body);        /* back-compat alias */
  --font-mono:    'DM Sans', sans-serif;   /* folded into DM Sans tabular — IDs/codes use font-variant-numeric: tabular-nums */

  /* Type scale — the dense product ramp (rem) plus marketing display sizes.
     Product UI lives in the 0.6875rem–1rem band; display sizes are for the
     marketing/landing layer this system also has to carry. */
  --text-2xs:  0.6875rem;  /* 11px — chips, micro-labels */
  --text-xs:   0.75rem;    /* 12px — meta, counts, uppercase labels */
  --text-sm:   0.8125rem;  /* 13px — dense table / list text */
  --text-base: 0.875rem;   /* 14px — default body / nav */
  --text-md:   1rem;       /* 16px — emphasis body */
  --text-lg:   1.25rem;    /* 20px — panel titles */
  --text-xl:   1.5rem;     /* 24px — section headings */
  --text-2xl:  2rem;       /* 32px — page headings */
  --text-3xl:  clamp(2.5rem, 5vw, 3.5rem);  /* marketing sub-hero */
  --text-4xl:  clamp(3rem, 7vw, 5rem);      /* marketing hero */

  --weight-regular: 400;
  --weight-medium:  500;   /* active nav, labels */
  --weight-semibold:600;   /* titles, emphasis */
  --weight-bold:    700;   /* GLP chip, strong emphasis */

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-normal:1.5;
  --tracking-label: 0.04em; /* uppercase meta labels */
  --tracking-tight: -0.01em;/* large display */

  /* ---------------------------------------------------------------------------
     4. SPACING — 4px base grid (the product's spacing rhythm).
     Density is a feature: this is an audit-grade data tool, not a marketing page.
     --------------------------------------------------------------------------- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.375rem;  /* 6px */
  --space-3: 0.5rem;    /* 8px */
  --space-4: 0.75rem;   /* 12px */
  --space-5: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-7: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */
  --space-9: 4rem;      /* 64px */

  /* ---------------------------------------------------------------------------
     5. RADIUS — small and deliberate (the product never rounds aggressively).
     --------------------------------------------------------------------------- */
  --radius-xs: 4px;     /* compact controls, chips-square, reassign select */
  --radius-sm: 6px;     /* buttons, inputs, icon buttons */
  --radius-md: 8px;     /* cards, dropdowns, modals */
  --radius-lg: 12px;    /* large surfaces, marketing cards */
  --radius-pill: 999px; /* nav mode toggle, chips, avatars */

  /* ---------------------------------------------------------------------------
     6. ELEVATION — restrained. Most separation is borders, not shadow.
     --------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.25);          /* avatar ring */
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.16);         /* dropdown / popover */
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.18);         /* modal */
  --shadow-brand: 0 8px 24px rgba(79, 70, 229, 0.25);  /* brand CTA on dark */

  /* ---------------------------------------------------------------------------
     7. LAYOUT — breakpoints, containers, grid, section rhythm.
     The product app is desktop-first and dense: a fixed top nav over a
     multi-pane shell that COLLAPSES to stacked sections below --bp-lg.
     Marketing is fully responsive on a 12-column grid.
     NOTE: CSS custom properties can't be read inside @media (...) — these
     --bp-* tokens are the canonical reference values; media queries hard-code
     the same pixel numbers. Keep the two in sync.
     --------------------------------------------------------------------------- */
  --bp-sm:   640px;   /* large phone / small tablet — single column holds */
  --bp-md:   768px;   /* tablet portrait — 2-up content, sidebars still off */
  --bp-lg:   960px;   /* SHELL COLLAPSE — multi-pane → stacked, drawer nav */
  --bp-xl:  1280px;   /* laptop — full multi-pane; marketing at full width */
  --bp-2xl: 1536px;   /* desktop wide — comfortable max line length reached */

  --container-prose:   720px;   /* reading column, ~60–68ch */
  --container-content: 1080px;  /* standard marketing section */
  --container-wide:    1280px;  /* wide hero / feature sections */
  --container-max:     1440px;  /* outer shell cap */

  --grid-cols:    12;               /* marketing grid column count */
  --grid-gutter:  var(--space-6);   /* 24px column gutter */
  --grid-margin:  var(--space-6);   /* 24px outer margin (steps up on wide) */

  --section-y-sm: var(--space-8);   /* 48px — tight section */
  --section-y:    var(--space-9);   /* 64px — standard marketing section */
  --section-y-lg: 6rem;             /* 96px — hero / major break */

  --shell-nav-h:    56px;   /* fixed top-nav height */
  --shell-pane-min: 320px;  /* contextual side panel min (gaps / chat / comments) */
  --shell-pane-max: 380px;  /* contextual side panel max */

  /* ---------------------------------------------------------------------------
     8. MOTION — fast, functional, never showy.
     Product UI lives in the 120–250ms band. The slower hero/promo
     durations are for the marketing & video layer only — never bring
     them into the dense app chrome.
     --------------------------------------------------------------------------- */
  /* Easing — one standard curve for UI; decelerate for entrances,
     accelerate for exits, a restrained spring for the single hero moment. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);        /* standard — UI hover/transition */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* decelerate — entrances, reveals */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);       /* accelerate — exits, dismissals */
  --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1); /* subtle overshoot — hero flourish only */

  /* Durations — product band */
  --dur-fast: 0.12s;   /* micro: chevrons, icon color */
  --dur: 0.15s;        /* default: hover, border, background */
  --dur-slow: 0.25s;   /* dropdowns, larger state changes */
  /* Marketing / video band — do NOT use in product chrome */
  --dur-entrance: 0.5s;  /* section/element reveal on scroll */
  --dur-hero: 0.9s;      /* the one orchestrated hero entrance (the wave) */

  /* Imagery — scrim tokens for seating a mark/headline on brand imagery
     (the ribbon-wave or a gradient field) without recoloring it. */
  --img-scrim: linear-gradient(180deg, rgba(10,11,20,0) 0%, rgba(10,11,20,0.72) 100%);
  --img-scrim-solid: rgba(10,11,20,0.55);  /* flat panel under a mark on busy pixels */

  /* ---------------------------------------------------------------------------
     9. DATA VISUALIZATION — charts, graphs, KPI trends.
     A regulatory data tool lives or dies on legible charts. The palette is
     deliberately ALL-COOL and brand-native: every series lives in the indigo →
     blue → cyan → teal → violet family, so a chart reads unmistakably as
     "Indago" and never borrows the jarring red/amber/green of a generic
     dashboard. Warm hues (red, amber, green) are reserved for PRODUCT status
     chips only (success/warning/danger) — they are semantic UI signals, NOT
     chart decoration. Tuned for white surfaces; ordered so no two neighbours
     collide in a stack. Color still carries meaning — pair series with
     labels/legends, never rely on hue alone (see DESIGN.md §10). */

  /* Categorical — up to 8 distinct series, all in the cool brand family.
     Lead with --chart-1. */
  --chart-1: #2563eb;   /* Indago Blue — primary series           */
  --chart-2: #7c6cff;   /* periwinkle — brand-adjacent            */
  --chart-3: #06b6d4;   /* cyan                                   */
  --chart-4: #0d9488;   /* teal                                   */
  --chart-5: #4f46e5;   /* brand indigo                           */
  --chart-6: #38bdf8;   /* sky                                    */
  --chart-7: #8b5cf6;   /* violet                                 */
  --chart-8: #64748b;   /* slate — neutral / "other" series       */

  /* Sequential — single-hue intensity ramp (heatmaps, density, choropleth).
     Anchored on Indago Blue, light → dark. */
  --seq-1: #eff6ff;
  --seq-2: #bfdbfe;
  --seq-3: #93c5fd;
  --seq-4: #60a5fa;
  --seq-5: #3b82f6;
  --seq-6: #2563eb;
  --seq-7: #1d4ed8;
  --seq-8: #1e3a8a;

  /* Diverging — brand-native blue ↔ teal, kept entirely in the cool family so
     it never clashes with the indigo identity. Deep Indago blue at the positive
     pole, teal at the negative pole, neutral slate midpoint (never white). The
     two poles separate by hue (blue vs green-cyan) as well as lightness. */
  --div-pos-2: #1e3a8a;  /* strong positive / surplus — deep Indago blue */
  --div-pos-1: #60a5fa;
  --div-mid:   #e2e8f0;  /* zero / neutral */
  --div-neg-1: #5eead4;
  --div-neg-2: #0d9488;  /* strong negative / deficit — teal */

  /* Data status — chart marks & KPI deltas, kept COOL (not the warm product
     status chips). Teal = good/up, periwinkle = watch/partial, slate = down/
     gap/missing. Direction is reinforced by ▲▼ arrows + labels, not hue alone. */
  --data-positive: #0d9488;  /* up / pass / sufficient — teal */
  --data-caution:  #7c6cff;  /* watch / partial — periwinkle */
  --data-negative: #64748b;  /* down / gap / missing — slate */
  --data-empty:    #e5e7eb;  /* no data / track */

  /* Chart chrome — gridlines, axes, labels, fills. */
  --chart-grid:   #f3f4f6;   /* horizontal gridlines (--ink-100) */
  --chart-axis:   #d1d5db;   /* baseline / axis (--ink-300)      */
  --chart-label:  #6b7280;   /* tick + axis labels (--ink-500)   */
  --chart-track:  #f3f4f6;   /* empty bar / progress track       */
  --chart-area:   rgba(37, 99, 235, 0.16);  /* area-fill top alpha (fades to 0) */
}

/* =============================================================================
   DARK / BRAND THEME — the marketing hero + any product dark surface.
   Anchored on the indigo orb on near-black indigo-navy (matches the hero wave).
   Apply with <html data-theme="dark"> or on a single <section data-theme="dark">.
   ============================================================================= */
[data-theme="dark"] {
  --bg:            #0a0b14;   /* near-black indigo-navy (hero wave ground) */
  --surface:       #12131f;   /* raised dark panel */
  --surface-sunken:#0d0e18;
  --surface-hover: #1a1b29;
  --fg:            #e6e7ee;   /* off-white body (matches wordmark tone) */
  --fg-strong:     #f7f8fb;
  --fg-muted:      #a3a6b8;
  --fg-faint:      #6f7286;
  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-divider:rgba(255, 255, 255, 0.06);

  --accent:        #6d7bff;   /* lifted blue for contrast on dark */
  --accent-hover:  #8590ff;
  --accent-tint:   rgba(109, 123, 255, 0.16);
  --accent-tint-2: rgba(109, 123, 255, 0.08);
  --brand:         var(--indigo-400);

  --focus-ring:    0 0 0 3px rgba(118, 108, 255, 0.30);
  --shadow-md:     0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg:     0 16px 48px rgba(0, 0, 0, 0.55);

  /* Data-viz chrome on dark/brand surfaces. Series colors hold on dark; only
     chart-1 and the area-fill lift for contrast against the indigo-navy. */
  --chart-1:     #6d7bff;   /* lifted blue, matches dark --accent */
  --chart-grid:  rgba(255, 255, 255, 0.07);
  --chart-axis:  rgba(255, 255, 255, 0.16);
  --chart-label: #a3a6b8;
  --chart-track: rgba(255, 255, 255, 0.07);
  --chart-area:  rgba(109, 123, 255, 0.22);
}

/* =============================================================================
   BASE ELEMENT BINDINGS — opt-in starting point for previews & UI kits.
   ============================================================================= */
.indago-root,
body.indago {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.indago-root h1, .indago-root h2, .indago-root h3,
.indago-root h4, .indago-root h5 {
  color: var(--fg-strong);
  font-family: var(--font-display);   /* DM Sans on the brand layer */
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
}

/* Display utility — DM Sans, for logo/hero/marketing headlines. Pair with the
   --text-3xl / --text-4xl sizes. Body copy & taglines use --font-body. */
.indago-display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

.indago-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.indago-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-faint);
}

/* ---- Buttons (product spec) ---- */
.indago-btn {
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.indago-btn:hover { background: var(--surface-hover); }
.indago-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.indago-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
.indago-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.indago-btn--brand {
  background: var(--grad-brand);
  border-color: transparent;
  color: var(--white);
  box-shadow: var(--shadow-brand);
}
.indago-btn:disabled { opacity: 0.5; cursor: default; }

/* ---- Inputs (product spec) ---- */
.indago-input,
.indago-textarea,
.indago-select {
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.indago-input:focus,
.indago-textarea:focus,
.indago-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* ---- Chip / pill (product spec) ---- */
.indago-chip {
  display: inline-block;
  padding: 0.0625rem 0.375rem;
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-pill);
  background: var(--ink-100);
  color: var(--ink-700);
  white-space: nowrap;
}
.indago-chip--accent { background: var(--accent-tint); color: var(--accent); }
.indago-chip--amber  { background: var(--amber-100); color: var(--amber-800); }
.indago-chip--green  { background: var(--green-100); color: var(--green-700); font-weight: var(--weight-bold); }

/* ---- Card (product spec) ---- */
.indago-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}