/*
 * Design Tokens — WightFibre Refresh 2026
 * Source: Figma file 1MkwduwXJuXzSv6PX5hB34
 * All values are reusable CSS custom properties.
 */

:root {

    /* ─── Colours ─────────────────────────────────────────── */

    --color-primary:        #1F7CE0;
    --color-cyan:           #2BC6E5;
    --color-green:          #14D831;

    --color-black:          #000000;
    --color-dark:           #1E1E1E;
    --color-gray-600:       #868686;
    --color-gray-500:       #9F9F9F;
    --color-gray-400:       #C7C7C7;
    --color-gray-300:       #CDCDCD;
    --color-bg-light:       #F4F4F4;
    --color-white:          #FFFFFF;

    --color-white-10:       rgba(255, 255, 255, 0.10);
    --color-gray-overlay:   rgba(205, 205, 205, 0.86);

    /* ─── Gradients ───────────────────────────────────────── */

    --gradient-primary:     linear-gradient(180deg, #1F7CE0 0%, #2BC6E5 100%);
    --gradient-dark-blue:   linear-gradient(180deg, #17286A 0%, #2742C3 100%);
    --gradient-cyan-fade:   linear-gradient(180deg, rgba(43, 198, 229, 0) 0%, rgba(43, 198, 229, 1) 100%);

    /* ─── Typography — family ─────────────────────────────── */

    --font-family-base:     'DM Sans', sans-serif;

    /* ─── Typography — weights ────────────────────────────── */

    --font-weight-regular:    400;
    --font-weight-medium:     500;
    --font-weight-bold:       700;
    --font-weight-extrabold:  800;

    /* ─── Typography — sizes ──────────────────────────────── */

    --font-size-xxs:   0.625rem;   /* 10px */
    --font-size-xs:    0.75rem;    /* 12px */
    --font-size-sm:    0.875rem;   /* 14px */
    --font-size-base:  1rem;       /* 16px */
    --font-size-md:    1.125rem;   /* 18px */
    --font-size-lg:    1.25rem;    /* 20px */
    --font-size-xl:    1.375rem;   /* 22px */
    --font-size-2xl:   1.5rem;     /* 24px */
    --font-size-3xl:   1.75rem;    /* 28px */
    --font-size-4xl:   2rem;       /* 32px */
    --font-size-5xl:   2.25rem;    /* 36px */
    --font-size-6xl:   2.625rem;   /* 42px */
    --font-size-7xl:   2.875rem;   /* 46px */
    --font-size-8xl:   3.25rem;    /* 52px */
    --font-size-9xl:   4rem;       /* 64px */

    /* ─── Typography — line heights ───────────────────────── */

    --line-height-tight:   1.2;
    --line-height-snug:    1.4;
    --line-height-base:    1.875rem;  /* 30px — used on body copy */
    --line-height-relaxed: 1.8;

    /* ─── Spacing (base-8 scale) ──────────────────────────── */

    --space-1:   0.25rem;   /*  4px */
    --space-2:   0.5rem;    /*  8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */
    --space-24:  6rem;      /* 96px */

    /* ─── Border radius ───────────────────────────────────── */

    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* ─── Transitions ─────────────────────────────────────── */

    --transition-base:   150ms ease;
    --transition-smooth: 300ms ease;

}