/* =============================================================================
   WellTopo Design System — Tokens
   v0.2.0
   ----------------------------------------------------------------------------
   Design tokens ONLY (CSS custom properties on :root). NO reset / base styles,
   so this is safe to load anywhere — including Softr / MUI apps where a global
   reset would break layout.

   - welltopo.css @imports this file (single source of truth).
   - Surfaces that only need tokens (e.g. Softr custom code) can link or paste
     THIS file alone, then reference var(--wt-*) in their own CSS.
   ============================================================================= */

:root {
    /* ----- Primitive color palette ----- */

    /* Brand blue — primary action family (welltopo.com logo / live CTA #0054a6) */
    --wt-blue-900:   #00396f;   /* pressed / darkest */
    --wt-blue-800:   #00468a;   /* dark */
    --wt-blue-600:   #004e9c;
    --wt-blue-500:   #0054a6;   /* BRAND BLUE — primary action */
    --wt-blue-400:   #3376b7;   /* interactive / hover (matches live) */
    --wt-blue-300:   #6698c9;
    --wt-blue-200:   #bfdbfe;   /* card gradient stop (soft) */
    --wt-blue-100:   #dbeafe;   /* nav-active bg / soft surface */
    --wt-blue-50:    #eff6ff;   /* lightest tint — subtle fills / hover bg */

    /* Onboarding navy — accent family (from welltopo_dashboard_1ux.html) */
    --wt-navy-900:   #0d2744;
    --wt-navy-800:   #102f52;
    --wt-navy-700:   #163d64;
    --wt-navy-500:   #2f6fad;
    --wt-navy-300:   #6ea3d4;
    --wt-navy-50:    #e8f0f9;

    /* Accent teal */
    --wt-teal-900:   #0d5f54;
    --wt-teal-700:   #1a8a78;
    --wt-teal-500:   #2ab39e;
    --wt-teal-300:   #4dd4bf;
    --wt-teal-100:   #ccfbf1;
    --wt-teal-50:    #f0fdfa;

    /* Onboarding CTA orange */
    --wt-orange-700: #cf5012;
    --wt-orange-500: #e8621a;
    --wt-orange-300: #fdba74;   /* card gradient stop */
    --wt-orange-100: #fed7aa;
    --wt-orange-50:  #fff7ed;

    /* Severity magenta (critical) */
    --wt-magenta-500: #b901af;
    --wt-magenta-50:  #fdf2fe;

    /* Status — semantic primitives */
    --wt-green-700:  #047857;
    --wt-green-600:  #059669;
    --wt-green-500:  #10b981;
    --wt-green-300:  #bbf7d0;   /* card gradient stop */
    --wt-green-100:  #dcfce7;
    --wt-green-50:   #ecfdf5;

    --wt-amber-700:  #92400e;
    --wt-amber-500:  #f59e0b;
    --wt-amber-100:  #fef3c7;
    --wt-amber-50:   #fffbeb;

    --wt-red-700:    #b91c1c;
    --wt-red-500:    #ef4444;
    --wt-red-300:    #fca5a5;
    --wt-red-200:    #fecaca;   /* gradient stop */
    --wt-red-100:    #fee2e2;
    --wt-red-50:     #fef2f2;

    /* Neutrals (operational dashboard greys) */
    --wt-gray-900:   #1f2937;
    --wt-gray-800:   #374151;   /* primary text */
    --wt-gray-700:   #4a5568;
    --wt-gray-600:   #6b7280;   /* muted text */
    --wt-gray-500:   #718096;
    --wt-gray-400:   #9ca3af;
    --wt-gray-300:   #d1dce9;
    --wt-gray-200:   #e5e7eb;   /* default border */
    --wt-gray-100:   #f3f4f6;
    --wt-gray-50:    #f8fafc;   /* app surface */
    --wt-white:      #ffffff;
    --wt-black:      #000000;


    /* ----- Semantic color tokens (consumer-facing) ----- */

    /* Brand / primary (APP family) */
    --wt-color-brand:           var(--wt-blue-800);
    --wt-color-brand-soft:      var(--wt-blue-100);
    --wt-color-brand-link:      var(--wt-blue-500);
    --wt-color-primary:         var(--wt-blue-500);
    --wt-color-primary-hover:   var(--wt-blue-400);  /* lightens like the live CTA */
    --wt-color-primary-soft:    var(--wt-blue-100);
    --wt-color-accent:          var(--wt-teal-500);
    --wt-color-accent-soft:     var(--wt-teal-100);
    --wt-color-accent-strong:   var(--wt-teal-700);

    /* Marketing / FTU call-to-action (ONBOARDING family) */
    --wt-color-cta:             var(--wt-orange-500);
    --wt-color-cta-hover:       var(--wt-orange-700);
    --wt-color-cta-soft:        var(--wt-orange-100);

    /* Surfaces */
    --wt-color-bg:              var(--wt-navy-50);    /* page background */
    --wt-color-surface:         var(--wt-gray-50);    /* inner main surface */
    --wt-color-card:            var(--wt-white);      /* card / sheet */
    --wt-color-ghost:           var(--wt-gray-100);   /* skeleton, locked */
    --wt-color-overlay:         rgba(13, 39, 68, 0.55);

    /* Text */
    --wt-color-text:            var(--wt-gray-800);
    --wt-color-text-strong:     var(--wt-gray-900);
    --wt-color-text-mid:        var(--wt-gray-700);
    --wt-color-text-muted:      var(--wt-gray-600);
    --wt-color-text-faint:      var(--wt-gray-400);
    --wt-color-text-on-brand:   var(--wt-white);
    --wt-color-text-on-cta:     var(--wt-white);
    --wt-color-text-on-accent:  var(--wt-white);

    /* Borders */
    --wt-color-border:          var(--wt-gray-200);
    --wt-color-border-soft:     var(--wt-gray-100);
    --wt-color-border-strong:   var(--wt-gray-500);
    --wt-color-border-focus:    var(--wt-blue-500);

    /* Status (success / warning / danger / info) */
    --wt-color-success:         var(--wt-green-500);
    --wt-color-success-bg:      var(--wt-green-100);
    --wt-color-success-fg:      #166534;
    --wt-color-success-border:  var(--wt-green-300);

    --wt-color-warning:         var(--wt-amber-500);
    --wt-color-warning-bg:      var(--wt-amber-100);
    --wt-color-warning-fg:      var(--wt-amber-700);
    --wt-color-warning-border:  var(--wt-amber-500);

    --wt-color-danger:          var(--wt-red-500);
    --wt-color-danger-bg:       var(--wt-red-100);
    --wt-color-danger-fg:       var(--wt-red-700);
    --wt-color-danger-border:   var(--wt-red-300);

    --wt-color-info:            var(--wt-blue-500);
    --wt-color-info-bg:         var(--wt-blue-100);
    --wt-color-info-fg:         var(--wt-blue-800);
    --wt-color-info-border:     var(--wt-blue-300);


    /* ----- Severity scale (5-level, from trends widget) ----- */
    --wt-color-critical:        var(--wt-magenta-500);
    --wt-color-high:            var(--wt-red-500);
    --wt-color-moderate:        var(--wt-amber-500);
    --wt-color-low:             var(--wt-green-500);
    --wt-color-none:            var(--wt-gray-600);

    --wt-gradient-critical: linear-gradient(135deg, var(--wt-magenta-50), var(--wt-red-200));
    --wt-gradient-high:     linear-gradient(135deg, var(--wt-amber-50),   var(--wt-red-200));
    --wt-gradient-moderate: linear-gradient(135deg, var(--wt-teal-50),    var(--wt-orange-100));
    --wt-gradient-low:      linear-gradient(135deg, var(--wt-gray-50),    var(--wt-teal-100));
    --wt-gradient-none:     linear-gradient(135deg, var(--wt-gray-50),    var(--wt-gray-100));


    /* ----- Onboarding / FTU accent tokens (scoped) ----- */
    --wt-onboard-navy:       var(--wt-navy-900);
    --wt-onboard-navy-mid:   var(--wt-navy-700);
    --wt-onboard-blue:       var(--wt-navy-500);
    --wt-onboard-teal:       var(--wt-teal-500);
    --wt-onboard-teal-light: var(--wt-teal-300);
    --wt-onboard-cta:        var(--wt-orange-500);
    --wt-onboard-cta-hover:  var(--wt-orange-700);


    /* ----- Typography (Barlow everywhere) ----- */
    --wt-font-heading: Barlow, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, system-ui;
    --wt-font-body:    Barlow, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, system-ui;
    --wt-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Type scale */
    --wt-text-xs:    11px;
    --wt-text-sm:    12px;
    --wt-text-base:  15px;
    --wt-text-md:    16px;
    --wt-text-lg:    18px;
    --wt-text-xl:    20px;
    --wt-text-2xl:   24px;
    --wt-text-3xl:   28px;
    --wt-text-4xl:   34px;
    --wt-text-5xl:   42px;
    --wt-text-6xl:   66px;

    /* Line heights */
    --wt-leading-none:    1;
    --wt-leading-tight:   1.2;
    --wt-leading-snug:    1.35;
    --wt-leading-normal:  1.55;
    --wt-leading-relaxed: 1.65;

    /* Weights */
    --wt-weight-regular:   400;
    --wt-weight-medium:    500;
    --wt-weight-semibold:  600;
    --wt-weight-bold:      700;
    --wt-weight-extrabold: 800;

    /* Letter spacing */
    --wt-tracking-tight:  -0.01em;
    --wt-tracking-normal: 0;
    --wt-tracking-wide:   0.04em;
    --wt-tracking-wider:  0.06em;
    --wt-tracking-widest: 0.08em;


    /* ----- Spacing scale (4px grid) ----- */
    --wt-space-0:   0;
    --wt-space-1:   4px;
    --wt-space-2:   8px;
    --wt-space-3:   12px;
    --wt-space-4:   16px;
    --wt-space-5:   20px;
    --wt-space-6:   24px;
    --wt-space-7:   28px;
    --wt-space-8:   32px;
    --wt-space-10:  40px;
    --wt-space-12:  48px;
    --wt-space-16:  64px;
    --wt-space-20:  80px;
    --wt-space-24:  96px;


    /* ----- Border radius ----- */
    --wt-radius-xs:    4px;
    --wt-radius-sm:    6px;
    --wt-radius-md:    8px;
    --wt-radius-lg:    10px;
    --wt-radius-xl:    12px;
    --wt-radius-2xl:   16px;
    --wt-radius-3xl:   20px;
    --wt-radius-pill:  9999px;
    --wt-radius-full:  50%;


    /* ----- Shadows ----- */
    --wt-shadow-xs:    0 1px 2px rgba(13, 39, 68, 0.04);
    --wt-shadow-sm:    0 1px 3px rgba(13, 39, 68, 0.06);
    --wt-shadow-md:    0 2px 10px rgba(13, 39, 68, 0.06);
    --wt-shadow-lg:    0 10px 28px rgba(13, 39, 68, 0.11);
    --wt-shadow-xl:    0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    --wt-shadow-primary: 0 4px 12px rgba(0, 84, 166, 0.30);
    --wt-shadow-cta:   0 6px 16px rgba(232, 98, 26, 0.40);
    --wt-shadow-focus: 0 0 0 3px rgba(0, 84, 166, 0.32);


    /* ----- Motion ----- */
    --wt-ease:           cubic-bezier(0.4, 0, 0.2, 1);
    --wt-ease-out:       cubic-bezier(0, 0, 0.2, 1);
    --wt-ease-in:        cubic-bezier(0.4, 0, 1, 1);
    --wt-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

    --wt-dur-fast:   0.15s;
    --wt-dur-base:   0.2s;
    --wt-dur-slow:   0.3s;
    --wt-dur-slower: 0.5s;

    --wt-transition-default: all var(--wt-dur-base) var(--wt-ease);
    --wt-transition-color:   color var(--wt-dur-base) var(--wt-ease),
                             background-color var(--wt-dur-base) var(--wt-ease),
                             border-color var(--wt-dur-base) var(--wt-ease);
    --wt-transition-transform: transform var(--wt-dur-base) var(--wt-ease),
                               box-shadow var(--wt-dur-base) var(--wt-ease);


    /* ----- Z-index scale ----- */
    --wt-z-base:    1;
    --wt-z-raised:  10;
    --wt-z-sticky:  100;
    --wt-z-overlay: 500;
    --wt-z-modal:   1000;
    --wt-z-toast:   2000;
    --wt-z-tooltip: 3000;


    /* ----- Breakpoints (reference — used in @media manually) -----
       --wt-bp-sm:  480px
       --wt-bp-md:  768px
       --wt-bp-lg:  1024px
       --wt-bp-xl:  1280px
    */


    /* ----- Container widths ----- */
    --wt-container-sm: 640px;
    --wt-container-md: 880px;
    --wt-container-lg: 1200px;
    --wt-container-xl: 1280px;


    /* ----- Gradients ----- */
    /* Onboarding / marketing brand gradient (navy) — hero, value section */
    --wt-gradient-brand: linear-gradient(
        135deg,
        var(--wt-navy-900) 0%,
        var(--wt-navy-700) 55%,
        var(--wt-navy-500) 100%
    );
    --wt-gradient-logo:  linear-gradient(135deg, var(--wt-navy-500), var(--wt-teal-500));
    --wt-gradient-avatar: linear-gradient(135deg, #667eea, #764ba2);

    /* Operational top-card gradients (from welltopo_dashboard.html) */
    --wt-gradient-water:   linear-gradient(135deg, var(--wt-blue-100),  var(--wt-blue-200));
    --wt-gradient-system:  linear-gradient(135deg, var(--wt-green-100), var(--wt-green-300));
    --wt-gradient-service: linear-gradient(135deg, var(--wt-orange-100), var(--wt-orange-300));


    /* =========================================================================
       LEGACY ALIASES — do not remove without migrating consumers.
       Used by: welltopo_dashboard_1ux.html (maps to the ONBOARDING family).
       ========================================================================= */
    --navy:       var(--wt-onboard-navy);
    --navy-mid:   var(--wt-onboard-navy-mid);
    --blue:       var(--wt-onboard-blue);
    --teal:       var(--wt-onboard-teal);
    --teal-light: var(--wt-onboard-teal-light);
    --cta:        var(--wt-onboard-cta);
    --cta-hover:  var(--wt-onboard-cta-hover);
    --bg:         var(--wt-color-bg);
    --surface:    var(--wt-color-surface);
    --card:       var(--wt-color-card);
    --text:       var(--wt-color-text);
    --text-mid:   var(--wt-color-text-mid);
    --muted:      var(--wt-color-text-muted);
    --border:     var(--wt-color-border);
    --ghost:      var(--wt-color-ghost);
    --ff-heading: var(--wt-font-heading);
    --ff-body:    var(--wt-font-body);
}