/*
 * 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). The Styx look, matching styxtrade.com: paper and ink, the Styx blue as the
 * one accent, orange for focus, 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") format("woff2");
}
:root {
  /* Color: surfaces and ink */
  --color-bg: #f6f1e6;            /* page: paper */
  --color-surface: #fbf8f1;       /* cards */
  --color-surface-2: #f1eadb;     /* inset areas, inputs, hovers: cream */
  --color-ink: #14161c;           /* main text */
  --color-ink-2: #5b574f;         /* secondary text */
  --color-ink-3: #8c877c;         /* hints, labels */
  --color-line: #e2d9c7;          /* hairlines */
  --color-line-strong: #cfc4ae;

  /* Color: the one accent (buttons, focus, active nav, meters) */
  --color-accent: #2338e0;        /* Styx blue */
  --color-accent-ink: #f1eadb;    /* text on the accent: cream */
  --color-accent-soft: #e3e6fb;   /* tinted background */

  /* Color: meaning (kept muted so the accent stays the only loud color) */
  --color-up: #1d7a4f;
  --color-down: #b33a2e;
  --color-warn: #8a5a00;
  --color-warn-soft: #f7efdc;
  --color-danger-soft: #f7e4e1;
  --color-focus: #ff6a2b;         /* orange, as on the site */

  /* 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;
  --shadow-card: none;
  --shadow-pop: 0 12px 32px rgba(17, 17, 16, 0.12);

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

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

/* Dark: ink with the same blue and orange. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0e0f14;
    --color-surface: #15171e;
    --color-surface-2: #1c1f28;
    --color-ink: #f1eadb;
    --color-ink-2: #b4b3ad;
    --color-ink-3: #7d7c76;
    --color-line: #262624;
    --color-line-strong: #34342f;
    --color-accent: #6f80ff;
    --color-accent-ink: #0e0f14;
    --color-accent-soft: #1b2040;
    --color-up: #4cb884;
    --color-down: #e0705f;
    --color-warn: #e0b45a;
    --color-warn-soft: #2a2314;
    --color-danger-soft: #2e1916;
    --shadow-card: none;
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.5);
  }
}