/* =========================================================
   SPHINKS · Design Tokens
   Light = default. Dark via <html data-theme="dark">.
   ========================================================= */

:root {
  /* Surfaces & text */
  --sx-paper:   #F6F6F3;  /* page background */
  --sx-card:    #FFFFFF;  /* card / panel background */
  --sx-ink:     #111113;  /* primary text, active nav, outlines */
  --sx-muted:   #55555E;  /* secondary text (7:1 on paper) */
  --sx-edge:    #111113;  /* 2px outlines */
  --sx-shadow:  #111113;  /* hard offset shadow color */
  --sx-soft:    #E8E7E2;  /* tracks, dividers, subtle chips */
  --sx-on-ink:  #FFFFFF;  /* text on --sx-ink fills */

  /* Lorcana ink colors (same in both themes) */
  --sx-amber:    #F4B223;
  --sx-amethyst: #7B3FA0;
  --sx-emerald:  #2E9E55;
  --sx-ruby:     #D7303A;
  --sx-sapphire: #1F6FC5;
  --sx-steel:    #8A8F98;
  --sx-orange:   #F07F22;  /* only used in the drip band */

  /* Semantic */
  --sx-win:      var(--sx-emerald);
  --sx-loss-mark: var(--sx-ruby);
  --sx-primary:  var(--sx-amber);   /* primary CTA fill, text stays --sx-text-on-color */
  --sx-text-on-color: #111113;      /* text on amber / emerald / ruby fills */
  --sx-text-on-dark-color: #FFFFFF; /* text on sapphire / amethyst fills */

  /* Typography */
  --sx-font-sans: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --sx-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sx-fs-h1: clamp(48px, 9vw, 80px);
  --sx-fs-h2: 24px;
  --sx-fs-kpi: 48px;
  --sx-fs-body: 16px;
  --sx-fs-lead: 18px;
  --sx-fs-small: 13px;
  --sx-fs-eyebrow: 12px;
  --sx-tracking-eyebrow: 0.24em;
  --sx-tracking-wordmark: 0.34em;

  /* Shape */
  --sx-border: 2px;
  --sx-radius-card: 20px;
  --sx-radius-box: 14px;
  --sx-radius-pill: 999px;
  --sx-offset: 6px;        /* card shadow offset */
  --sx-offset-btn: 4px;    /* button shadow offset */

  /* Layout */
  --sx-max-width: 1280px;
  --sx-gutter: 32px;
  --sx-gap: 24px;
  --sx-touch: 44px;        /* minimum touch target */
}

[data-theme="dark"] {
  --sx-paper:  #0E0F13;
  --sx-card:   #17181E;
  --sx-ink:    #F2F1EC;
  --sx-muted:  #A9A9B3;
  --sx-edge:   #3A3B45;
  --sx-shadow: #000000;
  --sx-soft:   #262730;
  --sx-on-ink: #0E0F13;
}