/*
 * CANDLE WARS shared brand tokens.
 *
 * This file is deliberately framework-free. The React site loads it before
 * its bundled stylesheet; the phone and terminal shells can consume the same
 * contract without copying colours or font declarations into their builds.
 */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/BricolageGrotesque-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/BricolageGrotesque-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/InstrumentSans-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/InstrumentSans-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/InstrumentSans-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/InstrumentSans-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Neutral institutional dark: no blue-grey dashboard wash. */
  --cw-bg: #07080a;
  --cw-bg-raised: #0b0d10;
  --cw-surface: #101318;
  --cw-surface-raised: #151920;
  --cw-surface-elevated: #1a1f27;

  --cw-border: rgba(232, 237, 243, 0.1);
  --cw-border-strong: rgba(232, 237, 243, 0.18);

  --cw-text: #f2f5f7;
  --cw-text-secondary: #b6bec8;
  --cw-text-muted: #858f9b;

  /* Brand red is structural. Market state keeps its own semantic colours. */
  --cw-brand: #e33a4e;
  --cw-brand-hover: #f04d60;
  --cw-brand-ink: #160408;
  --cw-brand-wash: rgba(227, 58, 78, 0.1);
  --cw-brand-line: rgba(227, 58, 78, 0.42);

  /* Interface accent is deliberately separate from the institutional mark.
     A trader may personalise selection/focus chrome without changing what
     Candle Wars is, or borrowing the red/green/amber market-state language. */
  --cw-accent: #2dd4b8;
  --cw-accent-hover: #52e3cc;
  --cw-accent-ink: #031311;
  --cw-accent-wash: rgba(45, 212, 184, 0.1);
  --cw-accent-line: rgba(45, 212, 184, 0.42);

  --cw-positive: #36cfa5;
  --cw-negative: #e33a4e;
  --cw-warning: #d8a84e;
  --cw-information: #6ea8fe;
  --cw-focus: #ff6b7b;
  --cw-chart-grid: #25303d;
  --cw-chart-axis: #788594;

  --cw-font-display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --cw-font-body: "Instrument Sans", Arial, sans-serif;
  --cw-font-data: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  --cw-space-1: 4px;
  --cw-space-2: 8px;
  --cw-space-3: 12px;
  --cw-space-4: 16px;
  --cw-space-5: 24px;
  --cw-space-6: 32px;
  --cw-space-7: 48px;
  --cw-space-8: 64px;
  --cw-space-9: 96px;

  --cw-radius-sm: 4px;
  --cw-radius-md: 8px;
  --cw-radius-lg: 12px;

  --cw-control-compact: 32px;
  --cw-control-default: 40px;
  --cw-control-touch: 48px;

  --cw-shadow-elevated:
    0 1px 2px rgba(0, 0, 0, 0.46),
    0 22px 56px -32px rgba(0, 0, 0, 0.94);
}

/* User-selectable palettes stay dark and preserve every trading semantic.
   data-theme remains reserved for the dormant Quanta template runtime; the
   live product owns data-cw-theme so the two systems cannot overwrite one
   another. */
:root[data-cw-theme="obsidian-teal"] {
  --cw-accent: #2dd4b8;
  --cw-accent-hover: #52e3cc;
  --cw-accent-ink: #031311;
  --cw-accent-wash: rgba(45, 212, 184, 0.1);
  --cw-accent-line: rgba(45, 212, 184, 0.42);
  --cw-focus: #6be9d4;
}

:root[data-cw-theme="midnight-cobalt"] {
  --cw-bg: #06080d;
  --cw-bg-raised: #0a0e16;
  --cw-surface: #0f1520;
  --cw-surface-raised: #151d2a;
  --cw-surface-elevated: #1b2635;
  --cw-accent: #6ea8fe;
  --cw-accent-hover: #8dbbff;
  --cw-accent-ink: #050c17;
  --cw-accent-wash: rgba(110, 168, 254, 0.1);
  --cw-accent-line: rgba(110, 168, 254, 0.44);
  --cw-focus: #9fc7ff;
  --cw-chart-grid: #25334a;
}

:root[data-cw-theme="carbon-violet"] {
  --cw-bg: #08070b;
  --cw-bg-raised: #0d0b12;
  --cw-surface: #14111a;
  --cw-surface-raised: #1a1622;
  --cw-surface-elevated: #211b2b;
  --cw-accent: #aa8bff;
  --cw-accent-hover: #bea7ff;
  --cw-accent-ink: #0d0719;
  --cw-accent-wash: rgba(170, 139, 255, 0.1);
  --cw-accent-line: rgba(170, 139, 255, 0.44);
  --cw-focus: #c8b5ff;
  --cw-chart-grid: #352d43;
}

html {
  font-synthesis: none;
  font-variant-numeric: lining-nums tabular-nums;
}