/*
 * Styx dashboard design tokens. Every color, font, radius, spacing, shadow and motion value the dashboard uses
 * lives here; app.css only refers to these names. To rebrand, change the values below (or load another file that
 * sets the same names after this one). Two themes (T105): dark is the default (near-black and deep blue surfaces,
 * cream text, the Styx orange as the one accent); light is paper and ink with the Styx blue, as on styxtrade.com.
 * theme.js sets <html data-theme> before the CSS paints; only the color tokens differ between the two. Every text
 * pair is checked for WCAG AA contrast by web/app/test/theme.test.mjs. Square corners, Space Grotesk for headings.
 */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/space-grotesk-latin.woff2?v=484060d1a341") format("woff2");
}
:root {
  color-scheme: dark;

  /* Color: surfaces and ink (dark, the default) */
  --color-bg: #0a0c14;            /* page: near-black */
  --color-surface: #10152a;       /* cards: deep blue */
  --color-surface-2: #171d36;     /* inset areas, inputs, hovers */
  --color-ink: #f1eadb;           /* main text: cream */
  --color-ink-2: #bdb7a9;         /* secondary text */
  --color-ink-3: #9c978a;         /* hints, labels */
  --color-line: #232a48;          /* hairlines */
  --color-line-strong: #363f66;

  /* Color: the one accent (focus, active nav, meters, links) */
  --color-accent: #ff6a2b;        /* Styx orange */
  --color-accent-ink: #0a0c14;    /* text on the accent */
  --color-accent-soft: #2a1912;   /* tinted background */

  /* Color: meaning (kept muted so the accent stays the only loud color) */
  --color-up: #4cc38a;
  --color-up-soft: #10281f;
  --color-down: #ff7d6e;
  --color-danger-ink: #0a0c14;    /* text on a danger button */
  --color-danger-soft: #2e1619;
  --color-warn: #e8b85c;
  --color-warn-soft: #2a2314;
  --color-buy: #9aa5ff;           /* trade side: buy */
  --color-sell: #ff8a57;          /* trade side: sell */
  --color-focus: #ff6a2b;         /* focus rings, the presence line, the caret */
  --color-scrim: rgba(3, 4, 10, 0.72);  /* behind dialogs */
  --shadow-card: none;
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.55);

  /* Type */
  --font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --tracking-tight: -0.02em;
  --tracking-label: 0.06em;

  /* Space (4px steps) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Shape */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 999px;
  --border-width: 1px;

  /* Layout */
  --sidebar-width: 232px;
  --content-max: 1080px;
  --tabbar-height: 64px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration: 120ms;
}

/* Light: paper and ink, the Styx blue as the one accent, orange for focus. Only colors change. */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f6f1e6;            /* page: paper */
  --color-surface: #fbf8f1;       /* cards */
  --color-surface-2: #f1eadb;     /* inset areas, inputs, hovers: cream */
  --color-ink: #14161c;
  --color-ink-2: #5b574f;
  --color-ink-3: #69645a;
  --color-line: #e2d9c7;
  --color-line-strong: #cfc4ae;
  --color-accent: #2338e0;        /* Styx blue */
  --color-accent-ink: #f1eadb;
  --color-accent-soft: #e3e6fb;
  --color-up: #1a7148;
  --color-up-soft: #e1f0e7;
  --color-down: #b33a2e;
  --color-danger-ink: #ffffff;
  --color-danger-soft: #f7e4e1;
  --color-warn: #8a5a00;
  --color-warn-soft: #f7efdc;
  --color-buy: #2338e0;
  --color-sell: #b5440f;
  --color-focus: #ff6a2b;
  --color-scrim: rgba(10, 10, 9, 0.45);
  --shadow-card: none;
  --shadow-pop: 0 12px 32px rgba(17, 17, 16, 0.12);
}