/* ═══════════════════════════════════════════════════
   PROMPT — Light Mode Colors (light-colors.css)
   Light-mode color values. These are the :root defaults
   that dark-colors.css overrides via body.dark.

   PUT HERE:  Color variables — brand, semantic, neutrals,
              backgrounds, borders, text, shadows, glass,
              lines. Also light-mode ambient gradients.
   NOT HERE:  Structural tokens (spacing, radii, fonts,
              motion) → style.css. Component rules →
              components.css. Dark overrides → dark-colors.css.
   RULE:      No structural properties (font-size, padding,
              display, flex, border-radius, etc.) ever.
              This file is the MIRROR of dark-colors.css.
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Brand ── */
  --brand-amber: #FFB400;
  --brand-amber-strong: #B07A00;
  --brand-strong: #B07A00;
  --brand-amber-bg: rgba(255,180,0,0.14);
  --accent: #FFB400;
  --accent-hover: #FFB400;
  --brand-hover: #FFB400;
  --accent-subtle: rgba(255,180,0,0.06);

  /* ── Semantic ── */
  --green: #16a34a;
  --green-hover: #15803d;
  --green-bg: rgba(22,163,74,0.1);
  --green-subtle: rgba(22, 163, 74, 0.06);
  --red: #dc2626;
  --red-hover: #b91c1c;
  --red-bg: rgba(220,38,38,0.1);
  --red-subtle: rgba(220, 38, 38, 0.05);
  --amber: #d97706;
  --amber-bg: rgba(217,119,6,0.06);
  --amber-subtle: rgba(217, 119, 6, 0.06);
  --purple: #7C3AED;
  --purple-bg: rgba(124,58,237,0.10);
  --blue: #3b82f6;
  --blue-bg: rgba(59,130,246,0.12);
  --positive: #16A34A;
  --negative: #DC2626;
  --warning: #D97706;
  --warning-bg: rgba(217,119,6,0.10);
  --info: #2563EB;
  --info-bg: rgba(37,99,235,0.10);

  /* ── Extended accents ── */
  --accent-coral: #fb7185;
  --accent-teal: #14b8a6;
  --accent-magenta: #d946ef;
  --accent-slate: #64748b;

  /* ── Neutrals ── */
  --bg: #E9EBEF;
  --bg-2: #E1E3E9;
  --surface: #FFFFFF;
  --surface-2: #FAFAFA;
  --gray-50: #fafafa;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;

  /* ── Borders ── */
  --border: #e4e4e7;
  --border-card: rgba(0,0,0,0.06);
  --border-focus: #FFB400;

  /* ── Text ── */
  --text: #09090b;
  --text-secondary: #52525b;
  --text-muted: #71717A;
  --ink: #09090B; --ink-2: #52525B; --ink-3: #71717A; --ink-4: #A1A1AA; --ink-5: #D4D4D8;

  /* ── Shadows ── */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-card: none;
  --shadow-card-hover: none;

  /* RGB triple for the neutral score-circle (black on light, white on dark) */
  --score-base: 0,0,0;
  /* Markets score-ring: soft neutral track + a refined grey baseline arc (NOT
     pure black). Custom arc is brand gold (#FFB400) — pops against the grey track. */
  --ms-track: rgba(0,0,0,0.10);
  --ms-base: rgba(0,0,0,0.45);

  /* ── Glass ── */
  --glass-bg: rgba(255,255,255,0.70);
  --glass-border: #E4E4E7;
  --glass-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 40px -12px rgba(0,0,0,0.12);
  /* docked sticky token cell — the solid colour the frosted table renders as
     (--surface is too grey/dark next to the glass) + its right divider. */
  --dock-cell-bg: #FCFDFE;
  --dock-divider: rgba(0,0,0,0.14);

  /* ── Lines ── */
  --line-1: rgba(9,9,11,0.07);
  --line-2: rgba(9,9,11,0.11);
  --line-3: rgba(9,9,11,0.18);

  /* ── Interaction overlays ── */
  --hover-subtle: rgba(0,0,0,0.04);
  --hover-medium: rgba(0,0,0,0.06);
  --hover-strong: rgba(0,0,0,0.08);
  --overlay-light: rgba(0,0,0,0.03);
  /* Unified surface-hover background — tiny amber tint in light (dark uses a neutral white lift). */
  --hover-bg: rgba(255,180,0,0.08);
  --overlay-heavy: rgba(0,0,0,0.1);

  /* ── Brand opacity variants ── */
  --brand-amber-18: rgba(255,180,0,0.18);
  --brand-amber-10: rgba(255,180,0,0.10);
  --brand-amber-08: rgba(255,180,0,0.08);

  /* ── Glass surfaces ── */
  --white-50: rgba(255,255,255,0.5);
  --white-70: rgba(255,255,255,0.7);
  --white-78: rgba(255,255,255,0.78);
  --white-80: rgba(255,255,255,0.8);
  --white-85: rgba(255,255,255,0.85);
  --white-90: rgba(255,255,255,0.9);
  --white-92: rgba(255,255,255,0.92);

  /* ── Signal category colors ── */
  --cat-yellow: #FBBF24;
  --cat-orange: #F59E0B;
  --cat-amber-deep: #B45309;
  --cat-gold: #EAB308;
  --cat-purple: #8B5CF6;
  --cat-indigo: #6366F1;
  --cat-violet: #A855F7;
  --cat-pink: #EC4899;
  --cat-coral: #FB923C;
  --cat-emerald: #10B981;
  --cat-teal: #14B8A6;
  --cat-sky: #0EA5E9;
  --cat-rose: #F43F5E;
  --cat-lavender: #C4B5FD;

  /* ── Dark text on amber ── */
  --text-on-brand: #0E0E0E;

  /* ── Light text (for forced-light elements in dark context) ── */
  --text-light: #F5F5F7;
}

