:root {
    /* Brand */
    --qc-primary:        #fbc400;
    --qc-primary-dark:   #d4a000;
    --qc-primary-light:  #fef3c7;
    --qc-dark:           #161d30;
    --qc-dark-mid:       #1e2740;
    --qc-white:          #ffffff;
    --qc-footer-bg:      #0f1420;

    /* Neutrals */
    --qc-gray-50:   #f8f9fa;
    --qc-gray-100:  #f3f4f6;
    --qc-gray-200:  #e5e7eb;
    --qc-gray-300:  #d1d5db;
    --qc-gray-400:  #9ca3af;
    --qc-gray-500:  #6b7280;
    --qc-gray-600:  #4b5563;
    --qc-gray-700:  #374151;
    --qc-gray-800:  #1f2937;
    --qc-gray-900:  #111827;

    /* Status */
    --qc-success:       #10b981;
    --qc-success-light: #d1fae5;
    --qc-error:         #ef4444;
    --qc-error-light:   #fee2e2;
    --qc-warning:       #f59e0b;

    /* Typography */
    --qc-font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --qc-font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --qc-text-xs:   0.75rem;
    --qc-text-sm:   0.875rem;
    --qc-text-base: 1rem;
    --qc-text-lg:   1.125rem;
    --qc-text-xl:   1.25rem;
    --qc-text-2xl:  1.5rem;
    --qc-text-3xl:  1.875rem;
    --qc-text-4xl:  2.25rem;
    --qc-text-5xl:  3rem;

    /* Spacing */
    --qc-sp-2:  0.5rem;
    --qc-sp-3:  0.75rem;
    --qc-sp-4:  1rem;
    --qc-sp-5:  1.25rem;
    --qc-sp-6:  1.5rem;
    --qc-sp-8:  2rem;
    --qc-sp-10: 2.5rem;
    --qc-sp-12: 3rem;
    --qc-sp-16: 4rem;
    --qc-sp-20: 5rem;
    --qc-sp-24: 6rem;

    /* Radii */
    --qc-radius-sm: 0.375rem;
    --qc-radius:    0.5rem;
    --qc-radius-md: 0.625rem;
    --qc-radius-lg: 0.75rem;
    --qc-radius-xl: 1rem;
    --qc-radius-2xl:1.5rem;

    /* Shadows */
    --qc-shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.1);
    --qc-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1);
    --qc-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1);
    --qc-shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1);

    /* Brand aliases (canonical names per brand spec) */
    --qc-yellow: #fbc400;
    --qc-navy:   #161d30;
    --qc-teal:   #284b63;

    /* Widget */
    --qc-widget-border:  2px solid var(--qc-dark);
    --qc-shadow-widget:  0 12px 20px -5px rgb(22 29 48 / 0.15);

    /* Layout */
    --qc-max-width: 1180px;
    --qc-header-h:  64px;
}