/* Benmore palette + design tokens.

   Light is the default; dark opts in via <html data-theme="dark"> (or
   system prefers-color-scheme: dark). Toggle persists in localStorage
   as `benmore-theme`.

   Every color, radius, height, and font size used by the platform UI
   should resolve through a token defined here. components.css then
   reads those tokens and exposes them via shared classes (.btn,
   .card, .badge, .tbl, .empty, etc.). Pages should never hardcode
   hex codes or per-page <style> blocks for buttons / cards / badges.
   If a token is missing for the thing you're building, add it here.

   Naming convention follows shadcn / Radix: --primary, --fg, --bg,
   plus -soft-bg / -soft-fg / -soft-border variants for tinted surfaces.
*/

:root {
  /* Surfaces. Cloudflare-style: a near-white page bg with pure-white
     elevated surfaces (cards, dropdowns, modals). Subtle = used for
     card headers, hover backgrounds, and segmented controls. */
  --bg:                 #fafafa;
  --bg-elevated:        #ffffff;
  --bg-subtle:          #f5f5f6;
  --bg-inset:           #ebebed;
  --bg-overlay:         rgba(15,15,20,0.50);

  /* Text */
  --fg:                 #1c1c20;
  --fg-muted:           #4b4b54;
  --fg-subtle:          #7a7a85;
  --fg-inverse:         #ffffff;

  /* Borders. Very subtle by default — Cloudflare uses near-imperceptible
     dividers everywhere. -strong only when a real visual separation is
     needed (card outline, sidebar boundary). */
  --border:             rgba(0,0,0,0.06);
  --border-strong:      rgba(0,0,0,0.10);
  --border-hover:       rgba(0,0,0,0.18);

  /* Brand */
  --wordmark-from:      #18181b;
  --wordmark-to:        #52525b;
  --link:               #1e40af;
  --link-hover:         #1d4ed8;
  --code-bg:            rgba(58,108,240,0.10);

  /* Shadows */
  --shadow-sm:          0 1px 2px rgba(0,0,0,0.04);
  --shadow:             0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md:          0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:          0 20px 40px rgba(0,0,0,0.10);

  /* Primary (Benmore blue). -soft-* used by tinted surfaces. */
  --primary:            #3a6cf0;
  --primary-hover:      #2952d1;
  --primary-fg:         #ffffff;
  --primary-soft-bg:    rgba(58,108,240,0.08);
  --primary-soft-fg:    #1e40af;
  --primary-soft-border:rgba(58,108,240,0.22);

  /* Semantic colors. Solid values for icons / text, -soft-* for tinted
     pill / badge surfaces. Every page-level use of green / red / yellow
     / cyan should resolve to one of these — no raw hex codes. */
  --success:            #16a34a;
  --success-fg:         #ffffff;
  --success-soft-bg:    rgba(22,163,74,0.10);
  --success-soft-fg:    #15803d;
  --success-soft-border:rgba(22,163,74,0.22);

  --warning:            #d97706;
  --warning-fg:         #ffffff;
  --warning-soft-bg:    rgba(217,119,6,0.10);
  --warning-soft-fg:    #b45309;
  --warning-soft-border:rgba(217,119,6,0.22);

  --danger:             #dc2626;
  --danger-fg:          #ffffff;
  --danger-soft-bg:     rgba(220,38,38,0.08);
  --danger-soft-fg:     #b91c1c;
  --danger-soft-border: rgba(220,38,38,0.22);

  --info:               #0284c7;
  --info-fg:            #ffffff;
  --info-soft-bg:       rgba(2,132,199,0.10);
  --info-soft-fg:       #0369a1;
  --info-soft-border:   rgba(2,132,199,0.22);

  --neutral-soft-bg:    rgba(0,0,0,0.04);
  --neutral-soft-fg:    #52525b;
  --neutral-soft-border:rgba(0,0,0,0.10);

  /* Sticky "glass" nav bar background — translucent over page. */
  --nav-bg:             rgba(255,255,255,0.78);
  --nav-border:         rgba(0,0,0,0.06);

  /* Typography */
  --font-sans:          'Source Sans 3', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display:       'Poppins', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:          ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  --text-xs:            12px;
  --text-sm:            13px;
  --text-base:          14px;
  --text-md:            15px;
  --text-lg:            16px;
  --text-xl:            18px;
  --text-2xl:           22px;
  --text-3xl:           28px;

  /* Radii */
  --radius-sm:          4px;
  --radius:             6px;
  --radius-md:          8px;
  --radius-lg:          10px;
  --radius-xl:          12px;
  --radius-2xl:         14px;
  --radius-full:        9999px;

  /* Component heights — one canonical size per role. */
  --h-input:            32px;
  --h-btn-sm:           26px;
  --h-btn:              32px;
  --h-btn-lg:           40px;

  /* Spacing */
  --space-1:            4px;
  --space-2:            8px;
  --space-3:            10px;
  --space-4:            12px;
  --space-5:            14px;
  --space-6:            18px;
  --space-7:            24px;
  --space-8:            32px;

  /* Motion */
  --t-fast:             0.12s;
  --t-norm:             0.18s;
}

