/* ═══════════════════════════════════════════════════════════
   AdRanker — theme.css  |  Deep Ocean Teal Design System
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Figtree:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ── Page backgrounds — deep ocean teal world ── */
  --bg0: #071E26;   /* deepest — body bg            */
  --bg1: #0A2B36;   /* cards, panels                */
  --bg2: #0D3340;   /* elevated cards               */
  --bg3: #0F3D4A;   /* hover state surfaces         */

  /* ── Accent palette (from uploaded image) ── */
  --teal:   #2A9BAD;
  --sage:   #7BBFB5;
  --sage2:  #B2D8D1;
  --amber:  #D4A50E;   /* ← previously-black text → NOW AMBER */
  --amber2: #A07C0B;
  --orange: #DC7B1A;
  --rust:   #C4341A;
  --rust2:  #9E2B14;

  /* ── Text on dark backgrounds ── */
  --t1: rgba(255,255,255,0.92);   /* primary   */
  --t2: rgba(255,255,255,0.58);   /* secondary */
  --t3: rgba(255,255,255,0.32);   /* hint      */

  /* ── Surfaces ── */
  --card:    rgba(255,255,255,0.06);
  --card2:   rgba(255,255,255,0.10);
  --border:  rgba(255,255,255,0.10);
  --border2: rgba(255,255,255,0.18);

  /* ── Legacy clay vars (kept for spoke panels that still use them) ── */
  --ink:         #1E1B4B;
  --clay-white:  #FEFCFF;
  --clay-full:
    inset 3px 4px 9px rgba(255,255,255,0.82),
    inset -2px -3px 7px rgba(0,0,0,0.09),
    6px 8px 16px rgba(0,0,0,0.18),
    16px 24px 48px rgba(0,0,0,0.10);
  --clay-light:
    inset 2px 3px 6px rgba(255,255,255,0.72),
    inset -1px -2px 5px rgba(0,0,0,0.07),
    3px 4px 10px rgba(0,0,0,0.14);
  --clay-indent:
    inset 3px 4px 10px rgba(0,0,0,0.15),
    inset -2px -3px 7px rgba(255,255,255,0.55);
  --clay-btn:
    inset 2px 3px 5px rgba(255,255,255,0.38),
    inset -1px -2px 4px rgba(0,0,0,0.22),
    0 6px 18px rgba(0,0,0,0.28),
    0 2px 5px rgba(0,0,0,0.15);
  --clay-hover:
    inset 3px 4px 9px rgba(255,255,255,0.82),
    inset -2px -3px 7px rgba(0,0,0,0.09),
    10px 14px 28px rgba(0,0,0,0.22),
    20px 30px 60px rgba(0,0,0,0.13);

  /* ── Fonts ── */
  --font-display: 'Figtree', system-ui, sans-serif;
  --font-serif:   'Instrument Serif', Georgia, serif;
  --font-body:    'Figtree', system-ui, sans-serif;

  /* ── Border radius ── */
  --r-card:  22px;
  --r-inner: 14px;
  --r-btn:   16px;
  --r-sm:    10px;

  /* ── Status ── */
  --good:   #059669;
  --warn:   #D97706;
  --bad:    #DC2626;
  --blue:   #3B82F6;
  --purple: #7C3AED;
  --ember:  #EA580C;

  /* ── Glow filters ── */
  --glow-teal:   drop-shadow(0 0 5px rgba(42,155,173,.7));
  --glow-amber:  drop-shadow(0 0 5px rgba(212,165,14,.7));
  --glow-rust:   drop-shadow(0 0 5px rgba(196,52,26,.7));
}

/* Compatibility aliases for analysis.js inline styles */
:root {
  --muted:    var(--t3);
  --surface2: var(--bg2);
  --bg:       var(--bg0);
  --red:      var(--rust);
  --text:     var(--t1);
  --accent:   var(--teal);
  --surface:  var(--bg1);
}