/*
 * Studio Hana design tokens.
 * Palette and sizes carry over from the approved mockups and the supplied card starter
 * styles. Type stack is a placeholder until the licensed site font is dropped in — change
 * it in one place here.
 */
:root {
  /* Surfaces */
  --hana-page: #fffefa;
  --hana-card: #f6f5f2;
  --hana-panel: #efeee9;
  --hana-sky: #a9dfff;

  /* Ink */
  --hana-ink: #182014;
  --hana-ink-soft: #5b6154;
  --hana-olive: #545a31;
  --hana-line: #c5c7bb;
  --hana-line-soft: #e4e4dd;

  /* Radii */
  --hana-radius-panel: 28px;
  --hana-radius-card: 18px;
  --hana-radius-image: 14px;
  --hana-radius-control: 12px;

  /* Rhythm */
  --hana-gutter: clamp(20px, 4vw, 64px);
  /*
   * Vertical padding on ONE side of a section. Adjacent sections each contribute their
   * own, so the gap you see between two of them is double this value.
   */
  --hana-section: clamp(38px, 4vw, 64px);
  --hana-max: 1400px;

  /* Type */
  --hana-font: "Söhne", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --hana-display: clamp(34px, 5.2vw, 68px);
  --hana-heading: clamp(26px, 3.2vw, 44px);
  --hana-eyebrow: 12px;

  /*
   * Motion. One easing vocabulary across the whole site: `exit` for things leaving under
   * their own momentum, `enter` for things arriving and settling, `inout` for a panel
   * travelling across the screen.
   */
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);

  --dur-fast: 0.35s;
  --dur-base: 0.7s;
  --dur-slow: 1.1s;
}

* {
  box-sizing: border-box;
}

html {
  /* Lenis takes over on desktop; this covers native-scroll breakpoints and anchor jumps. */
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--hana-page);
  color: var(--hana-ink);
  font-family: var(--hana-font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  /* width/height attributes give the browser the ratio before the image loads, but the
     height attribute also acts as `height: Npx`, which would override aspect-ratio. */
  height: auto;
}

/* A <picture> generates no box of its own, so every rule written for the <img> still applies. */
picture {
  display: contents;
}