/**
 * SSA - OFFICIAL DESIGN SYSTEM TOKENS (ssa-tokens.css)
 * ARCHITECTURE MODE: STRICT GLOBAL DESIGN SYSTEM
 * BRAND CONSISTENCY PRIORITY: CRITICAL
 *
 * BẢNG MÀU THƯƠNG HIỆU & CHUYỂN ĐỔI (COLOR TOKENS):
 * Kết hợp Xanh lá SSA chủ đạo cùng Đỏ Ruby, Vàng Cam và Xanh Dương năng động
 *
 * 1. #1E8742 - SSA Emerald (Thương hiệu, Nav Active, Stats)
 * 2. #ECFDF3 - Emerald Soft (Nền thẻ xanh, Badge Mầm non)
 * 3. #DA0D43 - Ruby Conversion (Hero, CTA chính, Cấp 1 6–11t)
 * 4. #B81435 - Ruby Crimson (Nền Hero chuyển sắc đậm)
 * 5. #F3A91E - Sunshine Gold (CTA nổi trên nền đỏ, Sao 5★)
 * 6. #F48108 - Vibrant Orange (Nhãn Cấp 2 11–16t, Ưu đãi)
 * 7. #0782D3 - Sky Blue Kids (Art Class, Thẻ ưu đãi học thử)
 * 8. #65A30D - Yoga Lime (Yoga Studio, Hoạt động thể chất)
 * 9. #0F172A - Slate Ink (Tiêu đề chính - Contrast > 14:1)
 * 10. #334155 - Slate Body (Văn bản nội dung dễ đọc)
 * 11. #F8FAFC - Cool Surface (Nền phân tách section xen kẽ)
 * 12. #E2E8F0 - Border Line (Viền thẻ tinh tế 1px)
 */

