/* ═══════════════════════════════════════════════════════════════
   SANETRIX — Design Tokens (single source of truth)
   ═══════════════════════════════════════════════════════════════
   All colors, gradients, shadows, radii, easing and layout
   primitives live here. Both the marketing landing and the
   public/app stylesheets consume these tokens via var(...).

   Naming convention (canonical):
     --bg, --bg-card, --bg-alt, --bg-input
     --text, --text-muted, --text-secondary
     --border, --border-strong
     --accent, --accent2, --success, --danger, --warning
     --gradient, --gradient-soft, --gradient-warm
     --shadow-sm, --shadow, --shadow-lg, --shadow-xl, --shadow-glow
     --nav-height, --container, --radius-*, --ease

   Legacy aliases (kept so old class names in landing.css keep
   working without a 2k-line rewrite). Prefer the canonical names
   in any new code.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand palette (raw) ─────────────────────────────────── */
    --brand-blue:    #4fc3f7;
    --brand-violet:  #7c4dff;
    --brand-cyan:    #02B0A4;
    --brand-teal:    #1C6077;
    --brand-lavender:#6C72AF;
    --brand-purple:  #51237E;
    --brand-navy:    #013067;

    /* ── Surfaces ────────────────────────────────────────────── */
    --bg:        #f8fafb;
    --bg-card:   #ffffff;
    --bg-alt:    #f0f3f7;
    --bg-input:  #f0f3f7;

    /* ── Text ────────────────────────────────────────────────── */
    --text:           #1a1f2e;
    --text-muted:     #5f6b7a;
    --text-secondary: #8892a4;
    --text-primary:   var(--text);

    /* ── Borders & accents ───────────────────────────────────── */
    --border:        rgba(0, 40, 100, .08);
    --border-strong: rgba(0, 40, 100, .14);
    --accent:        #0288d1;
    --accent2:       #7c4dff;
    --accent-rgb:    2, 136, 209;
    --success:       #10b981;
    --danger:        #ef4444;
    --warning:       #f59e0b;

    /* ── Gradients (UNIFIED brand gradient = blue → violet) ──── */
    --gradient:       linear-gradient(135deg, #4fc3f7, #7c4dff);
    --gradient-soft:  linear-gradient(135deg, rgba(2, 136, 209, .06), rgba(124, 77, 255, .04));
    --gradient-warm:  linear-gradient(135deg, #f59e0b, #ef4444);
    --gradient-hero:  linear-gradient(180deg, #f8fafb 0%, #eef2f8 100%);

    /* ── Shadows ─────────────────────────────────────────────── */
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, .04);
    --shadow:       0 2px 16px rgba(0, 0, 0, .06);
    --shadow-lg:    0 8px 30px rgba(0, 0, 0, .08);
    --shadow-xl:    0 20px 50px rgba(0, 0, 0, .12);
    --shadow-glow:  0 0 0 4px rgba(79, 195, 247, .14);

    /* ── Layout primitives ───────────────────────────────────── */
    --nav-height: 64px;
    --container:  1280px;
    --radius-sm:  8px;
    --radius:     12px;
    --radius-lg:  18px;
    --radius-xl:  24px;
    --ease:       cubic-bezier(.4, 0, .2, 1);

    /* ══════════════════════════════════════════════════════════
       Legacy aliases (landing.css uses --c-*, --r, --grad-*)
       Maps old names to new tokens so we don't rewrite 2k lines.
       Prefer canonical names in new code.
       ══════════════════════════════════════════════════════════ */
    --c-bg:       var(--bg);
    --c-surface:  var(--bg-card);
    --c-card:     var(--bg-card);
    --c-text:     var(--text);
    --c-muted:    var(--text-muted);
    --c-subtle:   var(--bg-alt);
    --c-border:   var(--border);
    --c-border2:  var(--border-strong);
    --c-accent:   var(--accent);
    --c-cyan:     var(--brand-cyan);
    --c-green:    var(--brand-lavender);
    --c-purple:   var(--brand-purple);
    --grad-main:  var(--gradient);
    --grad-warm:  var(--gradient-warm);
    --grad-hero:  var(--gradient-hero);
    --shadow-card:var(--shadow);
    --r:          var(--radius-lg);
    --r-xl:       var(--radius-xl);
}

/* ═══════════════════════════════════════════════════════════════
   DARK THEME — overrides only the values that change.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --bg:        #050810;
    --bg-card:   #0f1525;
    --bg-alt:    #1a2035;
    --bg-input:  #1a2035;

    --text:           #f0f4ff;
    --text-muted:     #8892a4;
    --text-secondary: #5f6b7a;

    --border:        rgba(79, 195, 247, .10);
    --border-strong: rgba(79, 195, 247, .18);
    --accent:        #4fc3f7;
    --accent-rgb:    79, 195, 247;

    --gradient-soft: linear-gradient(135deg, rgba(79, 195, 247, .12), rgba(124, 77, 255, .08));
    --gradient-hero: radial-gradient(ellipse 120% 80% at 50% -10%, rgba(2, 176, 164, .10) 0%, transparent 60%), #050810;

    --shadow-sm:  0 1px 3px rgba(0, 0, 0, .25);
    --shadow:     0 1px 3px rgba(0, 0, 0, .3);
    --shadow-lg:  0 8px 30px rgba(0, 0, 0, .25);
    --shadow-xl:  0 20px 50px rgba(0, 0, 0, .4);
    --shadow-glow:0 0 30px rgba(2, 176, 164, .10);
}