/*
 * Whyso Design System — tokens.css
 * Project: Contenze Test
 * Generated: 2026-05-10T09:28:23+00:00
 *
 * Semantic layer + scales. Brand-layer values come from
 * tokens-contenze-test.css which loads first.
 *
 * Do not edit this file by hand — regenerate from the Whyso hub.
 */

:root {
    /* --------------------------------------------------------------------
     * Type scale — fluid clamp, 320px → 1440px
     * ----------------------------------------------------------------- */
    --text-xs: clamp(0.75rem, 0.7143rem + 0.1786vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8393rem + 0.1786vw, 1rem);
    --text-base: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
    --text-md: clamp(1.125rem, 1.0536rem + 0.3571vw, 1.375rem);
    --text-lg: clamp(1.25rem, 1.1071rem + 0.7143vw, 1.75rem);
    --text-xl: clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem);
    --text-2xl: clamp(1.75rem, 1.3929rem + 1.7857vw, 3rem);
    --text-3xl: clamp(2.25rem, 1.75rem + 2.5vw, 4rem);
    --text-4xl: clamp(3rem, 2.4286rem + 2.8571vw, 5rem);
    --text-5xl: clamp(3.75rem, 3.0357rem + 3.5714vw, 6.25rem);
    --text-6xl: clamp(4.5rem, 3.6429rem + 4.2857vw, 7.5rem);

    /* --------------------------------------------------------------------
     * Space scale — fluid clamp, 320px → 1440px
     * ----------------------------------------------------------------- */
    --space-3xs: clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem);
    --space-2xs: clamp(0.375rem, 0.3036rem + 0.3571vw, 0.625rem);
    --space-xs: clamp(0.5rem, 0.3929rem + 0.5357vw, 0.875rem);
    --space-sm: clamp(0.75rem, 0.6071rem + 0.7143vw, 1.25rem);
    --space-md: clamp(1rem, 0.7143rem + 1.4286vw, 2rem);
    --space-lg: clamp(1.5rem, 1.0714rem + 2.1429vw, 3rem);
    --space-xl: clamp(2rem, 1.1429rem + 4.2857vw, 5rem);
    --space-2xl: clamp(3rem, 1.7143rem + 6.4286vw, 7.5rem);
    --space-3xl: clamp(4rem, 2.2857rem + 8.5714vw, 10rem);
    --space-4xl: clamp(6rem, 3.4286rem + 12.8571vw, 15rem);

    /* --------------------------------------------------------------------
     * Semantic colours — reference --brand-* from tokens-contenze-test.css
     * ----------------------------------------------------------------- */
    /* Surfaces */
    --color-bg: var(--brand-white);
    --color-bg-alt: var(--brand-neutral-100);
    --color-bg-dark: var(--brand-neutral-800);
    --color-bg-darker: var(--brand-black);

    /* Text */
    --color-text: var(--brand-neutral-900);
    --color-text-muted: var(--brand-neutral-600);
    --color-text-inverse: var(--brand-white);

    /* Headings */
    --color-heading: var(--brand-neutral-900);
    --color-heading-inverse: var(--brand-white);

    /* Interactive */
    --color-primary: var(--brand-primary);
    --color-primary-hover: color-mix(in srgb, var(--brand-primary) 85%, black);
    --color-accent: var(--brand-accent);
    --color-highlight: var(--brand-highlight);

    /* Borders */
    --color-border: var(--brand-neutral-200);
    --color-border-strong: var(--brand-neutral-400);

    /* --------------------------------------------------------------------
     * Typography
     * ----------------------------------------------------------------- */
    /* Families resolved via --brand-* */
    --font-heading: var(--brand-font-heading);
    --font-body: var(--brand-font-body);

    /* Leading */
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-loose: 1.8;

    /* Tracking */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;

    /* --------------------------------------------------------------------
     * Layout — container widths, gutter, section padding
     * ----------------------------------------------------------------- */
    /* Semantic container widths — match the ContainerWidth enum */
    --container-narrow:   640px;
    --container-standard: 1200px;
    --container-wide:     1440px;
    --container-max:      1600px;
    --container-gutter:   var(--space-md);
    /* Horizontal padding used by every .container — fluid 16–32px */
    --container-pad:      clamp(1rem, 0.5rem + 2vw, 2rem);

    /* Legacy px-based aliases — retained for templates that use them */
    --container-sm: var(--container-narrow);
    --container-md: 960px;
    --container-lg: var(--container-standard);
    --container-xl: var(--container-wide);

    /* Section rhythm */
    --gutter: var(--container-gutter);
    --section-padding: var(--space-2xl);
    --grid-gap: var(--space-md);
    --grid-columns: 12;

    /* --------------------------------------------------------------------
     * Radii
     * ----------------------------------------------------------------- */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* --------------------------------------------------------------------
     * Shadows
     * ----------------------------------------------------------------- */
    --shadow-sm:    0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:    0 2px 6px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-lg:    0 6px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-xl:    0 12px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
    --shadow-2xl:   0 24px 56px rgba(0,0,0,0.14), 0 8px 16px rgba(0,0,0,0.08);
    --shadow-inner: inset 0 1px 2px rgba(0,0,0,0.06);

    /* --------------------------------------------------------------------
     * Transitions
     * ----------------------------------------------------------------- */
    --duration-fast:   120ms;
    --duration-base:   200ms;
    --duration-slow:   320ms;
    --duration-slower: 520ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasised: cubic-bezier(0.2, 0, 0.2, 1);
    --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
    --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);

    /* --------------------------------------------------------------------
     * Z-index
     * ----------------------------------------------------------------- */
    --z-below:   -1;
    --z-base:     0;
    --z-raised:   10;
    --z-overlay:  100;
    --z-drawer:   200;
    --z-modal:    300;
    --z-toast:    400;
    --z-max:      9999;
}


