/* cssiivous — design tokens, extracted 1:1 from the Cleanora Webflow template
 * (ASSETS/cleanora, css/cleanora.webflow.shared.*.css :root block).
 * Colors are EXACT hex. Type + section padding are fluid clamp() between the
 * template's own breakpoint steps (desktop ↔ 479px values), everything else
 * follows the ACSS methodology: rem units, tokens only, px reserved for
 * hairlines and shadows. */

@layer tokens {
  :root {
    /* ------ color (exact Cleanora palette) ------ */
    --white: #ffffff;
    --black: #000000;
    --neutral-01: #f3f3f3;
    --neutral-02: #d2d2d2;
    --neutral-03: #a4a4a5;
    --neutral-04: #8e8e8f;
    --neutral-05: #777778;
    --neutral-06: #606062;
    --neutral-07: #49494b;
    --neutral-08: #333335;
    --neutral-09: #1c1c1e;
    --dark-green: #0b1e1b;
    --green: #0e3a2d;
    --light-green: #06a054;
    --lime: #b5d73d;
    --soft-mint: #e8f3e3;

    /* semantic aliases — recolor surface */
    --bg-page: var(--neutral-01);
    --bg-dark: var(--dark-green);
    --bg-card: var(--white);
    --bg-accent-soft: var(--soft-mint);
    --accent: var(--lime);
    --accent-alt: var(--light-green);
    --text-main: var(--neutral-09);
    --text-heading: var(--dark-green);
    --text-inverse: var(--white);
    --line-inverse: rgb(255 255 255 / 0.1);
    --line-soft: rgb(0 0 0 / 0.15);

    /* ------ typography ------ */
    --font-primary: "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-secondary: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;

    /* headings: Cleanora desktop px ↔ 767px step, fluid between */
    --text-h1: clamp(3.125rem, 2.3rem + 2.6vw, 4.1875rem);   /* 50 → 67 */
    --text-h2: clamp(2.625rem, 2.24rem + 1.25vw, 3.125rem);  /* 42 → 50 */
    --text-h3: clamp(1.875rem, 1.57rem + 0.98vw, 2.5rem);    /* 30 → 40 */
    --text-h4: clamp(1.5rem, 1.38rem + 0.39vw, 1.75rem);     /* 24 → 28 */
    --text-h5: clamp(1.375rem, 1.34rem + 0.13vw, 1.5rem);    /* 22 → 24 */
    --text-h6: 1.375rem;                                     /* 22 */
    --text-stat: clamp(3.125rem, 2.44rem + 2.15vw, 4.5rem);  /* 50 → 72 */
    --text-404: clamp(6rem, 4rem + 8vw, 11.25rem);           /* → 180 */

    --lh-h1: 1.2; --lh-h2: 1.2; --lh-h3: 1.2; --lh-h4: 1.3; --lh-h5: 1.3; --lh-h6: 1.4;
    --ls-h1: -0.0875rem; --ls-h2: -0.075rem; --ls-h3: -0.0625rem;
    --ls-h4: -0.03125rem; --ls-h5: -0.015625rem; --ls-h6: 0;

    /* paragraphs para-01..04 */
    --text-lg: 1.25rem;      /* 20 */
    --text-md: 1.125rem;     /* 18 */
    --text-base: 1rem;       /* 16 */
    --text-sm: 0.875rem;     /* 14 */
    --lh-lg: 1.5; --lh-md: 1.5; --lh-base: 1.6; --lh-sm: 1.6;

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

    /* ------ spacing (Cleanora spacers, rem) ------ */
    --space-1: 0.25rem;   /* 4 */
    --space-2: 0.5rem;    /* 8 */
    --space-3: 1rem;      /* 16 */
    --space-4: 1.5rem;    /* 24 */
    --space-5: 2rem;      /* 32 */
    --space-6: 3rem;      /* 48 */
    --space-7: 4rem;      /* 64 */
    --space-8: 5rem;      /* 80 */
    --space-9: 6rem;      /* 96 */
    --space-10: 8rem;     /* 128 */

    /* section padding: fluid between template's 767px and desktop steps */
    --section-space-l: clamp(4.5rem, 3.9rem + 1.9vw, 6rem);    /* 72 → 96 */
    --section-space-m: clamp(4rem, 3.6rem + 1.25vw, 5rem);     /* 64 → 80 */
    --section-space-s: clamp(4rem, 3.87rem + 0.4vw, 4.5rem);   /* 64 → 72 */

    /* ------ layout ------ */
    --container-max: 85.625rem;                 /* 1370 */
    --container-pad: clamp(1.5rem, 1.34rem + 0.5vw, 1.875rem); /* 24 → 30 */
    --card-gutter: 0.625rem;                    /* 10px page-edge inset of section backgrounds */

    /* ------ radii ------ */
    --radius: 0.625rem;      /* 10 */
    --radius-button: 0.5rem; /* 8 */
    --radius-pill: 12.5rem;  /* 200 */
    --radius-small: 0.3125rem; /* 5 */

    /* ------ motion ------ */
    --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1); /* template's accordion ease */
    --dur-fast: 0.25s;
    --dur-med: 0.3s;
  }

  @media (max-width: 61.99rem) { /* 991 — template narrows the card gutter */
    :root { --card-gutter: 0.3125rem; }
  }
}