/* ═══════════════════════════════════════════════════════════════════════════
   CLAJAMA Design Tokens — CANONICAL (app surface)

   Single source of truth for design values on clajama.com.
   Loaded FIRST in base.html (before clajama-app.css), so every page —
   app shell, admin, auth, blog — shares one token vocabulary.

   Value authority: design_system/brands/clajama/tokens.css
   (block sites additionally load responsive-vars.css + clajama-blocks-vars.css)

   Naming convention:
     --color-*   → canonical names (block CSS + DESIGN_STANDARD.md RULE 3)
     short names → aliases (app legacy family, resolves to same values here;
                   clajama-app.css may re-tint its own short family for the
                   app's glassmorphism identity — that is intentional).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── SURFACE — 3 levels (never pure black/white) ── */
  --color-base:          #07070B;
  --color-surface:       #0E1018;
  --color-raised:        #13152A;

  --bg:                  var(--color-base);
  --bg-deep:             var(--color-base);
  --bg-soft:             var(--color-surface);
  --bg-surface:          var(--color-raised);
  --surface:             var(--color-surface);
  --raised:              var(--color-raised);

  /* ── FOREGROUND — 4-level ramp ── */
  --color-text-primary:   #D8D9E2;
  --color-text-secondary: rgba(168, 169, 184, 0.75);
  /* STAGED 2026-08-11 (review before deploy): 0.45 → 0.72 fixes WCAG AA —
     2.51:1→4.60:1 on raised, 2.57:1→4.87:1 on base (normal text needs ≥4.5:1). */
  --color-text-muted:     rgba(168, 169, 184, 0.72);

  --text-primary:   var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted:     var(--color-text-muted);

  /* ── BORDER — 2 levels ── */
  --color-border:         rgba(255, 255, 255, 0.08);
  --color-border-subtle:  rgba(255, 255, 255, 0.04);

  --border:          var(--color-border);
  --border-subtle:   var(--color-border-subtle);
  --border-light:    var(--color-border);
  --border-medium:   var(--color-border);
  --border-strong:   rgba(255, 255, 255, 0.14);

  /* ── ACCENT — single brand accent (purple) ── */
  --color-accent:       #7B4DFF;
  --color-accent-hover: #9C6BFF;
  --color-accent-tint:  rgba(123, 77, 255, 0.08);
  --color-accent-on:    #0f0f0d;   /* FG when accent is the background */

  --accent:           var(--color-accent);
  --accent-hover:     var(--color-accent-hover);
  --accent-mid:       var(--color-accent-hover);
  --accent-tint:      var(--color-accent-tint);
  --accent-on:        var(--color-accent-on);
  --accent-soft:      var(--color-accent-tint);
  --accent-muted:     color-mix(in oklab, var(--accent), transparent 40%);
  --accent-text:      var(--accent);
  --accent-border:    color-mix(in oklab, var(--accent), transparent 60%);
  --accent-purple:    var(--accent);
  --accent-purple-mid: var(--accent-hover);
  --accent-purple-tint: var(--accent-tint);
  --accent-glow:      #B38CFF;
  --accent-cyan:      #00ffe0;     /* deprecated — kept for legacy refs */

  /* Extended palette (secondary hues used across app surfaces) */
  --violet:        #8b5cf6;
  --violet-soft:   #a855f7;
  --info:          #3b82f6;
  --cyan:          #06b6d4;
  --emerald:       #2ecc71;
  --amber:         #F59E0B;
  --teal:          #14b8a6;   /* admin action-card accent */
  --pink:          #ec4899;   /* admin module: Users */
  --rose:          #f43f5e;   /* admin module: Notifications */
  --orange:        #f97316;   /* admin module: Import */
  --slate:         #64748b;   /* admin module: Activity Log */
  --facebook:      #1877f2;   /* platform brand: Facebook */

  /* ── SEMANTIC — state colors ── */
  --color-status-green: #2ecc8a;
  --color-status-red:   #e74c3c;
  --color-status-warn:  #F59E0B;
  --color-status-green-tint: rgba(46, 204, 138, 0.12);
  --color-status-red-tint:   rgba(231, 76, 60, 0.12);
  --color-status-warn-tint:  rgba(245, 158, 11, 0.12);

  --status-green: var(--color-status-green);
  --status-red:   var(--color-status-red);
  --status-warn:  var(--color-status-warn);
  --green:        var(--color-status-green);
  --red:          var(--color-status-red);
  --warn:         var(--color-status-warn);
  --success:      var(--color-status-green);
  --danger:       var(--color-status-red);

  /* ── TYPOGRAPHY — font stacks ── */
  --font-display:  Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:     Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:     ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
  --font-family:   var(--font-body);

  --font-weight-heading: 200;
  --font-weight-body:    300;
  --font-weight-label:   500;

  /* Type scale (app: Inter, fluid via clamp in clajama-app.css) */
  --text-xs:  10px;
  --text-sm:  13px;
  --text-md:  14px;
  --text-base: 15px;
  --text-lg:  20px;
  --text-xl:  26px;
  --text-2xl: 36px;
  --text-3xl: 64px;

  --leading-body: 1.7;
  --leading-tight: 1.0;
  --tracking-display: -0.025em;
  --letter-spacing-display: var(--tracking-display);
  --letter-spacing-h1: -0.02em;
  --letter-spacing-h2: -0.01em;
  --letter-spacing-label: 0.06em;
  --letter-spacing-caption: 0.1em;

  /* ── RADIUS ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  /* ── SPACING — 4px base grid ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;

  --spacing-section-padding: 80px;
  --spacing-block-gap: 40px;
  --spacing-card-padding: 24px;
  --spacing-element-gap: 16px;
  --spacing-content-max-width: 1200px;

  /* ── ELEVATION / DEPTH (app glassmorphism) ── */
  --elev-flat:   none;
  --elev-ring:   0 0 0 1px var(--border);
  --elev-raised: 0 2px 8px color-mix(in oklab, var(--fg, #D8D9E2), transparent 92%);
  --focus-ring:  0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);

  --depth-glass-bg:     color-mix(in oklch, var(--color-surface) 60%, transparent);
  --depth-glass-border: color-mix(in oklch, var(--color-surface) 20%, transparent);
  --depth-glass-blur:   12px;
  --depth-surface-grad: linear-gradient(135deg, var(--color-surface), color-mix(in oklch, var(--color-accent) 8%, var(--color-surface)));
  --depth-accent-glow:  0 0 24px color-mix(in oklab, var(--accent), transparent 70%);
  --depth-shadow-sm: 0 2px 8px color-mix(in oklch, var(--color-base) 20%, transparent);
  --depth-shadow-md: 0 4px 20px color-mix(in oklch, var(--color-base) 30%, transparent);
  --depth-shadow-lg: 0 8px 40px color-mix(in oklch, var(--color-base) 40%, transparent);

  /* ── MOTION ── */
  --motion-fast:    150ms;
  --motion-base:    200ms;
  --motion-hover-duration: 0.2s;
  --motion-hover-easing:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-standard:  cubic-bezier(0.2, 0, 0, 1);

  /* ── BREAKPOINTS — app layout (matches base.html JS + CSS media queries) ──
     Mobile   < 640px   (bottom-sheet menu, stacked)
     Tablet   640–1023  (collapsed sidebar dock)
     Desktop  ≥ 1024px  (expanded sidebar, context panel)
     NOTE: block/client sites use responsive-vars.css (Bootstrap 576/768/992/1200) */
  --bp-mobile-max: 639px;
  --bp-tablet-min: 640px;
  --bp-tablet-max: 1023px;
  --bp-desktop-min: 1024px;
}