/* -----------------------------------------------------------------
 * Container + bleed classes — ship from the hub so the theme just
 * enqueues tokens.css and gets consistent container behaviour.
 * ----------------------------------------------------------------- */
.container { width: 100%; margin-inline: auto; padding-inline: var(--container-pad); }
.container--narrow   { max-width: var(--container-narrow); }
.container--standard { max-width: var(--container-standard); }
.container--wide     { max-width: var(--container-wide); }
/* Full = full browser width; content keeps horizontal padding. */
.container--full     { max-width: none; padding-inline: var(--container-pad); }
/* Bleed = truly edge-to-edge, no horizontal padding. */
.container--bleed    { max-width: none; padding-inline: 0; }

/* Break out of the current container's horizontal padding on one
   or both sides. Use on an inner element (an image, a carousel
   track) when the surrounding container is padded but that one
   element needs to hug the screen edge. */
.bleed, .bleed-full  { margin-inline: calc(var(--container-pad) * -1); }
.bleed-left          { margin-left:   calc(var(--container-pad) * -1); }
.bleed-right         { margin-right:  calc(var(--container-pad) * -1); }


/* -----------------------------------------------------------------
 * Font utility classes — one per declared font slot on the project.
 * ----------------------------------------------------------------- */
/* Font utility classes — one per declared font slot.
   Blocks/components can wear `class="font-heading"` etc.
   to opt into a slot without referencing the var directly. */
.font-heading { font-family: var(--brand-font-heading); font-weight: var(--brand-font-heading-weight); }
.font-body { font-family: var(--brand-font-body); font-weight: var(--brand-font-body-weight); }


/* -----------------------------------------------------------------
 * Theme utility classes — one per colour slot, including custom ones.
 * Rebind --color-primary + --color-on-primary inside the scope.
 * ----------------------------------------------------------------- */
/* Theme utility classes — scoped accent rebinds.
   Wear `class="theme-{slot}"` on any element; components
   inside that read var(--color-primary) get the slot's
   colour. Surface bg/text stays with data-surface=*. */
.theme-primary { --color-primary: var(--brand-primary); --color-on-primary: #000000; }
.theme-secondary { --color-primary: var(--brand-secondary); --color-on-primary: #ffffff; }
.theme-accent { --color-primary: var(--brand-accent); --color-on-primary: #000000; }
.theme-highlight { --color-primary: var(--brand-highlight); --color-on-primary: #000000; }
.theme-black { --color-primary: var(--brand-black); --color-on-primary: #ffffff; }
.theme-white { --color-primary: var(--brand-white); --color-on-primary: #000000; }