:root {
  /* ==========================================================================
     BRAND CORE - OFFICIAL SSA SUPER STAR ACADEMY PALETTE (12-COLOR BOARD)
     ========================================================================== */
  --ssa-navy:   #1E8742; /* SSA Emerald: Thương hiệu, Nav Active, Stats */
  --ssa-green:  #1E8742; /* SSA Emerald */
  --ssa-emerald:#1E8742;
  --ssa-ruby:   #DA0D43; /* Ruby Conversion: Hero, CTA chính, Cấp 1 (6–11t) */
  --ssa-orange: #F48108; /* Vibrant Orange: Nhãn Cấp 2 (11–16t), Ưu đãi */
  --ssa-gold:   #F3A91E; /* Sunshine Gold: CTA nổi trên nền đỏ, Sao 5★ */
  --ssa-blue:   #0782D3; /* Sky Blue Kids: Art Class, Thẻ ưu đãi học thử */
  --ssa-lime:   #65A30D; /* Yoga Lime: Yoga Studio, Hoạt động thể chất */

  /* ==========================================================================
     1. BRAND COLOR SCALES (CALIBRATED ACCORDING TO SSA BRAND BOARD)
     ========================================================================== */

  /* SSA Emerald Scale (#1E8742) */
  --ssa-navy-950: #052E16;
  --ssa-navy-900: #0F172A; /* Slate Ink for dark surfaces/footer */
  --ssa-navy-800: #1E293B; /* Dark Slate border/card accent */
  --ssa-navy-700: #14532D;
  --ssa-navy-650: #15803D;
  --ssa-navy-600: #166534; /* Vibrant Emerald Hover */
  --ssa-navy-500: #1E8742; /* SSA Emerald Primary */
  --ssa-brand-blue: #1E8742;
  --ssa-navy-400: #22C55E;
  --ssa-navy-300: #86EFAC;
  --ssa-navy-200: #BBF7D0;
  --ssa-navy-100: #DCFCE7;
  --ssa-navy-50:  #ECFDF3; /* Emerald Soft */

  /* Green Scale (Explicit Namespace) */
  --ssa-green-900: #0D4A1E;
  --ssa-green-800: #14532D;
  --ssa-green-700: #15803D;
  --ssa-green-600: #166534;
  --ssa-green-500: #1E8742; /* SSA Emerald */
  --ssa-green-400: #22C55E;
  --ssa-green-300: #86EFAC;
  --ssa-green-200: #BBF7D0;
  --ssa-green-100: #DCFCE7;
  --ssa-green-50:  #ECFDF3; /* Emerald Soft */

  /* Ruby Conversion Scale (#DA0D43 & #B81435) */
  --ssa-red-900: #68051E;
  --ssa-red-800: #881337;
  --ssa-red-700: #9F1239;
  --ssa-red-650: #B81435; /* Ruby Crimson */
  --ssa-red-600: #B81435;
  --ssa-red-500: #DA0D43; /* Ruby Conversion */
  --ssa-red-400: #F43F5E;
  --ssa-red-300: #FDA4AF;
  --ssa-red-200: #FECDD3;
  --ssa-red-100: #FFE4E6;
  --ssa-red-50:  #FFF1F3; /* Soft Ruby Surface */

  /* Orange Scale (#F48108) */
  --ssa-orange-900: #7C2D12;
  --ssa-orange-800: #9A3412;
  --ssa-orange-700: #C2410C;
  --ssa-orange-600: #EA580C;
  --ssa-orange-500: #F48108; /* Vibrant Orange */
  --ssa-orange-400: #FB923C;
  --ssa-orange-300: #FDBA74;
  --ssa-orange-200: #FED7AA;
  --ssa-orange-100: #FFEDD5;
  --ssa-orange-50:  #FFF7ED; /* Soft Amber */

  /* Sunshine Gold Scale (#F3A91E) */
  --ssa-gold-600: #D97706;
  --ssa-gold-500: #F3A91E; /* Sunshine Gold */
  --ssa-gold-400: #FBBF24;
  --ssa-gold-50:  #FEF3C7;

  /* Sky Blue Scale (#0782D3) */
  --ssa-blue-600: #0284C7;
  --ssa-blue-500: #0782D3; /* Sky Blue Kids */
  --ssa-blue-400: #38BDF8;
  --ssa-blue-50:  #E0F2FE;

  /* Yoga Lime Scale (#65A30D) */
  --ssa-lime-600: #4D7C0F;
  --ssa-lime-500: #65A30D; /* Yoga Lime */
  --ssa-lime-400: #A3E635;
  --ssa-lime-50:  #F7FEE7;

  /* ==========================================================================
     2. NEUTRAL COLOR SYSTEM (Slate Ink, Slate Body, Cool Surface, Border Line)
     ========================================================================== */
  --ssa-ink-900:       #0F172A; /* Slate Ink - Tiêu đề chính (Contrast > 14:1) */
  --ssa-ink-700:       #334155; /* Slate Body - Văn bản nội dung dễ đọc */
  --ssa-ink-500:       #64748B;
  --ssa-ink-400:       #94A3B8;
  --ssa-text-muted:    #64748B;
  --ssa-placeholder:   #94A3B8;
  --ssa-border:        #E2E8F0; /* Border Line - Viền thẻ tinh tế 1px */
  --ssa-border-strong: #CBD5E1;
  --ssa-surface:       #F8FAFC; /* Cool Surface - Nền phân tách section xen kẽ */
  --ssa-white:         #FFFFFF;
  --ssa-color-white:   #FFFFFF;

  /* Slate Scale - Exact Neutral Primitives */
  --ssa-slate-50:      #F8FAFC;
  --ssa-slate-100:     #F1F5F9;
  --ssa-slate-200:     #E2E8F0;
  --ssa-slate-300:     #CBD5E1;
  --ssa-slate-400:     #94A3B8;
  --ssa-slate-500:     #64748B;
  --ssa-slate-600:     #475569;
  --ssa-slate-700:     #334155;
  --ssa-slate-800:     #1E293B;
  --ssa-slate-900:     #0F172A;

  /* Functional / Error */
  --ssa-error:         #B42318;

  /* ==========================================================================
     3. BRAND GRADIENTS (12-COLOR BOARD)
     ========================================================================== */
  --ssa-gradient-brand: linear-gradient(135deg, #1E8742 0%, #F48108 50%, #DA0D43 100%);
  --ssa-gradient-hero:  linear-gradient(135deg, #0F172A 0%, #B81435 65%, #DA0D43 100%);
  --ssa-gradient-navy:  linear-gradient(135deg, #0F172A 0%, #1E8742 100%);

  /* ==========================================================================
     4. TYPOGRAPHY SYSTEM (Open Sans ONLY)
     ========================================================================== */
  --ssa-font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Font Weights */
  --ssa-fw-regular:   400;
  --ssa-fw-medium:    500;
  --ssa-fw-semibold:  600;
  --ssa-fw-bold:      700;
  --ssa-fw-extrabold: 800;
  --ssa-fw-black:     900;

  /* Fluid Typography Scale */
  --ssa-font-display: clamp(40px, 5vw, 64px);
  --ssa-lh-display:   1.125;

  --ssa-font-h1: clamp(36px, 4.2vw, 56px);
  --ssa-lh-h1:   1.14;

  --ssa-font-h2: clamp(32px, 3.4vw, 44px);
  --ssa-lh-h2:   1.22;

  --ssa-font-h3: clamp(26px, 2.5vw, 32px);
  --ssa-lh-h3:   1.25;

  --ssa-font-h4: clamp(21px, 2vw, 24px);
  --ssa-lh-h4:   1.33;

  --ssa-font-lead:  clamp(18px, 1.4vw, 20px);
  --ssa-lh-lead:    1.6;

  --ssa-font-body-lg: 18px;
  --ssa-lh-body-lg:   1.66;

  --ssa-font-body:    16px;
  --ssa-lh-body:      1.625;

  --ssa-font-small:   14px;
  --ssa-lh-small:     1.57;

  --ssa-font-btn:     16px;
  --ssa-lh-btn:       1.5;

  --ssa-font-nav:     15px;
  --ssa-lh-nav:       1.46;

  --ssa-font-eyebrow: 13px;
  --ssa-lh-eyebrow:   1.38;

  /* ==========================================================================
     5. SECTION BACKGROUNDS (LOCKED)
     ========================================================================== */
  --ssa-bg-default:    var(--ssa-white);
  --ssa-bg-soft-navy:  var(--ssa-navy-50);
  --ssa-bg-soft-green: var(--ssa-green-50);
  --ssa-bg-soft-warm:  var(--ssa-orange-50);
  --ssa-bg-brand-navy: var(--ssa-navy-500);
  --ssa-bg-deep-navy:  var(--ssa-navy-900);

  /* ==========================================================================
     6. RADIUS SYSTEM (CANONICAL SSA TOKEN NAMESPACE: --ssa-radius-*)
     ========================================================================== */
  --ssa-radius-xs:          4px;
  --ssa-radius-sm:          8px;
  --ssa-radius-md:          12px;
  --ssa-radius-lg:          20px;
  --ssa-radius-xl:          24px;   /* Canonical Card Radius: 20-24px */
  --ssa-radius-2xl:         22px;   /* Canonical Flat Skin Card Radius: 22px */
  --ssa-radius-medallion:   28px;   /* Canonical Medallion Icon Radius: 28px */
  --ssa-radius-medallion-lg: 30px;  /* Canonical Medallion Large Radius: 30px */
  --ssa-radius-tag:         999px;  /* Canonical Eyebrow / Tag Pill Radius: 999px */
  --ssa-radius-pill:        9999px; /* Canonical Unified Button Pill Radius: 9999px */
  --ssa-radius-circle:      50%;
  --ssa-radius-btn:         var(--ssa-radius-pill); /* Canonical Global Button Radius */
  --ssa-radius-card:        var(--ssa-radius-xl);   /* Canonical Card Radius */

  /* [LEGACY / DEPRECATED COMPATIBILITY ALIASES - Unprefixed] */
  --radius-xs:     var(--ssa-radius-xs);
  --radius-sm:     var(--ssa-radius-sm);
  --radius-md:     var(--ssa-radius-md);
  --radius-lg:     var(--ssa-radius-lg);
  --radius-xl:     var(--ssa-radius-xl);
  --radius-2xl:    var(--ssa-radius-2xl);
  --radius-pill:   var(--ssa-radius-pill);
  --radius-circle: var(--ssa-radius-circle);

  /* ==========================================================================
     7. SHADOW SYSTEM (CANONICAL SSA TOKEN NAMESPACE: --ssa-shadow-*)
     ========================================================================== */
  --ssa-shadow-sm: 0 2px 8px rgba(7, 47, 65, 0.06);
  --ssa-shadow-md: 0 8px 24px rgba(7, 47, 65, 0.08);
  --ssa-shadow-lg: 0 16px 40px rgba(7, 47, 65, 0.10);

  /* [LEGACY / DEPRECATED COMPATIBILITY ALIASES - Unprefixed] */
  --shadow-sm: var(--ssa-shadow-sm);
  --shadow-md: var(--ssa-shadow-md);
  --shadow-lg: var(--ssa-shadow-lg);

  /* ==========================================================================
     8. SPACING & CONTAINERS
     ========================================================================== */
  --ag-container:        1200px;
  --ag-container-wide:   1400px;
  --ag-container-narrow: 840px;
  --ag-gutter:           clamp(20px, 4vw, 64px);
  --ag-section-y:        64px;

  --ssa-container-max:    1200px;
  --ssa-container-wide:   1400px;
  --ssa-container-narrow: 840px;
  --ssa-container-gutter: clamp(20px, 4vw, 64px);
  --ssa-container-gutter-mobile: 16px;

  /* Hero geometry — shared with the floating main navigation */
  --ssa-hero-content-offset: clamp(250px, 24vw, 292px);
  --ssa-inner-hero-height: 440px;
  --ssa-inner-hero-height-compact: 400px;

  /* Spacing Scale (Base: 4px) */
  --ssa-space-1:  4px;
  --ssa-space-2:  8px;
  --ssa-space-3:  12px;
  --ssa-space-4:  16px;
  --ssa-space-5:  20px;
  --ssa-space-6:  24px;
  --ssa-space-8:  32px;
  --ssa-space-10: 40px;
  --ssa-space-12: 48px;
  --ssa-space-16: 64px;
  --ssa-space-20: 80px;
  --ssa-space-24: 96px;
  --ssa-space-30: 120px;

  /* ==========================================================================
     8.1 SEMANTIC VERTICAL RHYTHM & SPACING TOKENS (4px Contract - Fixed Px)
     ========================================================================== */
  --ssa-space-eyebrow-title:        var(--ssa-space-3); /* 12px: Tag -> Title */
  --ssa-space-title-description:    var(--ssa-space-3); /* 12px: Title -> Lead Description */
  --ssa-space-description-content:  32px; /* 32px desktop, 24px mobile: Description -> Content/Grid */
  --ssa-space-heading-content:      32px; /* 32px desktop, 24px mobile: Title (no desc) -> Content/Grid */
  --ssa-space-card-title-body:      var(--ssa-space-3); /* 12px: Card title -> body */
  --ssa-space-card-content:         24px; /* 24px desktop, 20px mobile: Card body padding */
  --ssa-grid-gap:                   24px; /* Standard grid gap */
  --ssa-grid-gap-lg:                28px; /* Editorial / Bento grid gap */
  --ssa-section-padding-y:          64px; /* Standard section vertical rhythm (balanced 64px) */
  --ssa-section-padding-y-compact:  44px; /* Secondary / conversion section rhythm (44px) */

  /* P2 Shared Components Rhythm Tokens (Codex Section 4 Step 5) */
  --ssa-space-breadcrumb-bar-y:        var(--ssa-space-3); /* 12px: Breadcrumb bar padding-block */
  --ssa-space-breadcrumb-pill-padding: var(--ssa-space-2) var(--ssa-space-3); /* 8px 12px: Breadcrumb pill */
  --ssa-space-form-label-control:      var(--ssa-space-2); /* 8px: Form field label -> control */
  --ssa-space-form-field-gap:          var(--ssa-space-5); /* 20px: Form field -> field gap (desktop) */
  --ssa-space-form-field-gap-mobile:   var(--ssa-space-4); /* 16px: Form field -> field gap (mobile) */
  --ssa-space-faq-gap-desktop:         40px; /* FAQ split grid column gap */
  --ssa-space-faq-gap-mobile:          var(--ssa-space-description-content); /* FAQ stacked gap (24-32px) */
  --ssa-space-faq-item-gap:            var(--ssa-space-3); /* 12px: Gap between accordion items */
  --ssa-space-faq-qa-gap:              var(--ssa-space-4); /* 16px: Question -> Answer transition */
  --ssa-space-cta-actions-gap:         var(--ssa-space-4); /* 16px: Action button gap */
  --ssa-space-cta-actions-gap-mobile:  var(--ssa-space-3); /* 12px: Mobile stacked action gap */
  --ssa-space-prose-block-gap:         var(--ssa-space-8); /* 32px: Editorial blocks rhythm (TOC, author, etc) */

  /* Section Spacing Aliases */
  --ag-section-y:                  var(--ssa-section-padding-y);
  --ssa-section-space:              var(--ssa-section-padding-y);

  /* ==========================================================================
     9. SEMANTIC TOKENS (OFFICIAL 12-COLOR BOARD: SSA EMERALD + RUBY CONVERSION)
     ========================================================================== */
  --ssa-text-heading:   #0F172A; /* Slate Ink - Tiêu đề chính (Contrast > 14:1) */
  --ssa-text-body:      #334155; /* Slate Body - Văn bản nội dung dễ đọc */
  --ssa-text-secondary: #64748B; /* Slate 500 - Refined Secondary Label */

  --ssa-bg-page:        #FFFFFF;
  --ssa-bg-soft:        #F8FAFC; /* Cool Surface - Nền phân tách section xen kẽ */
  --ssa-bg-navy-soft:   #ECFDF3; /* Emerald Soft */
  --ssa-bg-green-soft:  #ECFDF3; /* Emerald Soft - Nền thẻ xanh, Badge Mầm non */
  --ssa-bg-ruby-soft:   #FFF1F3; /* Soft Ruby Surface */
  --ssa-bg-warm:        #FFF7ED; /* Soft Warm Surface */
  --ssa-bg-orange-soft: #FFF7ED;
  --ssa-surface-warm:   #FFF7ED;

  --ssa-primary:        #1E8742; /* SSA Emerald: Thương hiệu, Nav Active, Stats */
  --ssa-primary-hover:  #166534;
  --ssa-primary-dark:   #14532D;
  --ssa-secondary:      #DA0D43; /* Ruby Conversion: Hero, CTA chính, Cấp 1 (6–11t) */
  --ssa-secondary-hover:#B81435; /* Ruby Crimson: Nền Hero chuyển sắc đậm */
  --ssa-cta:            #DA0D43; /* Ruby Conversion: CTA chính */
  --ssa-cta-hover:      #B81435; /* Ruby Crimson */
  --ssa-ruby:           #DA0D43;
  --ssa-ruby-crimson:   #B81435;
  --ssa-emerald:        #1E8742;
  --ssa-emerald-soft:   #ECFDF3;
  --ssa-gold:           #F3A91E; /* Sunshine Gold: CTA nổi trên nền đỏ, Sao 5★ */
  --ssa-orange:         #F48108; /* Vibrant Orange: Nhãn Cấp 2 (11–16t), Ưu đãi */
  --ssa-accent:         #F48108;
  --ssa-accent-hover:   #C2410C;
  --ssa-blue:           #0782D3; /* Sky Blue Kids: Art Class, Thẻ ưu đãi học thử */
  --ssa-lime:           #65A30D; /* Yoga Lime: Yoga Studio, Hoạt động thể chất */

  --ssa-card-bg:        var(--ssa-white);

  /* ==========================================================================
     10. BACKWARDS-COMPATIBILITY ALIASES
     ========================================================================== */
  --ag-color-bg:               var(--ssa-white);
  --ag-color-surface:          var(--ssa-white);
  --ag-color-surface-elevated: var(--ssa-surface);
  --ag-color-text:             var(--ssa-navy-900);
  --ag-color-muted:            var(--ssa-text-muted);
  --ag-color-subtle:           var(--ssa-placeholder);
  --ag-color-line:             var(--ssa-border);
  --ag-color-line-light:       var(--ssa-navy-50);

  --ag-color-navy:        var(--ssa-primary);
  --ag-color-navy-dark:   var(--ssa-primary-dark);
  --ag-color-emerald:     var(--ssa-primary);
  --ag-color-emerald-dark:#14532D;
  --ag-color-accent:      var(--ssa-cta);
  --ag-color-accent-hover:var(--ssa-cta-hover);

  --ag-font-primary: var(--ssa-font-family);
  --ag-font-display: var(--ssa-font-family);
  --ag-font-serif:   var(--ssa-font-family);

  --ag-h1: var(--ssa-font-h1);
  --ag-h2: var(--ssa-font-h2);
  --ag-h3: var(--ssa-font-h3);
  --ag-h4: var(--ssa-font-h4);
  --ag-body: var(--ssa-font-body);
  --ag-small: var(--ssa-font-small);
  --ag-xs: 12px;

  --ag-lh-display: var(--ssa-lh-h1);
  --ag-lh-heading: var(--ssa-lh-h2);
  --ag-lh-body:    var(--ssa-lh-body);

  --ag-radius-sm:   var(--radius-sm);
  --ag-radius-md:   var(--radius-md);
  --ag-radius-lg:   var(--radius-lg);
  --ag-radius-xl:   var(--radius-xl);
  --ag-radius-pill: var(--radius-pill);

  --ag-shadow-card: var(--shadow-sm);
  --ag-shadow-glow: none;
  --ag-shadow-glow-navy: none;

  --ag-transition: 180ms ease;
  --ag-transition-smooth: 300ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Temporary aliases for active sections awaiting ssa-* markup migration */
  --ag-spacing-sm: var(--ssa-space-4);
  --ag-spacing-md: var(--ssa-space-6);
  --ag-spacing-lg: var(--ssa-space-10);
  --ag-spacing-xl: var(--ssa-space-16);
  --ag-color-accent-glow: rgba(218, 13, 67, 0.14);

  /* ==========================================================================
     11. RGB COMPANIONS (12-Color Distribution)
     ========================================================================== */
  --ssa-green-rgb:      30, 135, 66;   /* #1E8742 SSA Emerald */
  --ssa-navy-rgb:       30, 135, 66;   /* Aliased to Emerald */
  --ssa-ruby-rgb:       218, 13, 67;   /* #DA0D43 Ruby Conversion */
  --ssa-orange-rgb:     244, 129, 8;   /* #F48108 Vibrant Orange */
  --ssa-gold-rgb:       243, 169, 30;  /* #F3A91E Sunshine Gold */
  --ssa-blue-rgb:       7, 130, 211;   /* #0782D3 Sky Blue Kids */
  --ssa-lime-rgb:       101, 163, 13;  /* #65A30D Yoga Lime */
  --ssa-navy-900-rgb:   15, 23, 42;    /* #0F172A Slate Ink */

  /* ==========================================================================
     12. LIQUID GLASS MATERIAL TOKENS (INTERFACE LAYER SYSTEM)
     ========================================================================== */
  --ssa-glass-light:          rgba(255, 255, 255, 0.76);
  --ssa-glass-light-strong:   rgba(255, 255, 255, 0.88);
  --ssa-glass-dark:           rgba(15, 23, 42, 0.68);
  --ssa-glass-dark-strong:    rgba(15, 23, 42, 0.86);
  --ssa-glass-border:         rgba(255, 255, 255, 0.48);
  --ssa-glass-border-dark:    rgba(255, 255, 255, 0.14);
  --ssa-glass-highlight:      rgba(255, 255, 255, 0.85);
  --ssa-glass-highlight-dark: rgba(255, 255, 255, 0.18);
  --ssa-glass-blur:           24px;
  --ssa-glass-blur-sm:        14px;
  --ssa-glass-saturation:     135%;
  --ssa-glass-shadow:         0 16px 44px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04);
  --ssa-glass-shadow-sm:      0 8px 24px rgba(15, 23, 42, 0.06);

  /* Brand Material — translucent only when a colored field exists behind it */
  --ssa-material-surface:       rgba(255, 255, 255, 0.70);
  --ssa-material-surface-solid: rgba(255, 255, 255, 0.90);
  --ssa-material-stroke:        rgba(255, 255, 255, 0.78);
  --ssa-material-stroke-dark:   rgba(30, 135, 66, 0.12);
  --ssa-material-highlight:     inset 0 1px 0 rgba(255, 255, 255, 0.94);
  --ssa-material-shadow:        0 18px 50px -18px rgba(15, 23, 42, 0.18), 0 4px 14px rgba(15, 23, 42, 0.05);
  --ssa-material-shadow-hover:  0 28px 68px -20px rgba(15, 23, 42, 0.24), 0 8px 20px rgba(15, 23, 42, 0.07);
  --ssa-material-blur:          22px;
  --ssa-material-saturation:    145%;

  /* ==========================================================================
     13. GLOBAL MOTION TOKENS
     ========================================================================== */
  --ssa-ease-standard:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ssa-ease-emphasized:   cubic-bezier(0.16, 1, 0.3, 1);
  --ssa-duration-fast:     180ms;
  --ssa-duration-standard: 320ms;
  --ssa-duration-slow:     560ms;

  /* ==========================================================================
     14. AMBIENT DEPTH & SHADOWS
     ========================================================================== */
  --ssa-shadow-ambient:    0 24px 64px -12px rgba(15, 23, 42, 0.10);
  --ssa-shadow-card-craft: 0 2px 4px rgba(15, 23, 42, 0.02), 0 10px 28px -6px rgba(15, 23, 42, 0.06);
  --ssa-shadow-card-hover: 0 4px 10px rgba(15, 23, 42, 0.04), 0 18px 40px -8px rgba(15, 23, 42, 0.10);

  /* ==========================================================================
     15. SEMANTIC Z-INDEX SCALE
     ========================================================================== */
  --ssa-z-below:    -1;
  --ssa-z-base:      1;
  --ssa-z-content:   2;
  --ssa-z-above:     3;
  --ssa-z-badge:    10;
  --ssa-z-sticky:   100;
  --ssa-z-header:   500;
  --ssa-z-dropdown: 600;
  --ssa-z-contact:  900;
  --ssa-z-modal:    1000;
  --ssa-z-toast:    10000;
}

@media (max-width: 991px) {
  :root {
    --ssa-section-padding-y:          48px;
    --ssa-section-padding-y-compact:  36px;
    --ag-section-y:                  48px;
    --ssa-section-space:              48px;
    --ssa-space-description-content:  28px;
    --ssa-space-heading-content:      28px;
    --ssa-grid-gap-lg:                24px;
    --ssa-space-faq-gap-desktop:      32px;
  }
}

@media (max-width: 767px) {
  :root {
    --ssa-section-padding-y:          40px;
    --ssa-section-padding-y-compact:  32px;
    --ag-section-y:                  40px;
    --ssa-section-space:              40px;
    --ssa-space-description-content:  24px;
    --ssa-space-heading-content:      24px;
    --ssa-space-card-content:         20px;
    --ssa-grid-gap:                   20px;
    --ssa-grid-gap-lg:                20px;
  }
}