/* ── Light-mode glass: frosted translucent cards (mirrors the dark glass —
   same --glass-bg + backdrop-filter blur(17px) saturate(160%) over the same
   card surfaces, with a light hairline border instead of a white one). ── */
body:not(.dark) .td-header,
body:not(.dark) #tvChart, body:not(.dark) .tv-chart, body:not(.dark) .chart-container,
body:not(.dark) #moves-table,
body:not(.dark) .val-row-1 > div,
body:not(.dark) .td-pillars > div, body:not(.dark) #val-row2 > div, body:not(.dark) #val-row3 > div,
body:not(.dark) .rfpp, body:not(.dark) #weights-modal .rfpp,
body:not(.dark) .sidebar, body:not(.dark) .topbar,
body:not(.dark) .sb-promote, body:not(.dark) a.sb-promote,
body:not(.dark) .sig-strip-default, body:not(.dark) #sig-strip-default,
body:not(.dark) .card, body:not(.dark) .stat-card, body:not(.dark) .eco-card, body:not(.dark) .g-card, body:not(.dark) .pipeline-card,
body:not(.dark) .pr-card-wrap, body:not(.dark) .td-design-card,
body:not(.dark) table,
body:not(.dark) .section .td-grid-2 > div, body:not(.dark) .section .td-grid-3 > div,
body:not(.dark) [style*="background:var(--surface)"], body:not(.dark) [style*="background: var(--surface)"] {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(17px) saturate(160%);
  backdrop-filter: blur(17px) saturate(160%);
  border-color: rgba(0,0,0,0.07) !important;
}

/* ── Light-mode ambient gradients ── */
body::before {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  width: 440px; height: 440px;
  top: -80px; left: -80px;
  background: radial-gradient(circle, rgba(254,215,170,0.5) 0%, transparent 70%);
}

/* ── AI badge (gold bg, dark text) ── */
.pr-ai-badge { background: #FFB400; color: #0E0E0E; }
.pr-ai-badge svg { stroke: #fff; }

/* Ambient gradient — warm milky glow blending with cool bg */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 1000px 700px at 85% -8%, rgba(255,180,0,0.045), transparent 55%),
    radial-gradient(ellipse 800px 600px at 0% 95%, rgba(255,200,50,0.025), transparent 55%);
}

/* ── Light theme refinements ── */

/* No box-shadows — borders only */

/* Links section row separators — subtle */
.section a[href] { border-color: rgba(0,0,0,0.04); }

/* Metric pills (MCap, FDV, Vol) — softer borders */
.td-mcap-right > div { border-color: rgba(0,0,0,0.06); }

/* Amber buttons: no bg change on hover — arrow-only interaction */
.btn-primary:hover, button[type="submit"]:hover,
.rf-btn-tiny-solid:hover, .tb-wallet-connect:hover,
.wt-btn-primary:hover {
  background: var(--brand-amber);
}

/* ── Pinned sidebar must be OPAQUE (no backdrop-filter) ──
   The sidebar is position:sticky + full height. With backdrop-filter it re-samples
   the body's amber ambient gradients every scroll frame and the sticky layer
   tears/"peels" during heavy scrolling (amber bleeds into it). A solid surface
   removes the whole compositing artifact. (Topbar keeps its glass — short, top-edge,
   doesn't exhibit the tear.) Overrides the shared glass rule above. */
body:not(.dark) .sidebar {
  background: var(--surface) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}