/* ============================================================
   FILE   : app/static/css/base/_tokens.css
   TAG    : [BASE] design-tokens
   PURPOSE: Single source of truth for the "Spatial Glassmorphism"
            theme. Every color, blur strength, radius and shadow
            used across the whole site (admin panel + storefront)
            is defined here as a CSS custom property.

            Load this file FIRST, before app.css / storefront_base.css
            and any page-specific stylesheet, so every other file can
            just consume var(--glass-surface) etc.
   ============================================================ */

:root{
  /* ---- brand ---- */
  --primary:            #2563eb;
  --primary-hover:       #1d4ed8;
  --primary-soft:        rgba(37,99,235,.18);
  --accent:              #f59e0b;
  --success:             #22c55e;
  --danger:              #ef4444;
  --warning:             #f59e0b;
  --info:                #38bdf8;

  /* ---- spatial glass surfaces ---- */
  --glass-blur:           18px;
  --glass-blur-strong:    28px;
  --glass-radius-sm:      12px;
  --glass-radius-md:      18px;
  --glass-radius-lg:      26px;
  --glass-border-width:   1px;

  --sidebarWidth: 300px;
}

/* =====================================================
   DARK (default) — deep-space background, frosted panels
===================================================== */
body[data-theme="dark"],
html[data-theme="dark"]{
  --bg:                  #060b16;
  --bgSoft:               #0b1424;

  /* glass surfaces: translucent so the blurred background blobs
     show through, matched with a soft border + highlight */
  --glass-surface:        rgba(18, 27, 46, .55);
  --glass-surface-strong: rgba(18, 27, 46, .72);
  --glass-border:         rgba(255,255,255,.09);
  --glass-highlight:      rgba(255,255,255,.06);
  --glass-shadow:         0 20px 60px rgba(0,0,0,.45);

  /* legacy aliases kept so existing rules using var(--card) etc.
     automatically pick up the glass look without every file
     needing to be rewritten */
  --card:                 var(--glass-surface);
  --card-bg:              var(--glass-surface);
  --border:               var(--glass-border);
  --border-soft:          var(--glass-border);

  --text:                 #ffffff;
  --textSoft:              #94a3b8;
  --text-main:             #ffffff;
  --text-muted:            #94a3b8;
  --text-dark:             #e2e8f0;

  --orange:               #f59e0b;
  --feature-btn-bg:       rgba(15,23,42,.55);
  --hero-grad-1:          #111827;
  --hero-grad-2:          #1e293b;

  --btn-primary-bg:       #3b82f6;
  --btn-primary-hover:    #60a5fa;
  --btn-primary-active:   #2563eb;
  --btn-primary-text:     #ffffff;
  --btn-primary-border:   #60a5fa;
  --btn-primary-shadow:   rgba(59,130,246,.35);

  --blob-1:               #2563eb;
  --blob-2:               #7c3aed;
  --blob-3:               #0ea5e9;
}

/* =====================================================
   LIGHT — soft frosted-glass over a pale gradient
===================================================== */
body[data-theme="light"],
html[data-theme="light"]{
  --bg:                  #eef2f9;
  --bgSoft:               #f7f9fc;

  --glass-surface:        rgba(255,255,255,.55);
  --glass-surface-strong: rgba(255,255,255,.75);
  --glass-border:         rgba(15,23,42,.08);
  --glass-highlight:      rgba(255,255,255,.65);
  --glass-shadow:         0 20px 45px rgba(15,23,42,.12);

  --card:                 var(--glass-surface);
  --card-bg:              var(--glass-surface);
  --border:               var(--glass-border);
  --border-soft:          var(--glass-border);

  --text:                 #0f172a;
  --textSoft:              #64748b;
  --text-main:             #0f172a;
  --text-muted:            #64748b;
  --text-dark:             #334155;

  --feature-btn-bg:       rgba(255,255,255,.55);
  --hero-grad-1:          #f1f5f9;
  --hero-grad-2:          #e2e8f0;

  --btn-primary-bg:       #2563eb;
  --btn-primary-hover:    #1d4ed8;
  --btn-primary-active:   #1e40af;
  --btn-primary-text:     #ffffff;
  --btn-primary-border:   #2563eb;
  --btn-primary-shadow:   rgba(37,99,235,.25);

  --blob-1:               #93c5fd;
  --blob-2:               #c4b5fd;
  --blob-3:               #7dd3fc;
}