/* =============================================================
   BLOOM LIVING — Design Tokens
   All sizes in em (base 16px = 1em at design width)
   ============================================================= */

/* --- Fluid font-size system --- */
:root {
  --size-unit:            16;
  --size-container-ideal: 1440;
  --size-container-min:   1025px;
  --size-container-max:   1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

@media screen and (max-width: 1024px) {
  :root {
    --size-container-ideal: 1024;
    --size-container-min:   360px;
    --size-container-max:   1024px;
  }
}

@media screen and (max-width: 430px) {
  :root {
    --size-container-ideal: 390;
    --size-container-min:   320px;
    --size-container-max:   430px;
  }
}

/* --- Brand colours (from Figma) --- */
:root {
  --color-bege:        #f9eede;
  --color-orange:      #ef8354;
  --color-navy:        #172a34;
  --color-white:       #ffffff;
  --color-card:        #f0e4d3;
  --color-text-60:     rgba(23, 42, 52, 0.60);
  --color-text-50:     rgba(23, 42, 52, 0.50);
  --color-text-40:     rgba(23, 42, 52, 0.40);
  --color-border:      rgba(23, 42, 52, 0.12);

  /* --- Typography — Adobe Fonts kit: fbo7aav (scale-variable = Scale VF) --- */
  --font: "scale-variable", system-ui, sans-serif;

  /* --- Border radius --- */
  --radius-xs:   0.1875em;  /* 3px  */
  --radius-sm:   0.25em;    /* 4px  */
  --radius-pill: 62.5em;    /* pill */

  /* --- Easing --- */
  --ease:    200ms ease;
  --ease-md: 300ms ease;
}