/* SmileScience Design Tokens — single source of truth */
:root {
    /* Brand colors */
    --lxf-navy:       #002559;
    --lxf-blue:        #467FF7;  /* brand/decorative — non-text uses */
    --lxf-blue-text:   #1d57d4;  /* text: links, labels, eyebrows — 6.18:1 on white */
    --lxf-blue-action: #1d57d4;  /* interactive: button fills, CTA backgrounds */
    --lxf-blue-hover:  #2d68e4;  /* hover state: lightened from #1d57d4 */
    --lxf-light-blue:  #DFEEFF;
    --lxf-white:      #ffffff;
    --lxf-gray-100:   #f8f9fa;
    --lxf-gray-200:   #e9ecef;
    --lxf-gray-300:   #dee2e6;
    --lxf-gray-400:   #ced4da;
    --lxf-gray-500:   #6b7280; /* 4.83:1 on white — up from #9ca3af (2.54:1 fail) */
    --lxf-gray-600:   #4b5563;
    --lxf-gray-700:   #374151;
    --lxf-gray-900:   #111827;

    /* Semantic color aliases */
    --lxf-text-heading:   var(--lxf-gray-900);
    --lxf-text-body:      var(--lxf-gray-600);
    --lxf-text-muted:     var(--lxf-gray-500);
    --lxf-border:         var(--lxf-gray-200);
    --lxf-border-strong:  var(--lxf-gray-300);
    --lxf-surface:        var(--lxf-gray-100);

    /* Typography */
    --lxf-font-body:    'DM Sans', sans-serif;
    --lxf-font-display: 'Cormorant Garamond', Georgia, serif;
    --lxf-font-heading: var(--lxf-font-display); /* alias used by token CSS files */

    /* Layout */
    --lxf-container: 1200px;
    --lxf-radius:    0.375rem;
    --lxf-radius-lg: 0.75rem;

    /* Shadows (navy-tinted) */
    --lxf-shadow-sm: 0 1px 2px rgba(0, 37, 89, 0.06);
    --lxf-shadow-md: 0 4px 12px rgba(0, 37, 89, 0.10);
    --lxf-shadow-lg: 0 8px 24px rgba(0, 37, 89, 0.14);

    /* Chrome spacing — header/footer/nav internal gaps.
     * Named --lxf-chrome-* to avoid collision with the section-level
     * --lxf-space-sm/md/lg/xl scale defined in mu-plugin global.css. */
    --lxf-chrome-xs:  0.25rem;
    --lxf-chrome-sm:  0.5rem;
    --lxf-chrome-md:  1rem;
    --lxf-chrome-lg:  1.5rem;
    --lxf-chrome-xl:  2.5rem;
    --lxf-chrome-2xl: 4rem;

    /* Header */
    --lxf-header-topbar-height: 60px;
    --lxf-header-nav-height:    48px;
    --lxf-header-total:        108px;

    /* Transitions */
    --lxf-transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}