/* ========================================
   DESIGN TOKENS
   QPS colour palette, typography, spacing
   ======================================== */

:root {
    /* ---- Colour Palette ---- */
    /* Derived from QPS logo: warm amber/orange + deep blue */

    /* Foundations */
    --color-black:        #0B0C10;
    --color-white:        #FAFAF8;
    --color-off-white:    #F1F0EC;

    /* Neutrals - warm undertone */
    --color-grey-100:     #E6E5E1;
    --color-grey-200:     #D1D0CB;
    --color-grey-300:     #A9A8A3;
    --color-grey-400:     #85847F;
    --color-grey-500:     #66655F;
    --color-grey-600:     #46453F;
    --color-grey-700:     #2B2A26;
    --color-grey-800:     #181714;

    /* Primary - deep blue (from logo) */
    --color-primary:      #1A2B4A;
    --color-primary-dark:  #111D33;
    --color-primary-light: #253D62;

    /* Accent - warm amber/orange (from logo flame) */
    --color-accent:       #E8852F;
    --color-accent-dark:  #CC7225;
    --color-accent-light: #F0A35C;

    /* Secondary accent - the blue-to-teal from logo text */
    --color-secondary:    #2D7EB5;
    --color-secondary-dark: #245F8A;
    --color-secondary-light: #4A9BD0;

    /* Functional */
    --color-success:      #5A8A6A;
    --color-error:        #C45555;

    /* ---- Semantic Assignments ---- */
    --bg-primary:         var(--color-black);
    --bg-secondary:       var(--color-primary);
    --bg-surface:         var(--color-grey-800);
    --bg-light:           var(--color-off-white);

    --text-primary:       var(--color-white);
    --text-secondary:     var(--color-grey-300);
    --text-muted:         var(--color-grey-400);
    --text-dark:          var(--color-primary);
    --text-accent:        var(--color-accent);

    --border-subtle:      rgba(255, 255, 255, 0.08);
    --border-light:       rgba(255, 255, 255, 0.14);
    --border-accent:      var(--color-accent);

    /* ---- Typography ---- */
    --font-heading:       'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:          'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --fw-light:           300;
    --fw-regular:         400;
    --fw-medium:          500;
    --fw-semibold:        600;
    --fw-bold:            700;
    --fw-extrabold:       800;

    /* Fluid type scale (clamp: min, preferred, max) */
    --text-xs:            clamp(0.6875rem, 0.65rem + 0.19vw, 0.8125rem);    /* ~11-13px */
    --text-sm:            clamp(0.8125rem, 0.775rem + 0.19vw, 0.9375rem);   /* ~13-15px */
    --text-base:          clamp(0.9375rem, 0.9rem + 0.19vw, 1.0625rem);     /* ~15-17px */
    --text-md:            clamp(1.0625rem, 1rem + 0.31vw, 1.25rem);         /* ~17-20px */
    --text-lg:            clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);         /* ~20-28px */
    --text-xl:            clamp(1.75rem, 1.45rem + 1.5vw, 2.75rem);         /* ~28-44px */
    --text-2xl:           clamp(2.25rem, 1.7rem + 2.75vw, 4rem);            /* ~36-64px */
    --text-3xl:           clamp(2.75rem, 2rem + 3.75vw, 5.25rem);           /* ~44-84px */

    --leading-tight:      1.1;
    --leading-snug:       1.25;
    --leading-normal:     1.6;
    --leading-relaxed:    1.75;

    --tracking-tight:     -0.03em;
    --tracking-normal:    -0.01em;
    --tracking-wide:      0.08em;
    --tracking-wider:     0.14em;

    /* ---- Spacing Scale ---- */
    --space-2xs:          clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
    --space-xs:           clamp(0.5rem, 0.4rem + 0.5vw, 0.875rem);
    --space-sm:           clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);
    --space-md:           clamp(1rem, 0.8rem + 1vw, 1.75rem);
    --space-lg:           clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    --space-xl:           clamp(2rem, 1.5rem + 2.5vw, 4rem);
    --space-2xl:          clamp(3rem, 2rem + 5vw, 7rem);
    --space-3xl:          clamp(4rem, 2.5rem + 7.5vw, 10rem);

    /* ---- Layout ---- */
    --container-max:      1360px;
    --gutter:             clamp(1.25rem, 1rem + 1.25vw, 2.5rem);
    --header-height:      72px;

    /* ---- Borders & Radius ---- */
    --radius-sm:          4px;
    --radius-md:          6px;
    --radius-lg:          10px;
    --radius-full:        9999px;

    /* ---- Transitions ---- */
    --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast:      200ms;
    --duration-base:      400ms;
    --duration-slow:      700ms;
    --duration-slower:    1000ms;

    /* ---- Shadows ---- */
    --shadow-sm:          0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-md:          0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-lg:          0 8px 30px rgba(0, 0, 0, 0.3);
}