/* ── Screenpods — always dark ──────────────────────────────
   Single source of truth. No light mode. No @media overrides.
   Values from design/dark-mode.pen variables.
   ─────────────────────────────────────────────────────── */
:root {
  /* ── Brand */
  --primary:        #5E6AD2;
  --primary-hover:  #6E7AE2;
  --primary-subtle: rgba(94, 106, 210, 0.20);
  --primary-border: rgba(94, 106, 210, 0.40);

  --green:  #4DA771;
  --danger: #D9534F;
  --yellow: #D4A843;

  /* ── Surfaces (darkest → lightest) */
  --bg:          #09090B;   /* base — page bg, screens bg */
  --bg-subtle:   #161618;   /* surface — cards, inputs    */
  --bg-tinted:   #1C1C1F;   /* elevated — modals          */
  --bg-elevated: #232326;   /* hover — active items       */

  /* ── Named layout areas */
  --bg-topbar:  #1a1a24;
  --bg-sidebar: #111113;
  --bg-panel:   #16161f;
  --bg-screens: #0e0e14;

  /* ── Text */
  --text-primary:   #EDEDEF;
  --text-secondary: #8B8B8E;
  --text-muted:     rgba(255, 255, 255, 0.35);

  /* ── Borders */
  --border:        rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.10);

  /* ── Screens panel */
  --screens-text:     rgba(255, 255, 255, 0.85);
  --screens-text-dim: rgba(255, 255, 255, 0.40);
  --screens-border:   rgba(255, 255, 255, 0.06);

  /* ── Legacy alias */
  --accent: var(--primary);

  /* ── Campfire component bridge */
  --color-bg:            var(--bg-panel);
  --color-message-bg:    rgba(255, 255, 255, 0.04);
  --color-text:          var(--text-primary);
  --color-text-reversed: var(--bg-subtle);    /* button/input surfaces */
  --color-link:          var(--primary);
  --color-border:        var(--border);
  --color-border-dark:   rgba(255, 255, 255, 0.06);
  --color-border-darker: rgba(255, 255, 255, 0.10);
  --color-negative:      var(--danger);
  --color-positive:      var(--green);
  --color-selected:      var(--primary-subtle);
  --color-selected-dark: rgba(94, 106, 210, 0.30);
  --color-alert:         var(--yellow);

  /* ── lch bridge for Campfire components (dark values) */
  --lch-black:        100% 0 0;
  --lch-white:        0% 0 0;
  --lch-gray:         25.2% 0 0;
  --lch-gray-dark:    30.12% 0 0;
  --lch-gray-darker:  44.95% 0 0;
  --lch-blue:         72.25% 0.16 248;
  --lch-blue-light:   28.11% 0.053 248;
  --lch-blue-dark:    42.25% 0.07 248;
  --lch-orange:       70% 0.2 44;
  --lch-red:          73.8% 0.184 29.18;
  --lch-green:        75% 0.21 141.89;
  --lch-always-black: 0% 0 0;
}