/**
 * Shared design tokens (Step 3) — keep small; no route-specific rules here.
 *
 * Vala design tokens — aligned with valahub-app/src/styles/tokens.css
 * Single place to tune brand colors, radii, shell dimensions.
 *
 * HYBRID STABILIZATION (see `functions.php` header + slug map):
 * This file is the only CSS variable source for the WP shell; no finance logic.
 * Groups inside :root: brand palette → surfaces/text → hero/page gradients → layout measures → shell rails → app chrome.
 */
:root {
  /* --- Brand palette --- */
  --vala-navy: #0f172a;
  --vala-indigo: #1e3a8a;
  --vala-sky: #0ea5e9;
  --vala-emerald: #10b981;
  --vala-blue-deep: #03258c;
  --vala-blue: #034aa6;
  --vala-cyan: #04c4d9;
  --vala-mint: #05f2c7;
  --vala-green: #04bf55;
  /* --- Surfaces & readable text --- */
  --vala-shell-dark: #061225;
  --vala-shell-navy: #071b3a;
  --vala-card-bg: #f7fafc;
  --vala-card-bg-soft: rgba(248, 251, 255, 0.94);
  --vala-text-primary: #0f172a;
  --vala-text-strong: #0b1220;
  --vala-text-secondary: #334155;
  --vala-text-muted: #64748b;
  --vala-border-soft: rgba(3, 74, 166, 0.1);
  --vala-shadow-card: 0 10px 30px rgba(2, 18, 37, 0.1);
  --vala-radius-card: 18px;
  --vala-bg: #f1f5f9;
  --vala-primary: var(--vala-blue);
  --vala-success: var(--vala-green);
  --vala-warning: #f59e0b;
  --vala-danger: #ef4444;
  /* --- Hero & marketing (light text on gradients) --- */
  --vala-hero-text-primary: rgba(255, 255, 255, 0.95);
  --vala-hero-text-secondary: rgba(255, 255, 255, 0.78);
  --vala-hero-gradient-core: linear-gradient(135deg, #1e1b8f 0%, #2f2cc8 50%, #3c35e0 100%);
  --vala-hero-gradient-sheen: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), transparent);
  --vala-hero-gradient-glow: radial-gradient(
    ellipse 78% 58% at 100% 0%,
    rgba(139, 92, 246, 0.11) 0%,
    rgba(59, 130, 246, 0.06) 38%,
    transparent 62%
  );
  --vala-page-shell-bg: linear-gradient(
    135deg,
    #061225 0%,
    #03258c 38%,
    #034aa6 72%,
    #022b52 100%
  );
  --vala-main-canvas-bg: linear-gradient(
    135deg,
    #081225 0%,
    #0b1f3d 22%,
    #123a6b 48%,
    #13597d 72%,
    #0f6b73 100%
  );
  /* --- Layout max widths & spacing --- */
  --vala-page-max: 1120px;
  /* App shell main column — aligns with dashboard-style max width */
  --vala-app-content-max: min(1180px, 100%);
  --vala-app-shell-max: min(1320px, calc(100vw - 24px));
  --vala-section-pad-y: clamp(2.5rem, 6vw, 4rem);
  --vala-section-pad-x: clamp(1rem, 4vw, 1.5rem);
  --vala-shell-pad-y: clamp(0.75rem, 2vw, 1.25rem);
  --vala-shell-pad-x: clamp(1rem, 3vw, 1.35rem);
  --vala-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vala-sidebar-gap: 20px;
  --vala-topbar-height: auto;
  /* --- Dark shell (rails / panels on gradient) --- */
  --vala-shell-rail-bg: linear-gradient(180deg, rgba(7, 27, 58, 0.92) 0%, rgba(15, 23, 42, 0.88) 100%);
  --vala-shell-rail-border: rgba(148, 163, 184, 0.22);
  --vala-shell-panel-bg: linear-gradient(145deg, rgba(15, 23, 42, 0.78) 0%, rgba(30, 41, 59, 0.62) 100%);
  --vala-shell-panel-border: rgba(148, 163, 184, 0.2);
  --vala-shell-text: rgba(248, 250, 252, 0.94);
  --vala-shell-muted: rgba(148, 163, 184, 0.9);
  --vala-shell-accent: #38bdf8;
  --vala-shell-accent-soft: rgba(56, 189, 248, 0.14);
  /* --- Light app chrome (WP hybrid sidebar / header / cards on dark canvas) --- */
  --vala-app-sidebar-bg: rgba(238, 245, 255, 0.82);
  --vala-app-sidebar-border: rgba(255, 255, 255, 0.35);
  --vala-app-sidebar-shadow: 2px 0 8px rgba(0, 0, 0, 0.08), 0 12px 26px rgba(15, 23, 42, 0.08);
  --vala-app-nav-muted: #64748b;
  --vala-app-nav-active: #2563eb;
  --vala-app-nav-bg-active: #eff6ff;
  --vala-app-nav-hover-bg: rgba(0, 0, 0, 0.04);
  --vala-app-header-bg: linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.92));
  --vala-app-header-border: rgba(255, 255, 255, 0.55);
  --vala-app-header-title: #0f172a;
  --vala-app-header-muted: #64748b;
  --vala-app-card-surface: linear-gradient(135deg, var(--vala-card-bg) 0%, var(--vala-card-bg-soft) 100%);
  --vala-page-stack-gap: clamp(14px, 1.5vw, 20px);
  /*
   * Global responsive scale tokens.
   * Scoped to Vala classes so Blocksy/WordPress container responsiveness remains intact.
   */
  --vala-sidebar-width: clamp(270px, 16.2vw, 285px);
  --vala-shell-gap: clamp(14px, 1.35vw, 22px);
  --vala-page-padding: clamp(16px, 1.5vw, 26px);
  --vala-card-padding: clamp(16px, 1.25vw, 22px);
  --vala-card-padding-tight: clamp(12px, 1vw, 18px);
  --vala-radius-lg: clamp(18px, 1.4vw, 28px);
  --vala-radius-md: clamp(14px, 1.1vw, 22px);
  --vala-text-sm: clamp(12px, 0.72vw, 14px);
  --vala-text-base: clamp(14px, 0.82vw, 16px);
  --vala-text-md: clamp(15px, 0.95vw, 18px);
  --vala-title-sm: clamp(17px, 1vw, 21px);
  --vala-title-md: clamp(21px, 1.35vw, 27px);
  --vala-kpi-size: clamp(27px, 1.7vw, 34px);
  --vala-hero-min-height: clamp(188px, 15vh, 236px);
  --vala-hero-padding: clamp(20px, 1.7vw, 30px);
  --vala-fa-orb-sm: clamp(42px, 2.8vw, 48px);
  --vala-fa-orb-md: clamp(56px, 3.8vw, 64px);
  --vala-fa-orb-lg: clamp(84px, 5.8vw, 104px);
}