/* ========== UnTXT DESIGN TOKENS — "Indigo Paper" ========== */
/* Single source of truth for palette + typography + shape.
   Linked with <link rel="stylesheet" href="/tokens.css?v=X"> BEFORE any
   page stylesheet, on every page. Light-first; dark via html.dark.
   8px grid · WCAG AA · semantic colour only · no transitions.
   Detection flag/highlight colours retune in refactor Phase 6. */

:root {
  /* Fonts */
  --ff-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ff-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --ff-editor: 'Source Serif 4', 'Atkinson Hyperlegible', Georgia, serif;
  --ff-mono: 'JetBrains Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;

  /* Role-based readable font size - overridden at runtime by app-settings.js */
  --role-font: 16px;

  /* Brand — anchored to the logo indigo #1E1B4B */
  --brand-ink: #1E1B4B;        /* headings, primary filled buttons, lockup */
  --brand-ink-hover: #2D2966;  /* primary button hover (lifted) */
  --interactive: #4338CA;      /* links, focus, active states (AA on paper) */
  --interactive-hover: #3730A3;
  --tint-strong: #DDD9F3;      /* selected rows, active pills */
  --tint: #EBE8F8;             /* accent panels */
  --tint-faint: #F3F1FA;       /* hover washes, striping */
  --on-brand: #FFFDF9;         /* text on brand-ink / filled buttons */
  --focus-ring: rgba(67, 56, 202, 0.25);

  /* Legacy aliases (consumed throughout styles.css and page styles) */
  --primary-dark: var(--brand-ink);
  --primary: var(--interactive);
  --primary-accent: var(--interactive-hover);
  --button-hvr: var(--interactive-hover);

  /* Semantic states (warmed) */
  --success: #1B7A43;
  --success-hover: #15693A;
  --success-tint: #E7F3EA;
  --warning: #9A5B08;
  --warning-tint: #FDF3DF;
  --danger: #B42318;
  --danger-tint: #FBEAE7;

  /* Tharoorizer card colours */
  --th-title-color: #9A5B08;

  /* Detection flag colours (Indigo Paper retune) */
  --flag-high: #b62929;
  --flag-medium: #a14312;
  --flag-caution: #8f6203;
  --flag-low: #1b7a3f;

  /* Warm paper backgrounds */
  --bg-primary: #FFFDF9;
  --bg-secondary: #F7F3EC;
  --bg-tertiary: #EFEAE1;

  /* Text — indigo-ink neutrals */
  --text-primary: #141227;
  --text-secondary: #3B3856;
  --text-tertiary: #6A6784;
  --text-muted: #8E8BA3;
  --text-inverse: #FFFDF9;

  /* Borders — ink at low alpha reads warm on paper */
  --border-light: rgba(30, 27, 75, 0.14);
  --border-base: rgba(30, 27, 75, 0.35);

  /* Shape & depth — border-led; shadows only for floating layers */
  --radius: 2px;
  --radius-lg: 4px;
  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgba(20, 18, 39, 0.10);
  --shadow-lg: 0 12px 32px rgba(20, 18, 39, 0.14);
}

/* ========== DARK — "indigo ink" ========== */

html.dark {
  --brand-ink: #4A44A8;        /* filled-button surface in dark */
  --brand-ink-hover: #5750BD;
  --interactive: #A5B0F5;      /* links/accents on dark ink */
  --interactive-hover: #BFC7F8;
  --tint-strong: #34305E;
  --tint: #2B2750;
  --tint-faint: #211E42;
  --on-brand: #F3EFE6;
  --focus-ring: rgba(165, 176, 245, 0.30);

  --success: #5BBF85;
  --success-hover: #4FAE77;
  --success-tint: #1C3327;
  --warning: #E2A64E;
  --warning-tint: #392B14;
  --danger: #EF7B6E;
  --danger-tint: #3D1F1B;
  --th-title-color: #E2A64E;

  --bg-primary: #131126;
  --bg-secondary: #1B1834;
  --bg-tertiary: #272348;

  --text-primary: #F3EFE6;
  --text-secondary: #CBC6B8;
  --text-tertiary: #9A96A8;
  --text-muted: #6E6A80;
  --text-inverse: #141227;

  --border-light: rgba(243, 239, 230, 0.14);
  --border-base: rgba(243, 239, 230, 0.30);

  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}

/* ========== SHARED UTILITIES ========== */

/* CVaaS-signature uppercase mono micro-label (badges, quota, legends).
   RTL: letter-spacing is zeroed in public/i18n/rtl.css. */
.micro-label {
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}