/* 
   RECALCULATED FOR 62.5% BASE (1rem = 10px)
   The variables file contains zero actual design. 
   It is a list of definitions for later use.
*/

:root {

    /* ==========================================================================
       PRIMITIVES (Raw Values / The "What")
       ========================================================================== */

    /* --- PRIMARY (BOSS) COLOUR --- */
    --p-h: 0; 
    --p-s: 0%; 
    --p-l: 100%; 
    --p-a: 1;
    --clr-primary: hsla(var(--p-h), var(--p-s), var(--p-l), var(--p-a));

    /* --- MAIN BRAND COLOURS --- */

    /* Brand Colour 2 */
    --b2-h: 160; 
    --b2-s: 70%; 
    --b2-l: 45%; 
    --b2-a: 1;
    --clr-brand-2: hsla(var(--b2-h), var(--b2-s), var(--b2-l), var(--b2-a));

    /* Brand Colour 3 */
    --b3-h: 10; 
    --b3-s: 85%; 
    --b3-l: 55%; 
    --b3-a: 1;
    --clr-brand-3: hsla(var(--b3-h), var(--b3-s), var(--b3-l), var(--b3-a));

    /* --- ACCENT COLOURS --- */

    /* Accent Colour 1 */
    --acc1-h: 30; 
    --acc1-s: 60%; 
    --acc1-l: 50%; 
    --acc1-a: 1;
    --clr-acc-1: hsla(var(--acc1-h), var(--acc1-s), var(--acc1-l), var(--acc1-a));

    /* Accent Colour 2 */
    --acc2-h: 10; 
    --acc2-s: 85%; 
    --acc2-l: 55%; 
    --acc2-a: 1;
    --clr-acc-2: hsla(var(--acc2-h), var(--acc2-s), var(--acc2-l), var(--acc2-a));

    /* --- NEUTRAL COLOURS --- */
    --n-h: var(--p-h); 
    --n-s: 10%;
    --clr-white: hsla(0, 0%, 100%, 1);
    --clr-n-100: hsla(var(--n-h), var(--n-s), 97%, 1);
    --clr-n-200: hsla(var(--n-h), var(--n-s), 90%, 1);
    --clr-n-400: hsla(var(--n-h), var(--n-s), 60%, 1);
    --clr-n-600: hsla(var(--n-h), var(--n-s), 40%, 1);
    --clr-n-900: hsla(var(--n-h), var(--n-s), 12%, 1);
    --clr-black: hsla(var(--n-h), var(--n-s), 5%, 1);

    /* --- STATUS COLOURS --- */
    --success-h: 140; 
    --success-s: 80%; 
    --success-l: 40%;
    --clr-success: hsla(var(--success-h), var(--success-s), var(--success-l), 1);

    --error-h: 0; 
    --error-s: 85%; 
    --error-l: 50%;
    --clr-error: hsla(var(--error-h), var(--error-s), var(--error-l), 1);

    --warning-h: 45; 
    --warning-s: 90%; 
    --warning-l: 50%;
    --clr-warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 1);

    /* --- FIXED FONT SIZE (1rem = 10px) --- */
    --fs-100: 1.2rem;     /* 12px */
    --fs-150: 1.3rem;     /* 13px */
    --fs-200: 1.4rem;     /* 14px */
    --fs-400: 1.6rem;     /* 16px */
    --fs-500: 1.8rem;     /* 18px */
    --fs-600: 2.0rem;     /* 20px */
    --fs-700: 2.4rem;     /* 24px */
    --fs-800: 3.2rem;     /* 32px */
    --fs-900: 4.8rem;     /* 48px */
    --fs-1000: 6.4rem;    /* 64px */

    /* --- FLUID FONT SIZE (viewport 320-1280px) --- */
    --fs-fluid-100: clamp(1.4rem, 1.3333rem + 0.2083vw, 1.6rem);    /* 14-16px */
    --fs-fluid-150: clamp(1.2rem, 0.625vw + 1rem, 1.8rem);          /* 12-18px */
    --fs-fluid-200: clamp(1.4rem, 1.2667rem + 0.4167vw, 1.8rem);    /* 14-18px */
    --fs-fluid-300: clamp(1.6rem, 1.5333rem + 0.2083vw, 1.8rem);    /* 16-18px */
    --fs-fluid-400: clamp(1.6rem, 1.4667rem + 0.4167vw, 2.0rem);    /* 16-20px */
    --fs-fluid-600: clamp(2.0rem, 1.8667rem + 0.4167vw, 2.4rem);    /* 20-24px */
    --fs-fluid-700: clamp(1.6rem, 1.0667rem + 1.6667vw, 3.2rem);    /* 16-32px */
    --fs-fluid-800: clamp(2.4rem, 2.1333rem + 0.8333vw, 3.2rem);    /* 24-32px */
    --fs-fluid-900: clamp(3.2rem, 2.128rem + 3.33vw, 6.4rem);       /* 32-64px */
    --fs-fluid-1000: clamp(4.8rem, 4.2667rem + 1.6667vw, 6.4rem);   /* 48-64px */

    /* --- FIXED SPACING (1rem = 10px) --- */
    --space-100: 0.4rem;   /* 4px */
    --space-200: 0.8rem;   /* 8px */
    --space-300: 1.2rem;   /* 12px */
    --space-400: 1.6rem;   /* 16px */
    --space-500: 2.4rem;   /* 24px */
    --space-600: 3.2rem;   /* 32px */
    --space-700: 4.8rem;   /* 48px */
    --space-800: 6.4rem;   /* 64px */
    --space-900: 8.0rem;   /* 80px */
    --space-1000: 9.6rem;  /* 96px */

    /* --- FLUID SPACING (viewport 320-1280px) --- */

    --space-fluid-400:  clamp(1.6rem, 1.3333rem + 0.8333vw, 2.4rem);   /* 16-24px */
    --space-fluid-500:  clamp(1.6rem, 0.5333rem + 3.3333vw, 4.8rem);   /* 16-48px */
    --space-fluid-600:  clamp(3.2rem, 2.6667rem + 1.6667vw, 4.8rem);   /* 32-48px */
    --space-fluid-800:  clamp(6.4rem, 5.3333rem + 3.3333vw, 9.6rem);   /* 64-96px */
    --space-fluid-1000: clamp(9.6rem, 7.4667rem + 6.6667vw, 16.0rem);  /* 96-160px */

    /* --- CONTAINER WIDTHS --- */
    --container-400: 48.0rem;    /* 480px */
    --container-600: 76.8rem;    /* 768px */
    --container-800: 102.4rem;   /* 1024px */
    --container-1000: 128.0rem;  /* 1280px */
    --container-1200: 144.0rem;  /* 1440px */

    /* --- MEASURE SCALE (Character Widths) --- */
    --measure-200: 20ch;
    --measure-400: 40ch;  
    --measure-600: 60ch;  
    --measure-800: 80ch;

    /* --- GRID TRACKS --- */
    --grid-1:  repeat(1, minmax(0, 1fr));
    --grid-2:  repeat(2, minmax(0, 1fr));
    --grid-3:  repeat(3, minmax(0, 1fr));
    --grid-4:  repeat(4, minmax(0, 1fr));
    --grid-6:  repeat(6, minmax(0, 1fr));
    --grid-12: repeat(12, minmax(0, 1fr));

    --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);


    /* ==========================================================================
       SEMANTIC TOKENS (Intent / The "Why")
       ========================================================================== */

    /* --- Brand & Surface Colour --- */
    --clr-bg-body: var(--clr-n-100);
    --clr-bg-surface: var(--clr-white);
    --clr-border-main: var(--clr-n-200);

    /* --- Typography Colour --- */
    --clr-text-main: #1d1d1f;
    --clr-text-muted: #6e6e73;
    --clr-text-tv: hsla(0, 0%, 100%, 0.7);
    --clr-text-accent: var(--clr-primary);

    /* --- Interactive Elements Colour --- */
    --clr-action-primary: var(--clr-primary);
    --clr-action-hover: var(--clr-brand-2);

    /* --- Layout & Spacing --- */
    --gutter: var(--space-fluid-600);
    --section-gap: var(--space-fluid-800);
    --container: var(--container-1000);

    /* --- Navigation --- */
    --clr-nav-link: var(--clr-white);
    --clr-nav-link-hover: var(--clr-action-hover);
    --clr-nav-link-active: var(--clr-primary);
    --fs-nav-link: var(--fs-fluid-150);
    --fw-nav-link: 500;
    --ls-nav-link: 0.2em;

    /* --- Hero h1 Text --- */
    --clr-hero-h1: var(--clr-white);
    --fs-hero-h1: clamp(3.2rem, 5.179vw + 1.543rem, 9.0rem); /* 32px to 90px */
    --fw-hero-h1: 300;
    --ls-hero-h1: 0.2em;
}