/* ============================================================
   NOVARA — DESIGN TOKENS
   css/variables.css
   Single source of truth. Aligned to the NOVARA brand spec.
   Legacy --nv-* aliases preserved so existing components keep
   rendering correctly while new tokens take over the visual lead.
   ============================================================ */

:root {

  /* ──────────────────────────────────────────────────────────
     CORE BRAND PALETTE
     ────────────────────────────────────────────────────────── */
  --novara-deep-teal:       #066B74;
  --novara-teal:            #0A9BA1;
  --novara-aqua:            #17C4C8;
  --novara-mint:            #73DFA7;
  --novara-soft-mint:       #BDF2D2;

  /* RGB tuples for rgba() composition */
  --novara-deep-teal-rgb:   6, 107, 116;
  --novara-teal-rgb:        10, 155, 161;
  --novara-aqua-rgb:        23, 196, 200;
  --novara-mint-rgb:        115, 223, 167;

  /* Neutrals */
  --novara-ink:             #102A33;
  --novara-body:            #24424A;
  --novara-muted:           #3D6068;  /* darkened from #5F7A80 — now 5.3:1 vs white (WCAG AA) */
  --novara-subtle:          #6A8A91;  /* decorative/large-text only — 3.1:1, not for small body copy */
  --novara-border:          #D9E8EA;
  --novara-border-strong:   #BDD4D8;
  --novara-surface-alt:     #F4FAFA;
  --novara-surface-soft:    #EEF7F8;
  --novara-page-bg:         #FAFDFD;
  --novara-white:           #FFFFFF;

  --novara-ink-rgb:         16, 42, 51;

  /* Semantic */
  --novara-success:         #22A06B;
  --novara-warning:         #D9A441;
  --novara-error:           #D64545;
  --novara-info:            #1593B5;

  /* ──────────────────────────────────────────────────────────
     GRADIENTS
     ────────────────────────────────────────────────────────── */
  --novara-gradient-brand: linear-gradient(135deg, #066B74 0%, #0A9BA1 45%, #17C4C8 72%, #73DFA7 100%);
  --novara-gradient-cta:   linear-gradient(135deg, #066B74 0%, #0A9BA1 55%, #73DFA7 100%);
  --novara-gradient-cta-hover: linear-gradient(135deg, #055A61 0%, #088A90 55%, #5FD08F 100%);
  --novara-gradient-hero:  linear-gradient(180deg, #F4FAFA 0%, #FAFDFD 100%);
  --novara-gradient-soft-card: linear-gradient(180deg, rgba(10,155,161,0.05) 0%, rgba(115,223,167,0.03) 100%);
  --novara-gradient-hero-accent: linear-gradient(135deg, rgba(10,155,161,0.08) 0%, rgba(23,196,200,0.05) 45%, rgba(115,223,167,0.08) 100%);

  /* ──────────────────────────────────────────────────────────
     TYPOGRAPHY
     ────────────────────────────────────────────────────────── */
  --novara-font-heading:    'Inter', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --novara-font-body:       'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --novara-font-mono:       'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;

  --novara-fs-hero:         clamp(2.75rem, 5vw, 4.75rem);
  --novara-fs-h1:           clamp(2.25rem, 4vw, 3.5rem);
  --novara-fs-h2:           clamp(1.875rem, 3vw, 2.75rem);
  --novara-fs-h3:           1.5rem;
  --novara-fs-h4:           1.25rem;
  --novara-fs-body-lg:      1.125rem;
  --novara-fs-body:         1rem;
  --novara-fs-body-sm:      0.9375rem;
  --novara-fs-caption:      0.8125rem;

  --novara-fw-regular:      400;
  --novara-fw-medium:       500;
  --novara-fw-semibold:     600;
  --novara-fw-bold:         700;

  /* ──────────────────────────────────────────────────────────
     RADII
     ────────────────────────────────────────────────────────── */
  --novara-radius-xs:       6px;
  --novara-radius-sm:       10px;
  --novara-radius-md:       14px;
  --novara-radius-lg:       18px;
  --novara-radius-xl:       24px;
  --novara-radius-pill:     999px;

  /* ──────────────────────────────────────────────────────────
     SPACING
     ────────────────────────────────────────────────────────── */
  --novara-sp-xs:           4px;
  --novara-sp-sm:           8px;
  --novara-sp-md:           12px;
  --novara-sp-lg:           16px;
  --novara-sp-xl:           24px;
  --novara-sp-2xl:          32px;
  --novara-sp-3xl:          48px;
  --novara-sp-4xl:          64px;
  --novara-sp-5xl:          96px;
  --novara-sp-6xl:          128px;

  /* ──────────────────────────────────────────────────────────
     SHADOWS
     ────────────────────────────────────────────────────────── */
  --novara-shadow-sm:       0 4px 12px rgba(16,42,51,0.06);
  --novara-shadow-md:       0 10px 24px rgba(16,42,51,0.08);
  --novara-shadow-lg:       0 16px 40px rgba(16,42,51,0.12);
  --novara-shadow-card:     0 14px 36px rgba(16,42,51,0.07);
  --novara-shadow-card-hover: 0 18px 42px rgba(16,42,51,0.10);
  --novara-shadow-header:   0 10px 30px rgba(16,42,51,0.08);
  --novara-shadow-cta:      0 10px 24px rgba(10,155,161,0.22);
  --novara-glow-brand:      0 0 0 1px rgba(10,155,161,0.10), 0 12px 30px rgba(10,155,161,0.18);

  /* ──────────────────────────────────────────────────────────
     INTERACTIVE / FOCUS
     ────────────────────────────────────────────────────────── */
  --novara-focus-ring:      0 0 0 4px rgba(10,155,161,0.18);
  --novara-transition-fast: 0.15s ease;
  --novara-transition:      0.25s ease;
  --novara-transition-slow: 0.4s ease-out;
  --novara-transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ──────────────────────────────────────────────────────────
     CONTAINER WIDTHS
     ────────────────────────────────────────────────────────── */
  --novara-container:       1240px;
  --novara-container-narrow: 880px;
  --novara-container-wide:  1440px;

  /* ──────────────────────────────────────────────────────────
     WOODMART OVERRIDES — MAP NOVARA → --wd-*
     ────────────────────────────────────────────────────────── */
  --wd-primary-color:       #0A9BA1;
  --wd-secondary-color:     #066B74;
  --wd-title-color:         #102A33;
  --wd-text-color:          #24424A;
  --wd-link-color:          #0A9BA1;
  --wd-link-color-hover:    #066B74;
  --wd-main-bgcolor:        #FAFDFD;
  --wd-brd-radius:          10px;

  --wd-entities-title-color:        #102A33;
  --wd-entities-title-color-hover:  #0A9BA1;
  --wd-entities-title-font-weight:  600;

  --wd-title-font:          'Inter', system-ui, sans-serif;
  --wd-text-font:           'Inter', system-ui, sans-serif;
  --wd-alternative-font:    'Inter', system-ui, sans-serif;

  --wd-title-font-weight:   600;
  --wd-title-font-style:    normal;
  --wd-title-transform:     none;
  --wd-text-font-size:      16px;
  --wd-text-font-weight:    400;
  --wd-text-font-style:     normal;
  --wd-text-line-height:    1.65;

  --btn-font-family:        'Inter', system-ui, sans-serif;
  --btn-font-weight:        600;
  --btn-font-style:         normal;
  --btn-font-size:          14px;
  --btn-transform:          none;
  --btn-color:              #FFFFFF;
  --btn-color-hover:        #FFFFFF;
  --btn-bgcolor:            #0A9BA1;
  --btn-bgcolor-hover:      #066B74;
  --btn-padding:            14px 28px;

  --wd-form-height:             52px;
  --wd-form-brd-color:          #D9E8EA;
  --wd-form-brd-color-focus:    #0A9BA1;
  --wd-form-bg:                 #FFFFFF;
  --wd-form-brd-radius:         10px;
  --wd-form-color:              #102A33;
  --wd-form-placeholder-color:  #7F989E;

  --wd-header-general-h:        76px;
  --wd-header-general-sticky-h: 64px;
  --wd-header-bottom-h:         0px;
  --wd-top-bar-h:               0px;
  --wd-top-bar-sm-h:            0px;
  --wd-top-bar-sticky-h:        0px;
  --wd-boxed-w:                 1240px;
  --wd-container-w:             1240px;  /* WoodMart's primary container max-width */
  --wd-block-spacing:           28px;

  /* ──────────────────────────────────────────────────────────
     LEGACY --nv-* ALIASES
     Keep existing components.css / woocommerce-peptide.css working.
     All map to NOVARA tokens above.
     ────────────────────────────────────────────────────────── */
  --nv-navy:              #102A33;          /* was deep navy → ink */
  --nv-teal:              #0A9BA1;          /* was logo teal */
  --nv-teal-light:        #17C4C8;
  --nv-teal-dark:         #066B74;
  --nv-gold:              #0A9BA1;          /* aliased */
  --nv-warm-white:        #FAFDFD;
  --nv-cream:             #F4FAFA;
  --nv-charcoal:          #24424A;
  --nv-sage:              #73DFA7;
  --nv-terracotta:        #D9A441;
  --nv-stone:             #7F989E;
  --nv-dark:              #102A33;
  --nv-muted:             #5F7A80;

  --nv-navy-rgb:          16, 42, 51;
  --nv-teal-rgb:          10, 155, 161;
  --nv-gold-rgb:          10, 155, 161;
  --nv-charcoal-rgb:      36, 66, 74;

  /* Backwards-compat radius / spacing tokens */
  --nv-radius-card:       14px;
  --nv-radius-pill:       999px;
  --nv-radius-modal:      18px;
  --nv-radius-input:      10px;
  --nv-radius-badge:      999px;

  --nv-section-lg:        var(--novara-sp-5xl);
  --nv-section-md:        var(--novara-sp-4xl);
  --nv-section-sm:        var(--novara-sp-3xl);
  --nv-section-xs:        var(--novara-sp-2xl);
  --nv-card-p:            32px;
  --nv-component-p:       24px;
  --nv-gap-lg:            48px;
  --nv-gap-md:            32px;
  --nv-gap-sm:            24px;
  --nv-gap-xs:            16px;

  /* Shadows (legacy) */
  --nv-shadow-card:       var(--novara-shadow-card);
  --nv-shadow-card-hover: var(--novara-shadow-card-hover);
  --nv-shadow-form:       0 8px 48px rgba(16,42,51,0.10);
  --nv-shadow-header:     var(--novara-shadow-header);
  --nv-shadow-modal:      0 16px 64px rgba(16,42,51,0.16);

  /* Borders (legacy) */
  --nv-border-light:      rgba(16,42,51,0.06);
  --nv-border-medium:     rgba(16,42,51,0.10);
  --nv-border-teal:       #0A9BA1;
  --nv-border-gold:       #0A9BA1;
  --nv-border-color:      #D9E8EA;
  --nv-divider-color:     rgba(16,42,51,0.06);
  --nv-input-border:      #D9E8EA;
  --nv-focus-ring:        rgba(10,155,161,0.18);

  /* Motion (legacy) */
  --nv-transition-fast:   0.15s ease;
  --nv-transition-base:   0.25s ease;
  --nv-transition-slow:   0.40s ease-out;

  /* ── BACKGROUND VARIANTS (legacy) ── */
  --nv-bg-page:             #FAFDFD;
  --nv-bg-section-alt:      #F4FAFA;
  --nv-bg-card:             #FFFFFF;
  --nv-bg-section-deep:     #102A33;
  --nv-bg-teal-tint:        #EEF7F8;

  /* ── TEXT HIERARCHY (legacy) ── */
  --nv-text-primary:        #102A33;
  --nv-text-secondary:      #24424A;
  --nv-text-muted:          #5F7A80;
  --nv-text-inverted:       #FFFFFF;
  --nv-text-inverted-muted: rgba(255,255,255,0.78);

  /* Teal family (extended legacy) */
  --nv-teal-50:             #EEF7F8;
  --nv-teal-100:            #BDF2D2;
  --nv-teal-200:            #73DFA7;
  --nv-teal-600:            #066B74;
  --nv-teal-700:            #055A61;

  /* Status (legacy) */
  --nv-status-success:      #22A06B;
  --nv-status-success-bg:   #ECFBF3;
  --nv-status-warning:      #D9A441;
  --nv-status-warning-bg:   #FFF8EA;
  --nv-status-error:        #D64545;
  --nv-status-error-bg:     #FDEEEE;
  --nv-status-info:         #1593B5;
  --nv-status-info-bg:      #EAF8FC;

  --nv-color-error:         #D64545;
  --nv-color-success:       #22A06B;
  --nv-color-warning:       #D9A441;
  --nv-color-info:          #1593B5;
  --color-error:            #D64545;

  /* Lab UI (legacy aliases) */
  --nv-lab-gray:            #F4FAFA;
  --nv-lab-border:          #D9E8EA;
  --nv-purity-green:        #22A06B;
  --nv-purity-bg:           #ECFBF3;
  --nv-disclaimer-bg:       #FFF8EA;
  --nv-disclaimer-border:   #D9A441;
  --nv-disclaimer-text:     #9A6A12;
  --nv-coa-blue:            #1593B5;
  --nv-coa-bg:              #EAF8FC;
  --nv-purity-text:         #1C7D55;
  --nv-endotoxin-text:      #066B74;
  --nv-endotoxin-bg:        #EEF7F8;
  --nv-coa-text:            #156D86;
  --nv-warning-text:        #9A6A12;
  --nv-testing-gray:        #5F7A80;

  --nv-lab-white:           #FFFFFF;
  --nv-lab-gray-50:         #F8FCFC;
  --nv-lab-gray-100:        #F4FAFA;
  --nv-lab-gray-200:        #EEF7F8;
  --nv-lab-gray-300:        #D9E8EA;
  --nv-lab-gray-500:        #5F7A80;
  --nv-lab-gray-700:        #24424A;
  --nv-lab-gray-900:        #102A33;

  --nv-purity-50:           #ECFBF3;
  --nv-purity-100:          #BDF2D2;
  --nv-purity-600:          #22A06B;
  --nv-purity-700:          #1C7D55;

  --nv-endotoxin-50:        #EEF7F8;
  --nv-endotoxin-600:       #066B74;

  --nv-coa-50:              #EAF8FC;
  --nv-coa-600:             #1593B5;

  --nv-warning-50:          #FFF8EA;
  --nv-warning-100:         #F1D89D;
  --nv-warning-600:         #D9A441;
  --nv-warning-700:         #9A6A12;

  /* Spacing (legacy) */
  --space-px:    1px;
  --space-0-5:   0.125rem;
  --space-1:     0.25rem;
  --space-2:     0.5rem;
  --space-3:     0.75rem;
  --space-4:     1rem;
  --space-5:     1.25rem;
  --space-6:     1.5rem;
  --space-7:     1.75rem;
  --space-8:     2rem;
  --space-9:     2.25rem;
  --space-10:    2.5rem;
  --space-12:    3rem;
  --space-14:    3.5rem;
  --space-16:    4rem;
  --space-20:    5rem;
  --space-24:    6rem;
  --space-xs:    0.25rem;
  --space-sm:    0.5rem;
  --space-md:    1rem;
  --space-lg:    1.5rem;
  --space-xl:    2rem;
  --space-2xl:   3rem;
  --space-3xl:   4.5rem;

  /* Radius (legacy) */
  --radius-xs:   2px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-pill: 999px;
  --radius-full: 9999px;

  /* Shadows (legacy short) */
  --shadow-xs:   0 1px 2px rgba(16,42,51,0.05);
  --shadow-sm:   0 1px 3px rgba(16,42,51,0.10), 0 1px 2px rgba(16,42,51,0.06);
  --shadow-md:   0 4px 12px rgba(16,42,51,0.08);
  --shadow-lg:   0 16px 40px rgba(16,42,51,0.12);
  --shadow-xl:   0 24px 64px rgba(16,42,51,0.16);
  --shadow-card: 0 14px 36px rgba(16,42,51,0.07);
  --shadow-card-hover: 0 18px 42px rgba(16,42,51,0.10);

  /* Transitions (legacy) */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.40s ease-out;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Typography (legacy aliases — point at NOVARA scale) */
  --nv-font-heading:        'Inter', 'Avenir Next', system-ui, sans-serif;
  --nv-font-body:           'Inter', system-ui, sans-serif;
  --nv-font-mono:           'JetBrains Mono', monospace;

  --nv-fs-xs:    0.75rem;
  --nv-fs-sm:    0.875rem;
  --nv-fs-base:  1rem;
  --nv-fs-lg:    1.125rem;
  --nv-fs-xl:    1.25rem;
  --nv-fs-2xl:   1.5rem;
  --nv-fs-3xl:   1.875rem;
  --nv-fs-4xl:   2.25rem;
  --nv-fs-5xl:   3rem;
  --nv-fs-6xl:   3.75rem;
  --nv-fs-7xl:   4.5rem;

  --nv-lh-tight:    1.1;
  --nv-lh-snug:     1.2;
  --nv-lh-normal:   1.5;
  --nv-lh-relaxed:  1.65;
  --nv-lh-loose:    1.75;

  --nv-ls-tight:    -0.02em;
  --nv-ls-normal:   0;
  --nv-ls-wide:     0.04em;
  --nv-ls-wider:    0.08em;
  --nv-ls-widest:   0.12em;

  /* Pricing tokens */
  --nv-price-display-size:  36px;
  --nv-price-stat-size:     52px;

  /* Hero overlay (legacy) */
  --nv-treatment-hero-bg:   none;

  /* Z-index */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ── DARK SECTION UTILITY (Ink background) ── */
.nv-section-dark,
.novara-section-dark {
  --wd-title-color:       #FFFFFF;
  --wd-text-color:        rgba(255,255,255,0.85);
  --wd-link-color:        rgba(255,255,255,0.85);
  --wd-link-color-hover:  #BDF2D2;
  background-color:       var(--novara-ink);
  color:                  rgba(255,255,255,0.85);
}

/* ── SOFT TINTED SECTION ── */
.nv-section-cream,
.novara-section-soft {
  background-color: var(--novara-surface-soft);
}

/* ── ALT SECTION ── */
.nv-section-warm,
.novara-section-alt {
  background-color: var(--novara-surface-alt);
}

/* ── TINTED GRADIENT SECTION ── */
.novara-section-gradient {
  background: var(--novara-gradient-hero);
}