/* ASER.TRADE design tokens. The one place colour, type, space, radius and motion are defined.
 * styles.css only ever refers to these by name. Palette: terminal-trincheras/marca/PALETA.md (2026-11-01).
 */
:root {
  color-scheme: dark;

  /* surfaces: near-black ground (#030504), graphite panels (#101413), borders (#292E2E) */
  --color-paper:    #030504;
  --color-paper-2:  #0a0d0c;
  --color-paper-3:  #101413;
  --color-paper-4:  #181d1c;
  --color-paper-5:  #222827;
  --color-shade:    #000000;
  --color-rule:     #292e2e;
  --color-rule-2:   #3a4140;
  --color-edge:     rgba(245, 255, 245, 0.12);

  /* ink: the silver of the mark */
  --color-ink:      #f5fff5;
  --color-ink-2:    #d4d6d5;
  --color-muted:    #a6a9a7;

  /* one accent: brand green. Selection, focus, links, the primary control. */
  --color-accent:     #35f33c;
  --color-accent-ink: #030504;
  --color-focus:      #64ff7c;
  --color-info:       #5aa9ff;

  /* the metal: silver lettering and the filled control (gradient of the logo kit) */
  --chrome-type: linear-gradient(180deg, #f5fff5 0%, #ebeeeb 38%, #a6a9a7 58%, #d4d6d5 72%, #f5fff5 100%);
  --chrome-soft: linear-gradient(180deg, #f5fff5 0%, #d4d6d5 45%, #a6a9a7 55%, #ebeeeb 100%);

  /* data colours: they mean something and are used for nothing else */
  --color-up:       #35f33c;
  --color-down:     #ff4d4d;
  --color-warn:     #ffb224;
  --color-caution:  #ffb224;
  --color-on-fill:  #030504;

  /* type: Inter for everything, JetBrains Mono for figures and addresses (vendored, no CDN) */
  --font-display: "Inter", "Inter Variable", system-ui, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-body:    "Inter", "Inter Variable", system-ui, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-outlier: "JetBrains Mono", ui-monospace, Consolas, "Cascadia Mono", monospace;
  --font-mono:    var(--font-outlier);

  --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-md: 0.875rem;
  --text-lg: 1rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-display: 1.75rem;

  /* space: 4-point scale */
  --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem;
  --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem;

  --radius-control: 6px; --radius-card: 8px; --radius-chip: 4px;
  --rule-hair: 1px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-press: 100ms; --dur-short: 160ms; --dur-medium: 280ms;

  --z-sticky: 5; --z-sticky-nav: 12; --z-sheet: 30; --z-toast: 40; --z-modal: 50;
  --banner-height: 30px;
  --side: 184px;

  /* names the older rules still use, pointed at the tokens above */
  --bg: var(--color-paper); --bg-2: var(--color-paper-2); --card: var(--color-paper-3); --card-2: var(--color-paper-4); --card-3: var(--color-paper-5);
  --line: var(--color-rule); --line-2: var(--color-rule-2);
  --ink: var(--color-ink); --ink-2: var(--color-ink-2); --muted: var(--color-muted);
  --up: var(--color-up); --up-dim: color-mix(in oklch, var(--color-up) 55%, var(--color-paper)); --down: var(--color-down); --warn: var(--color-warn);
  --info: var(--color-info); --violet: var(--color-info); --ai: var(--color-info);
  --material: var(--color-paper-2); --material-thick: var(--color-paper-2); --edge: var(--color-rule-2);
  --r: var(--radius-card); --shadow: none;
}
@media (prefers-contrast: more) {
  :root { --color-rule: #4a5251; --color-rule-2: #5e6765; --color-ink-2: #e6e9e7; --color-muted: #c4c7c5; }
}