/* Dexipedia design tokens (layer dx.tokens).
   Naming: --dx-{category}-{role}[-{variant}]. Raw hex/px/length literals are
   permitted here because they live in custom-property *definitions* (the
   tokenization point). Components consume the semantic slots (--dx-ink-*,
   --dx-surface-*, --dx-line); never raw hex directly. Values are ported verbatim
   from the prototype's handoff/dexipedia.css; the dx prefix is the only change.
   Tokens whose value the prototype inlined into a component rule (control heights,
   the micro-label sizes, ring widths, motion shifts, shell metrics) are promoted
   here with their exact values so the cascade stays token-only. */

:root {
  /* --- Brand color: navy (structure) + amber (signal) --- */
  --dx-navy-900: #081325;
  --dx-navy-800: #0A1730;
  --dx-navy-700: #0F2742;
  --dx-navy-600: #10294C;
  --dx-navy-500: #102C52;
  --dx-amber-500: #F5A623;
  --dx-amber-400: #FFB02E;
  --dx-amber-300: #FFC04D;
  --dx-amber-600: #E08C00;
  --dx-amber-700: #C77F00;

  /* --- Semantic: light workbench (default scheme) --- */
  --dx-surface-page: #F0F3FA;
  --dx-surface-raised: #FFFFFF;
  --dx-surface-sunken: #F7F9FC;
  --dx-line: #E4E9F1;
  --dx-line-strong: #C9D3E2;
  --dx-ink: #15243E;
  --dx-ink-soft: #5B6B82;
  --dx-ink-faint: #7C8BA3;
  --dx-ink-ghost: #9AA8BE;

  /* --- Semantic: feedback --- */
  --dx-positive: #15803D;
  --dx-positive-bright: #4ADE80;
  --dx-negative: #D7263D;
  --dx-negative-soft: #FF8A9A;

  /* --- Dark "card moment" scheme (see .dx-theme-inspector) --- */
  --dx-dk-surface-page: #0B1424;
  --dx-dk-surface-raised: #0E1B31;
  --dx-dk-line: #1C2C48;
  --dx-dk-line-strong: #243759;
  --dx-dk-ink: #FFFFFF;
  --dx-dk-ink-soft: #AFC0DB;
  --dx-dk-ink-faint: #7E92AE;
  --dx-dk-ink-ghost: #54688A;

  /* --- Text-on-fill (solid ink over the amber primary fill) --- */
  --dx-on-amber: #2A1A00;

  /* --- Type. Two families only: UI + numerals/labels --- */
  --dx-font-ui: "Instrument Sans", system-ui, sans-serif;
  --dx-font-data: "IBM Plex Mono", ui-monospace, monospace;

  /* Fluid major-third-ish scale; clamps keep 1920->1280 sane */
  --dx-text-3xs: 0.5625rem;                                 /* 9px   table micro-caps */
  --dx-text-2xs: 0.625rem;                                  /* 10px  micro-caps label */
  --dx-text-xs: 0.6875rem;                                  /* 11px  labels   */
  --dx-text-sm: 0.78125rem;                                 /* 12.5px meta    */
  --dx-text-base: 0.875rem;                                 /* 14px  body     */
  --dx-text-md: 0.953125rem;                                /* 15.25px emphasized */
  --dx-text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);  /* card titles    */
  --dx-text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.6875rem); /* section heads  */
  --dx-text-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.625rem);  /* page heroes    */
  --dx-text-num-lg: clamp(1.5rem, 1.3rem + 0.9vw, 1.9375rem); /* big figures  */

  --dx-leading-tight: 1.15;
  --dx-leading-normal: 1.55;
  --dx-tracking-tight: -0.02em;
  --dx-tracking-label: 0.12em;
  --dx-measure: 65ch;

  /* --- Space: 4px base; t-shirt names, not numbers --- */
  --dx-space-2xs: 0.25rem;
  --dx-space-xs: 0.5rem;
  --dx-space-sm: 0.75rem;
  --dx-space-md: 1.125rem;
  --dx-space-lg: 1.75rem;
  --dx-space-xl: 2.75rem;
  --dx-space-2xl: 4rem;

  /* --- Radius: one nested-pair per surface depth --- */
  --dx-radius-sm: 7px;    /* chips, kbd, inner tiles   */
  --dx-radius-md: 10px;   /* buttons, inputs           */
  --dx-radius-lg: 16px;   /* cards, panels             */
  --dx-radius-xl: 24px;   /* hero bands, modals        */
  --dx-radius-pill: 999px;

  /* --- Elevation: ambient + key, tinted to the navy ink --- */
  --dx-shadow-1: 0 1px 2px rgb(15 30 60 / 0.04);
  --dx-shadow-2: 0 4px 14px rgb(15 30 60 / 0.08);
  --dx-shadow-3: 0 18px 50px rgb(15 30 60 / 0.14);
  --dx-shadow-amber: 0 8px 26px rgb(224 140 0 / 0.35);

  /* --- Control + shell metrics (prototype inlined these into rules) --- */
  --dx-control-h: 40px;       /* btn / input height        */
  --dx-control-h-sm: 32px;    /* btn-sm height             */
  --dx-sidebar-w: 232px;      /* app-shell sidebar column  */
  --dx-page-max: 1480px;      /* page max inline size      */
  --dx-card-min: 218px;       /* card-grid minmax floor    */

  /* --- Hairline border (the prototype's ubiquitous 1px solid) --- */
  --dx-hairline: 1px;

  /* --- Focus / selection ring metrics --- */
  --dx-ring-width: 2px;
  --dx-ring-offset: 2px;
  --dx-ring-spread: 3px;

  /* --- :target scroll inset --- */
  --dx-scroll-margin-target: 5ex;

  /* --- Motion shifts (the prototype's translateY nudges) --- */
  --dx-press-shift: 1px;
  --dx-hover-lift: -1px;
  --dx-card-lift: -3px;

  /* --- Modal scrim blur radius --- */
  --dx-scrim-blur: 6px;

  /* --- Motion: fast for state, slower for space --- */
  --dx-ease-snap: cubic-bezier(0.2, 0, 0, 1);
  --dx-dur-state: 150ms;
  --dx-dur-move: 280ms;

  accent-color: var(--dx-amber-500);
}

/* Dark scheme is a remap, not a fork: components that read the semantic slots
   restyle themselves inside any .dx-theme-inspector. This dark scope is a
   Dexipedia-specific divergence (the sibling libraries are light-only). */
.dx-theme-inspector {
  --dx-surface-page: var(--dx-dk-surface-page);
  --dx-surface-raised: var(--dx-dk-surface-raised);
  --dx-surface-sunken: var(--dx-navy-900);
  --dx-line: var(--dx-dk-line);
  --dx-line-strong: var(--dx-dk-line-strong);
  --dx-ink: var(--dx-dk-ink);
  --dx-ink-soft: var(--dx-dk-ink-soft);
  --dx-ink-faint: var(--dx-dk-ink-faint);
  --dx-ink-ghost: var(--dx-dk-ink-ghost);
  --dx-positive: var(--dx-positive-bright);
  --dx-negative: var(--dx-negative-soft);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dx-dur-state: 0ms; --dx-dur-move: 0ms; }
}