/* ==========================================================================
   ms-tokens.css — Matheus Siqueira product design system, v1.0
   Shared by: Gestor_de_Notas, library-api-advanced, chatbot-ia-api,
   Simulacao-Estrategica-de-Decisao-Empresarial, Reconhecimento-de-Gestos-de-Mao,
   Deteccao-de-Anomalias-Operacionais.

   Core values are the portfolio's Deep Obsidian palette
   (portfolio/app/globals.css :root) and its motion/radius/weight scales.
   DARK-ONLY by contract (portfolio/docs/theme-contract.md): there is no light
   theme, no theme toggle and no prefers-color-scheme branch.

   Every colour pair used for text or UI was measured with the WCAG 2.x
   relative-luminance formula; ratios are noted inline (range = darkest to
   lightest neutral background). Do not add or change a colour without
   re-measuring it.

   SECTION 1 is tokens only (safe anywhere).
   SECTION 2 is the base layer:
     - vanilla CSS / Jinja: keep as is (unlayered);
     - Tailwind v3: paste SECTION 2 inside `@layer base { ... }` in globals.css;
     - Tailwind v4: wrap SECTION 2 in `@layer base { ... }`.
   ========================================================================== */

/* ---------------------------- SECTION 1: tokens --------------------------- */
:root {
  color-scheme: dark;

  /* Neutrals, darkest to lightest. No token is pure black. */
  --ms-bg: #0b0d10; /* Deep Carbon: page canvas, input fill, code blocks */
  --ms-bg-subtle: #101318; /* header/footer band, table header, sidebar */
  --ms-surface: #13161c; /* Muted Obsidian: cards, panels, dialogs */
  --ms-surface-raised: #1a1e26; /* Obsidian Raised: row hover, menus, popovers, toasts, tooltips */

  /* Text */
  --ms-text: #e4e7ec; /* 13.47-15.70:1 */
  --ms-text-secondary: #a3abb8; /* 7.22-8.41:1 */
  --ms-text-tertiary: #8a93a3; /* 5.39-6.28:1 on neutrals; avoid on tinted fills (4.52) */
  --ms-text-disabled: #646b7a; /* 3.12-3.64:1, inactive controls only (WCAG 1.4.3 exemption) */
  --ms-text-on-accent: #04110f; /* 13.85:1 on accent, 9.62:1 on accent-pressed */
  --ms-text-on-solid: #0b0d10; /* 8.72:1 on danger (solid destructive button) */

  /* Borders */
  --ms-border: rgba(228, 231, 236, 0.1); /* decorative only: card outline, row divider (1.27:1) */
  --ms-border-strong: rgba(228, 231, 236, 0.18); /* decorative only: table head rule, popover outline */
  --ms-border-control: #6b7385; /* boundary of input/select/checkbox/switch: 3.51-4.09:1 (WCAG 1.4.11) */
  --ms-border-control-hover: #8a93a3;

  /* Accent: interaction only (action, link, focus, active/selected state) */
  --ms-accent: #00f2fe; /* 12.03-14.02:1 */
  --ms-accent-hover: #24f4fe; /* color-mix(in srgb, accent 86%, #fff), the portfolio hover recipe */
  --ms-accent-pressed: #00cbd5;
  --ms-accent-subtle: #113037; /* selected row/item fill (accent 12% over surface); text 11.28:1 */

  /* Focus indicator: solid accent outline, 2px, offset 2px (gap shows the page colour) */
  --ms-focus-color: var(--ms-accent);
  --ms-focus-width: 2px;
  --ms-focus-offset: 2px;

  /* Semantic status: never colour alone, always icon + text */
  --ms-positive: #6ee7a0; /* 10.81-12.60:1 */
  --ms-positive-subtle: #1e2f2c; /* positive text on it 9.08:1 */
  --ms-warning: #f5c56d; /* 10.41-12.13:1 */
  --ms-warning-subtle: #2e2b26; /* 8.79:1 */
  --ms-danger: #ff8f70; /* 7.49-8.72:1 */
  --ms-danger-hover: #ff9f84;
  --ms-danger-subtle: #2f2526; /* 6.66:1 */
  --ms-info: #93a8ff; /* 7.38-8.60:1; blue-violet, kept 13.6+ dE2000 from the accent cyan */
  --ms-info-subtle: #222837; /* 6.51:1 */

  --ms-selection: #084d53; /* ::selection, accent 28% over bg; text 7.71:1 */
  --ms-scrim: rgba(4, 6, 8, 0.72); /* modal backdrop */
  --ms-media-halo: rgba(4, 6, 8, 0.72); /* outline behind marks drawn over camera frames */

  /* Data visualisation: categorical (order matters; 1-4 are the CVD-safest) */
  --ms-chart-1: #6eb9ff; /* azure */
  --ms-chart-2: #f8ba8a; /* peach */
  --ms-chart-3: #886fe2; /* indigo */
  --ms-chart-4: #cb83ab; /* mauve */
  --ms-chart-5: #cbbb2d; /* mustard */
  --ms-chart-6: #38b693; /* jade */
  --ms-chart-other: #646d7d; /* "Outros" bucket */
  --ms-chart-grid: var(--ms-border);
  --ms-chart-axis: var(--ms-text-tertiary);
  --ms-chart-crosshair: var(--ms-accent); /* hover/selection only: interaction */

  /* Sequential (azure, low to high; luminance strictly increasing).
     Cell labels: --ms-text on seq-1..3 (>=4.95:1), --ms-text-on-solid on seq-4..7 (>=4.93:1). */
  --ms-seq-1: #1d3753;
  --ms-seq-2: #294e76;
  --ms-seq-3: #336499;
  --ms-seq-4: #4983c3;
  --ms-seq-5: #64a2e7;
  --ms-seq-6: #8dc0fb;
  --ms-seq-7: #c1deff;

  /* Diverging (orange below the reference, azure above; midpoint near the canvas).
     Cell labels: --ms-text on neg-1, mid, pos-1; --ms-text-on-solid on the outer four (every label >=4.95:1). */
  --ms-div-neg-3: #fec396;
  --ms-div-neg-2: #d98d51;
  --ms-div-neg-1: #895324;
  --ms-div-mid: #3f4348;
  --ms-div-pos-1: #336499;
  --ms-div-pos-2: #67a5ea;
  --ms-div-pos-3: #b6d8ff;

  /* Code / JSON (all >= 6.01:1 on bg and bg-subtle; punctuation is the lowest) */
  --ms-code-bg: var(--ms-bg);
  --ms-code-text: var(--ms-text);
  --ms-code-key: #6eb9ff;
  --ms-code-string: #f8ba8a;
  --ms-code-number: #cbbb2d;
  --ms-code-literal: #cb83ab; /* true / false / null */
  --ms-code-punctuation: #8a93a3;

  /* Typography. One family; the stack resolves the same name in every stack:
     Next (next/font sets --font-ibm-plex-sans), Vite/Fontsource and
     self-hosted @font-face (both register "IBM Plex Sans Variable"). */
  --ms-font-sans:
    var(--font-ibm-plex-sans, "IBM Plex Sans Variable"), "IBM Plex Sans", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", sans-serif;
  --ms-font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;

  /* Weights: the font's axis ends at 700. No 800/900. */
  --ms-weight-regular: 400;
  --ms-weight-medium: 500;
  --ms-weight-semibold: 600;
  --ms-weight-bold: 700;

  /* Type scale. Fixed rem for UI text (density must not change with the
     viewport); fluid only for page title, display and KPI value. 12px floor. */
  --ms-text-micro: 0.75rem;
  --ms-text-micro--line-height: 1.45;
  --ms-text-fine: 0.8125rem;
  --ms-text-fine--line-height: 1.45;
  --ms-text-caption: 0.875rem;
  --ms-text-caption--line-height: 1.45;
  --ms-text-small: 0.9375rem;
  --ms-text-small--line-height: 1.55;
  --ms-text-body: 1rem;
  --ms-text-body--line-height: 1.6;
  --ms-text-lead: 1.125rem;
  --ms-text-lead--line-height: 1.6;
  --ms-text-h4: 1.125rem;
  --ms-text-h4--line-height: 1.35;
  --ms-text-h3: 1.25rem;
  --ms-text-h3--line-height: 1.3;
  --ms-text-h2: 1.5rem;
  --ms-text-h2--line-height: 1.25;
  --ms-text-h1: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem);
  --ms-text-h1--line-height: 1.15;
  --ms-text-kpi: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --ms-text-kpi--line-height: 1.1;
  --ms-text-display: clamp(2.25rem, 1.6rem + 2.8vw, 4rem); /* portfolio hero-title; app intro only */
  --ms-text-display--line-height: 1.05;
  --ms-tracking-display: -0.04em;
  --ms-tracking-heading: -0.03em;
  --ms-tracking-tight: -0.01em;

  /* Spacing: 4px grid, numeric names (portfolio refined-theme.css:4-13) */
  --ms-space-1: 0.25rem;
  --ms-space-2: 0.5rem;
  --ms-space-3: 0.75rem;
  --ms-space-4: 1rem;
  --ms-space-5: 1.25rem;
  --ms-space-6: 1.5rem;
  --ms-space-8: 2rem;
  --ms-space-10: 2.5rem;
  --ms-space-12: 3rem;
  --ms-space-16: 4rem;

  /* Radius encodes hierarchy */
  --ms-radius-xs: 6px; /* checkbox, badge, kbd, inline code, tooltip */
  --ms-radius-control: 10px; /* button, input, select, menu */
  --ms-radius-card: 16px; /* card, panel, dialog, toast */
  --ms-radius-feature: 20px; /* one featured block per page at most */
  --ms-radius-pill: 999px; /* switch track, avatar only */

  /* Elevation: tinted carbon ink, never pure black */
  --ms-shadow-ink: 4, 6, 8;
  --ms-shadow-sm: 0 8px 16px -14px rgba(var(--ms-shadow-ink), 0.42);
  --ms-shadow-md: 0 14px 28px -20px rgba(var(--ms-shadow-ink), 0.5);
  --ms-shadow-lg: 0 24px 46px -30px rgba(var(--ms-shadow-ink), 0.62);

  /* Motion: one curve carries the brand; exits accelerate and do not linger */
  --ms-ease-creative: cubic-bezier(0.16, 1, 0.3, 1);
  --ms-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ms-duration-micro: 160ms; /* hover, press, focus, colour change */
  --ms-duration-exit: 120ms; /* menu/popover/toast leaving */
  --ms-duration-reveal: 420ms; /* toast/panel/accordion entering */
  --ms-duration-orchestrate: 700ms; /* multi-element first load only */
  --ms-duration-data: 1200ms; /* first chart draw only; updates use reveal */

  /* Layout */
  --ms-layout-max: 78rem;
  --ms-layout-max-wide: 96rem; /* dense dashboards and tables */
  --ms-layout-padding: clamp(1rem, 5vw, 1.25rem);
  --ms-measure: 68ch;
  --ms-header-height: 4rem;
  --ms-control-height: 2.75rem; /* 44px: default target */
  --ms-control-height-dense: 2.25rem; /* 36px: pointer-fine toolbars and table rows only */

  /* Stacking */
  --ms-z-sticky: 10;
  --ms-z-header: 50;
  --ms-z-dropdown: 60;
  --ms-z-modal: 80;
  --ms-z-toast: 90;
  --ms-z-tooltip: 95;
  --ms-z-skip-link: 100;
}

