/* ============================================================
   TPREDMARKET — THEME TOKENS
   Pure monochrome. Apple-minimal. No gradients.
   Yes = green. No = red. Everything else = black & white.
   ============================================================ */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg-0: #000000;
  --bg-1: #0a0a0a;
  --bg-2: #121212;
  --bg-3: #1a1a1a;
  --bg-4: #242424;
  --bg-hover:  rgba(255,255,255,0.05);
  --bg-active: rgba(255,255,255,0.09);

  /* Glass */
  --glass-bg:           rgba(16,16,16,0.72);
  --glass-bg-strong:    rgba(16,16,16,0.88);
  --glass-border:       rgba(255,255,255,0.10);

  /* Borders */
  --border-1: #1c1c1c;
  --border-2: #2a2a2a;
  --border-3: #3d3d3d;

  /* Text */
  --text-1: #ffffff;
  --text-2: #a3a3a3;
  --text-3: #737373;
  --text-4: #525252;
  --text-inverse: #000000;

  /* Accent = pure white on dark */
  --accent:        #ffffff;
  --accent-hover:  #e5e5e5;
  --accent-soft:   rgba(255,255,255,0.08);
  --accent-glow:   rgba(255,255,255,0.18);

  /* Yes / No — the ONLY colors in the entire UI */
  --yes:       #16a34a;
  --yes-hover: #15803d;
  --yes-soft:  rgba(22,163,74,0.12);
  --yes-text:  #4ade80;
  --no:        #dc2626;
  --no-hover:  #b91c1c;
  --no-soft:   rgba(220,38,38,0.12);
  --no-text:   #f87171;

  /* Semantic (monochrome) */
  --success: #ffffff;
  --warn:    #a3a3a3;
  --danger:  #ffffff;
  --info:    #ffffff;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.60);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.55);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.60);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.70);
  --shadow-xl: 0 40px 100px rgba(0,0,0,0.80);

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* Layout */
  --shell-max: 1440px;
  --content-max: 720px;
  --sidebar-w: 240px;
  --topbar-h: 60px;
}

[data-theme="light"] {
  color-scheme: light;

  --bg-0: #ffffff;
  --bg-1: #fafafa;
  --bg-2: #f4f4f4;
  --bg-3: #ededed;
  --bg-4: #e2e2e2;
  --bg-hover:  rgba(0,0,0,0.04);
  --bg-active: rgba(0,0,0,0.07);

  --glass-bg:        rgba(255,255,255,0.72);
  --glass-bg-strong: rgba(255,255,255,0.88);
  --glass-border:    rgba(0,0,0,0.08);

  --border-1: #e8e8e8;
  --border-2: #d6d6d6;
  --border-3: #b0b0b0;

  --text-1: #000000;
  --text-2: #525252;
  --text-3: #737373;
  --text-4: #a3a3a3;
  --text-inverse: #ffffff;

  --accent:        #000000;
  --accent-hover:  #1a1a1a;
  --accent-soft:   rgba(0,0,0,0.06);
  --accent-glow:   rgba(0,0,0,0.14);

  --yes:       #16a34a;
  --yes-hover: #15803d;
  --yes-soft:  rgba(22,163,74,0.10);
  --yes-text:  #15803d;
  --no:        #dc2626;
  --no-hover:  #b91c1c;
  --no-soft:   rgba(220,38,38,0.10);
  --no-text:   #b91c1c;

  --success: #000000;
  --warn:    #737373;
  --danger:  #000000;
  --info:    #000000;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.07);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.10);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.14);
  --shadow-xl: 0 40px 100px rgba(0,0,0,0.18);
}