/* Design tokens for the static scenes (dark only), mirroring the app's src/app/tokens.css. */
:root,
.dark {
  color-scheme: dark;

  --pf-bg:            #0b0b0e;
  --pf-bg-panel:      #131316;
  --pf-bg-elevated:   #1b1b1f;
  --pf-bg-raised:     #242429;
  --pf-chart-grid:    #1f1f24;

  --pf-border-faint:  #131316;
  --pf-border:        #232327;
  --pf-border-strong: #303036;

  --pf-text-hero:     #fafafa;
  --pf-text:          #e4e4e7;
  --pf-text-2:        #d4d4d8;
  --pf-text-3:        #a1a1aa;
  --pf-text-4:        #71717a;

  --pf-gain:          #4ade80;  --pf-gain-rgb: 74 222 128;   --pf-gain-surface: #1a2b23;
  --pf-loss:          #f87171;  --pf-loss-rgb: 248 113 113;  --pf-loss-surface: #450a0a;

  --pf-radius-sm: 4px; --pf-radius: 6px; --pf-radius-lg: 10px; --pf-radius-xl: 16px;
  --pf-shadow-pop: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;

  --pf-focus: rgba(228, 228, 231, 0.6);

  --num-up:              var(--pf-gain);
  --num-up-rgb:          var(--pf-gain-rgb);
  --num-up-surface:      var(--pf-gain-surface);
  --num-down:            var(--pf-loss);
  --num-down-rgb:        var(--pf-loss-rgb);
  --num-down-surface:    var(--pf-loss-surface);

  --canvas:          var(--pf-bg);
  --surface:         var(--pf-bg);
  --surface-raised:  var(--pf-bg-elevated);
  --surface-hover:   var(--pf-bg-elevated);
  --muted-surface:   var(--pf-bg-panel);
  --surface-strong:  var(--pf-bg-raised);

  --ink:    var(--pf-text);
  --ink-hi: var(--pf-text-hero);
  --ink-2:  var(--pf-text-2);
  --muted:  var(--pf-text-3);
  --faint:  var(--pf-text-4);

  --line:       var(--pf-border-strong);
  --line-soft:  var(--pf-border);
  --line-faint: var(--pf-border-faint);

  --good: var(--num-up);
  --bad:  var(--num-down);
  --warn: var(--pf-text-2);
  --good-tint: rgb(var(--num-up-rgb) / 0.14);
  --bad-tint:  rgb(var(--num-down-rgb) / 0.14);
  --warn-tint: rgb(255 255 255 / 0.06);

  --accent:       #ffffff;
  --accent-hover: var(--pf-text);
  --accent-ink:   var(--pf-bg);
  --accent-tint:  rgb(255 255 255 / 0.08);

  --action:     #ffffff;
  --action-ink: var(--pf-bg);

  --plate:     var(--pf-bg);
  --plate-ink: var(--pf-text-hero);

  --ring: #ffffff;

  --r-sm:    6px;
  --r-md:    10px;
  --r-panel: 16px;
  --r-lg:    24px;
  --r-full:  9999px;

  --shadow-card:    none;
  --shadow-raised:  0 1px 2px rgb(0 0 0 / 0.40), 0 12px 32px rgb(0 0 0 / 0.50);
  --shadow-overlay: 0 20px 25px -5px rgb(0 0 0 / 0.50), 0 8px 10px -6px rgb(0 0 0 / 0.40);
  --shadow-panel:   0 22px 55px -24px rgb(0 0 0 / 0.72);
  --shadow-tight:   0 3px 10px -8px rgb(0 0 0 / 0.55);

  --scrim: rgb(11 11 14 / 0.72);

  --background: var(--canvas);
  --foreground: var(--ink);

  --card: var(--surface);
  --card-foreground: var(--ink);
  --popover: var(--surface);
  --popover-foreground: var(--ink);

  --primary: var(--accent);
  --primary-foreground: var(--accent-ink);
  --accent-foreground: var(--accent-ink);
  --accent-shadow: var(--accent-hover);

  --secondary: var(--surface-raised);
  --secondary-foreground: var(--ink);
  --secondary-shadow: var(--line);

  --muted-foreground: var(--muted);

  --border: var(--line);
  --input: var(--line);

  --destructive: var(--bad);
  --destructive-foreground: var(--action-ink);
  --danger: var(--bad);

  --sidebar: var(--canvas);
  --sidebar-foreground: var(--ink);
  --sidebar-primary: var(--accent);
  --sidebar-primary-foreground: var(--accent-ink);
  --sidebar-accent: var(--surface-raised);
  --sidebar-accent-foreground: var(--ink);
  --sidebar-border: var(--line);
  --sidebar-ring: var(--ring);

  --radius: 0.75rem;

  --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px;
  --fs-26: 26px; --fs-32: 32px; --fs-40: 40px;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --ls-tight: -0.02em; --ls-display: -0.03em; --ls-hero: -0.035em;
  --ls-label: 0.08em; --ls-label-wide: 0.1em;
  --lh-tight: 1.1; --lh-snug: 1.35; --lh-body: 1.5;

  --s-2: 2px; --s-3: 3px; --s-4: 4px; --s-6: 6px; --s-8: 8px; --s-10: 10px; --s-12: 12px;
  --s-14: 14px; --s-16: 16px; --s-20: 20px; --s-24: 24px; --s-28: 28px; --s-32: 32px;
  --s-40: 40px; --s-48: 48px; --s-56: 56px; --s-64: 64px;

  --fr-sidebar-w: 15.25rem;
  --fr-sidebar-rail-w: 4rem;
  --fr-topbar-h: 4.25rem;
  --fr-statusbar-h: 36px;
  --fr-sheet-w: 70vw;
  --fr-sheet-max: 70rem;
  --fr-page-max: 1180px;
  --fr-page-gap: 0.75rem;
  --fr-page-end: 4rem;
  --fr-control-h: 2.25rem;
  --fr-row-h: 2.5rem;

  --z-cover: 11; --z-topbar: 12; --z-sidebar: 20; --z-statusbar: 30;
  --z-sheet: 75; --z-modal: 1100; --z-menu: 1105; --z-toast: 1110; --z-tooltip: 1120; --z-skip: 1300;
}