@media (min-width: 1280px) {
  :root {
    --ms-layout-padding: clamp(1.5rem, 2vw, 2rem);
  }
}

/* 0.01ms, not 0: a zero-length transition never fires transitionend. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ms-duration-micro: 0.01ms;
    --ms-duration-exit: 0.01ms;
    --ms-duration-reveal: 0.01ms;
    --ms-duration-orchestrate: 0.01ms;
    --ms-duration-data: 0.01ms;
  }
}

/* ----------------------------- SECTION 2: base ---------------------------- */
:where(html) {
  color-scheme: dark;
  background-color: var(--ms-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:where(body) {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--ms-bg);
  color: var(--ms-text);
  font-family: var(--ms-font-sans);
  font-size: var(--ms-text-body);
  line-height: var(--ms-text-body--line-height);
  font-weight: var(--ms-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(*, *::before, *::after) {
  box-sizing: border-box;
}

:where(h1, h2, h3, h4) {
  margin: 0;
  color: var(--ms-text);
  font-weight: var(--ms-weight-semibold);
  text-wrap: balance;
}

:where(h1) {
  font-size: var(--ms-text-h1);
  line-height: var(--ms-text-h1--line-height);
  font-weight: var(--ms-weight-bold);
  letter-spacing: var(--ms-tracking-heading);
}

:where(h2) {
  font-size: var(--ms-text-h2);
  line-height: var(--ms-text-h2--line-height);
  letter-spacing: var(--ms-tracking-heading);
}

:where(h3) {
  font-size: var(--ms-text-h3);
  line-height: var(--ms-text-h3--line-height);
  letter-spacing: var(--ms-tracking-tight);
}

:where(h4) {
  font-size: var(--ms-text-h4);
  line-height: var(--ms-text-h4--line-height);
  letter-spacing: var(--ms-tracking-tight);
}

:where(p, li, dd, figcaption) {
  max-width: var(--ms-measure);
}

:where(h1, h2, h3, h4, p, dd, dt, figcaption) {
  overflow-wrap: anywhere;
}

/* 16px keeps iOS Safari from zooming into a focused field. */
:where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

:where(input, select, textarea) {
  font-size: var(--ms-text-body);
}

:where(a) {
  color: var(--ms-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

:where(code, kbd, samp, pre) {
  font-family: var(--ms-font-mono);
  font-size: 0.9em;
}

:where(table, td, th, output, data, time, .ms-num) {
  font-variant-numeric: tabular-nums lining-nums;
}

::selection {
  background-color: var(--ms-selection);
  color: var(--ms-text);
}

/* Outline, not box-shadow: forced-colors mode drops box-shadow but keeps
   outline. Visually identical to the portfolio --focus-ring. */
:focus-visible {
  outline: var(--ms-focus-width) solid var(--ms-focus-color);
  outline-offset: var(--ms-focus-offset);
}

/* Inside a clipping box (table cell, scroll region) an outset ring is cut. */
:where(.ms-focus-inset):focus-visible {
  outline-offset: calc(var(--ms-focus-width) * -1);
}

:where(main):focus-visible,
:where(#main-content):focus-visible {
  outline: none;
}

.ms-skip-link {
  position: absolute;
  inset-inline-start: var(--ms-space-4);
  inset-block-start: var(--ms-space-2);
  z-index: var(--ms-z-skip-link);
  padding: var(--ms-space-2) var(--ms-space-4);
  border-radius: var(--ms-radius-control);
  background-color: var(--ms-accent);
  color: var(--ms-text-on-accent);
  font-weight: var(--ms-weight-semibold);
  transform: translateY(-200%);
}

.ms-skip-link:focus,
.ms-skip-link:focus-visible {
  transform: none;
}

.ms-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}