/* ============================================================
   Woodpecker 3.0 — Design Tokens
   Zénithal: dark, calm, one focal point per screen.
   Color is state, not decoration (Z7).
   ============================================================ */

:root {
  /* --- Surfaces (dark slate) --- */
  --bg:            #0B0E13;
  --bg-elev:       #11161E;
  --surface:       #161C26;
  --surface-2:     #1C242F;
  --surface-3:     #232C38;
  --overlay:       rgba(6, 8, 12, 0.74);

  /* --- Borders --- */
  --border:        #28313D;
  --border-strong: #3A4654;
  --border-soft:   #1E2630;   /* the only section separator (Z3) */

  /* --- Text --- */
  --text:          #E7EDF4;
  --text-muted:    #93A0B0;
  --text-dim:      #5E6B7B;
  --text-faint:    #424C58;

  /* --- Accent (amber-gold) — ONE primary action / active selection per screen (Z7) --- */
  --accent:        #E0A526;
  --accent-2:      #F2B938;
  --accent-dim:    #8C6A1E;
  --accent-soft:   rgba(224, 165, 38, 0.14);
  --accent-line:   rgba(224, 165, 38, 0.40);
  --accent-ink:    #1a1306;   /* readable text on amber fill */

  /* --- Trading semantics (P&L + BUY/SELL only) --- */
  --long:          #3FB950;
  --long-soft:     rgba(63, 185, 80, 0.16);
  --short:         #F85149;
  --short-soft:    rgba(248, 81, 73, 0.16);
  --warn:          #D29922;
  --info:          #388BFD;
  --neutral:       #6E7681;

  /* --- Brand accents (woodpecker / wood) — used sparingly, never for data --- */
  --wood:          #8B6F47;   /* tan, warm separator / brand border */
  --wood-soft:     rgba(139, 111, 71, 0.16);
  --bird-red:      #D62828;   /* woodpecker red — reserved for the mascot/logo only */

  /* --- Typography --- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

  /* Three tiers only (Z4): A focal, B body, C meta */
  --fs-2xs: 10px;
  --fs-xs:  11px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  19px;
  --fs-2xl: 24px;   /* Tier A */
  --fs-3xl: 40px;   /* Tier A hero */

  --lh-tight: 1.15;
  --lh: 1.45;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  --tracking-wide: 0.07em;
  --tracking-xwide: 0.14em;

  /* --- Radii --- */
  --r-xs: 5px;
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* --- Spacing scale (4px base) --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;     /* section rhythm (Z3) */
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;

  /* --- Shadows (reserved for FAB + bottom-sheet/drawer only, Z3) --- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 6px 20px rgba(0,0,0,0.5);
  --shadow-fab: 0 8px 22px rgba(0,0,0,0.55), 0 0 0 1px var(--accent-line);

  /* --- Layout --- */
  --nav-h: 64px;
  --topbar-h: 52px;
  --max-w: 1180px;
  --gutter: 16px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 340ms;

  /* --- Z-index scale --- */
  --z-nav: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-hud: 50;
  --z-fab: 110;
}

/* Light theme (opt-in) */
[data-theme="light"] {
  --bg: #F6F7F9;
  --bg-elev: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F0F2F5;
  --surface-3: #E6E9EE;
  --overlay: rgba(20,24,30,0.5);
  --border: #DDE2E8;
  --border-strong: #C4CBD4;
  --border-soft: #E7EAEE;
  --text: #14191F;
  --text-muted: #5A6675;
  --text-dim: #8A94A2;
  --text-faint: #B5BCC5;
}