/* ==========================================================================
   Ilara — design tokens
   Fluid em-based scale: every size in site.css is in `em`, and the root font
   size is driven off the viewport, so the whole layout scales as one system.
   ========================================================================== */

:root {
  /* --- Fluid scaling ----------------------------------------------------- */
  --size-unit: 16;
  --size-container-ideal: 1920;
  --size-container-min: 992px;
  --size-container-max: 3840px;
  /* --vw, not 100vw: Windows shows a classic scrollbar, and 100vw includes it.
     The root font size is derived from this, so every em on the page came out
     about 1% larger there than the space actually available, which is enough
     to push content past the edge of sections that clip their overflow. The
     grid already measured itself this way; now the type scale agrees with it. */
  --size-container: clamp(var(--size-container-min), calc(var(--vw, 1vw) * 100), var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));

  /* --- Grid -------------------------------------------------------------- */
  --grid-margin: 1.5em;
  --grid-columns: 12;
  --grid-gutter: 0em;
  --grid-column-width: calc(
    ((var(--vw, 1vw) * 100) - (2 * var(--grid-margin))) / var(--grid-columns)
    - (var(--grid-gutter) * (var(--grid-columns) - 1) / var(--grid-columns))
  );
  --grid: repeat(var(--grid-columns), minmax(0, 1fr));

  /* --- Palette -----------------------------------------------------------
     Light throughout. Ink is a text colour only — it is never a surface.
     Saturated moments (hero, capability list, footer) carry the page the way
     the reference layout uses its yellow and pink blocks.
     ---------------------------------------------------------------------- */

  /* Surfaces */
  --surface: #f3f1ec;         /* page base, bone */
  --surface-raised: #fbfaf7;  /* the "white" sections */
  --surface-card: #ffffff;    /* cards sitting on a surface */
  --surface-soft: #e8f6c9;    /* soft lime block */
  --surface-sand: #f7e9c8;    /* warm block */
  --line: rgba(13, 13, 14, 0.12);
  --line-strong: rgba(13, 13, 14, 0.22);

  /* Ink (text) */
  --ink: #0d0d0e;
  --ink-dim: rgba(13, 13, 14, 0.72);
  --ink-faint: rgba(13, 13, 14, 0.60);

  /* Accents */
  --lime: #a3e635;
  --lime-deep: #7fb827;
  --lime-text: #557d19;      /* lime dark enough to read as text */
  --lime-wash: #eaf7d1;       /* accent tinted surface */
  --amber: #f2b544;
  --amber-wash: #fdf0d6;
  --rose: #d94f42;
  --rose-wash: #fbe4e1;

  --bone: var(--surface);
  --white: var(--surface-card);
  --black: var(--ink);

  /* --- Type scale -------------------------------------------------------- */
  --font-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --font-size-heading-xxl: 10em;
  --font-size-heading-l: 6.5em;
  --font-size-heading-m: 5em;
  --font-size-heading-s: 2.5em;
  --font-size-heading-xs: 1.875em;
  --font-size-paragraph-large: 2em;
  --font-size-paragraph-medium: 1.75em;
  --font-size-paragraph-regular: 1.5em;
  --font-size-paragraph-small: 1.25em;
  --font-size-paragraph-extra-small: 1.125em;
  --font-size-note-regular: 1.125em;   /* mono annotation */
  --font-size-note-big: 1.375em;

  --header-height: 6.625em;

  /* --- Easing ------------------------------------------------------------ */
  --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft-overshoot: cubic-bezier(0.59, 1, 0.88, 1.01);
  --ease-bounce: cubic-bezier(0.34, 1.57, 0.64, 1);
  --ease-soft-bounce: cubic-bezier(0.34, 1.17, 0.64, 1);
  --ease-click: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-elastic-out: linear(
    0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%,
    1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%,
    1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%,
    0.9842 58.77%, 1.0011 81.26%, 1
  );

  /* --- Buttons ----------------------------------------------------------- */
  --button-color: var(--ink);
  --button-color-background: var(--surface-card);
  --button-height: 3.5em;
  --button-padding: 0 1.125em;
  --button-border-radius: 2em;
  --button-click-scale: 0.955 0.925;

  --button-alt-color: var(--surface-raised);
  --button-alt-color-background: var(--ink);
  --button-alt-padding-x: 1.25em;
  --button-alt-height: 4.375em;
  --button-alt-border-radius: 0.625em;
}

@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834;
    --size-container-min: 768px;
    --size-container-max: 991px;

    --grid-margin: 1em;
    --grid-columns: 5;
    --grid-gutter: 1em;

    --font-size-heading-xxl: 6em;
    --font-size-heading-l: 2.5em;
    --font-size-heading-m: 2em;
    --font-size-heading-s: 1.875em;
    --font-size-paragraph-large: 1.25em;
    --font-size-paragraph-medium: 1.25em;
    --font-size-paragraph-regular: 1.125em;
    --font-size-paragraph-small: 1em;
    --font-size-paragraph-extra-small: 1em;
    --font-size-note-regular: 1em;
    --font-size-note-big: 1.125em;

    --header-height: 5em;

    --button-alt-padding-x: 1.015625em;
    --button-alt-height: 3.90625em;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 550;
    --size-container-min: 480px;
    --size-container-max: 767px;
    --font-size-heading-xxl: 4.25em;
  }
}

@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 402;
    --size-container-min: 320px;
    --size-container-max: 479px;
    --font-size-heading-xxl: 3.25em;
  }
}