[data-theme="dark"] {
  --bg:                 #000000;
  --bg-elevated:        #070707;
  --bg-subtle:          #18181b;
  --bg-inset:           #1c1c1f;
  --bg-overlay:         rgba(0,0,0,0.70);

  --fg:                 #ffffff;
  --fg-muted:           #e4e4e7;
  --fg-subtle:          #a1a1aa;
  --fg-inverse:         #18181b;

  --border:             rgba(255,255,255,0.06);
  --border-strong:      rgba(255,255,255,0.14);
  --border-hover:       rgba(255,255,255,0.22);

  --wordmark-from:      #ffffff;
  --wordmark-to:        #888888;
  --link:               #7596f5;
  --link-hover:         #a5bbf8;
  --code-bg:            rgba(58,108,240,0.10);

  --shadow-sm:          0 1px 2px rgba(0,0,0,0.30);
  --shadow:             0 4px 16px rgba(0,0,0,0.40);
  --shadow-md:          0 8px 24px rgba(0,0,0,0.40);
  --shadow-lg:          0 24px 60px rgba(0,0,0,0.50);

  --primary:            #3a6cf0;
  --primary-hover:      #5582f3;
  --primary-fg:         #ffffff;
  --primary-soft-bg:    rgba(58,108,240,0.14);
  --primary-soft-fg:    #7596f5;
  --primary-soft-border:rgba(58,108,240,0.36);

  --success:            #4ade80;
  --success-fg:         #052e16;
  --success-soft-bg:    rgba(74,222,128,0.10);
  --success-soft-fg:    #6ee7a0;
  --success-soft-border:rgba(74,222,128,0.25);

  --warning:            #fbbf24;
  --warning-fg:         #1f1300;
  --warning-soft-bg:    rgba(251,191,36,0.10);
  --warning-soft-fg:    #fcd34d;
  --warning-soft-border:rgba(251,191,36,0.25);

  --danger:             #ef4444;
  --danger-fg:          #ffffff;
  --danger-soft-bg:     rgba(239,68,68,0.10);
  --danger-soft-fg:     #fca5a5;
  --danger-soft-border: rgba(239,68,68,0.25);

  --info:               #60a5fa;
  --info-fg:            #062235;
  --info-soft-bg:       rgba(96,165,250,0.10);
  --info-soft-fg:       #93c5fd;
  --info-soft-border:   rgba(96,165,250,0.25);

  --neutral-soft-bg:    rgba(255,255,255,0.04);
  --neutral-soft-fg:    #e4e4e7;
  --neutral-soft-border:rgba(255,255,255,0.10);

  --nav-bg:             rgba(0,0,0,0.70);
  --nav-border:         rgba(255,255,255,0.06);
}

html, body { background: var(--bg); color: var(--fg); }

/* Scrollbar (WebKit / Blink). Plays with the active theme so we don't
   end up with a dark scrollbar over a light page. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
::-webkit-scrollbar-corner { background: var(--bg); }
* { scrollbar-color: var(--border-strong) var(--bg); scrollbar-width: thin; }
