/* ── Nodge Design Tokens ──────────────────────────────────────────────────
   Vendored from nodge-platform's platform/public/theme/variables.css. Copied
   rather than imported because this service shares no code with the platform —
   it has to work when the platform does not exist.
   ────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Satoshi';
  src: url('/assets/Satoshi-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* Dark mode (default) */
:root {
  --color-text:          #ddd4c5;
  --color-text-muted:    #9e9283;
  --color-bg:            #161412;
  --color-surface:       #1e1b18;
  --color-border:        #2e2a26;
  --color-primary:       #cf5e3f;
  --color-primary-hover: #b8502f;
  --color-primary-20:    hsl(13, 60%, 53%, 20%);
  --color-secondary-20:  hsl(280, 21%, 46%, 20%);
  --color-secondary:     #a885b9;
  --color-accent:        #8aa26d;
  --color-error:         #e05252;
  --color-error-bg:      rgba(224, 82, 82, 0.1);

  --color-accent-20:     rgba(138, 162, 109, 0.2);
  --color-muted-20:      rgba(158, 146, 131, 0.2);
  --color-overlay:       rgba(0, 0, 0, 0.6);
  --color-on-primary:    #ffffff;

  --color-hover:         rgba(255, 255, 255, 0.06);
  --color-active:        #161412;

  /* One console-only token. The three-state palette is terracotta = act now,
     purple = informational, sage = good — and an amber "known, but look at it"
     verdict is none of those. Named rather than inlined, per the design rules. */
  --color-warning:       #d4a154;
  --color-warning-20:    rgba(212, 161, 84, 0.2);

  --font-ui:   'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-code: 'JetBrains Mono', 'Fira Code', monospace;

  --radius:    10px;
  --radius-sm: 6px;
}

/* Light mode (browser preference — applies when theme = system) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-text:          #3a3122;
    --color-text-muted:    #7a6f62;
    --color-bg:            #fbfbfe;
    --color-surface:       #ffffff;
    --color-border:        #e2ddd7;
    --color-primary:       #c04f30;
    --color-primary-hover: #a84228;
    --color-secondary:     #9271a2;
    --color-accent:        #7a925d;
    --color-error:         #c0392b;
    --color-error-bg:      rgba(192, 57, 43, 0.08);
    --color-accent-20:     rgba(122, 146, 93, 0.2);
    --color-muted-20:      rgba(122, 111, 98, 0.2);
    --color-overlay:       rgba(0, 0, 0, 0.5);
    --color-on-primary:    #ffffff;
    --color-hover:         rgba(0, 0, 0, 0.04);
    --color-active:        #ffffff;
    --color-warning:       #a9762c;
    --color-warning-20:    rgba(169, 118, 44, 0.14);
  }
}

/* Light mode (forced via user preference) */
:root[data-theme="light"] {
  --color-text:          #3a3122;
  --color-text-muted:    #7a6f62;
  --color-bg:            #fbfbfe;
  --color-surface:       #ffffff;
  --color-border:        #e2ddd7;
  --color-primary:       #c04f30;
  --color-primary-hover: #a84228;
  --color-secondary:     #9271a2;
  --color-accent:        #7a925d;
  --color-error:         #c0392b;
  --color-error-bg:      rgba(192, 57, 43, 0.08);
  --color-accent-20:     rgba(122, 146, 93, 0.2);
  --color-muted-20:      rgba(122, 111, 98, 0.2);
  --color-overlay:       rgba(0, 0, 0, 0.5);
  --color-on-primary:    #ffffff;
  --color-hover:         rgba(0, 0, 0, 0.04);
  --color-active:        #ffffff;
  --color-warning:       #a9762c;
  --color-warning-20:    rgba(169, 118, 44, 0.14);
}