/**
 * tokens.css — canonical CSS variable mirror of DESIGN.md
 *
 * Single source of truth for the visual identity. Consumed by:
 *   • theme/assets/css/main.css (the marketing site)
 *   • plugin/assets/src/css/hh.css (the app screens)
 *   • plugin/pdf-templates/common/tokens.css (the printed deliverables)
 *
 * Names mirror DESIGN.md YAML 1:1. Don't drift.
 */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
}

:root {
  /* ── Colors (Heimliebe app palette) ──────────────────────────────── */
  --hh-color-primary:    #1A1F2C;   /* Tinten-Nacht — headlines, body, ink */
  --hh-color-secondary:  #6E7686;   /* Nebelgrau — captions, dim states */
  --hh-color-tertiary:   #E8B547;   /* Sonnen-Honig — secondary CTA, mustard accent */
  --hh-color-accent:     #F4A48A;   /* Korallenrosé — mic button, heart icon */
  --hh-color-neutral:    #CFE0EC;   /* Morgenhimmel — sky page background */
  --hh-color-surface:    #FFFFFF;   /* reines Weiß — modal, primary card */
  --hh-color-paper:      #FAF4E8;   /* Papier-Creme — sticky-note, secondary card */
  --hh-color-on-surface: #1A1F2C;
  --hh-color-border:     #1A1F2C;
  --hh-color-hairline:   #B5C8D6;   /* cooler tint of sky for dividers */
  --hh-color-success:    #5C8A6E;   /* Salbei — done states */
  --hh-color-error:      #B3463E;

  /* ── Type families ───────────────────────────────────────────────── */
  --hh-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --hh-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ── Type scale (fluid via clamp) ────────────────────────────────── */
  --hh-type-display-hero: clamp(2.5rem, 6vw + 1rem, 6rem);     /* 40-96px */
  --hh-type-display-lg:   clamp(2rem,   4.5vw + .5rem, 4rem);   /* 32-64px */
  --hh-type-display-md:   clamp(1.5rem, 3vw + .5rem, 2.5rem);   /* 24-40px */
  --hh-type-question:     clamp(1.5rem, 2.5vw + .25rem, 1.75rem); /* 24-28px */
  --hh-type-body-lg:      clamp(1rem, .25vw + 1rem, 1.125rem);  /* 16-18px */
  --hh-type-body-md:      1rem;     /* 16px */
  --hh-type-body-sm:      0.8125rem;/* 13px */
  --hh-type-label-lg:     0.9375rem;/* 15px */
  --hh-type-label-caps:   0.6875rem;/* 11px */
  --hh-type-numeric:      clamp(1.5rem, 3vw, 2rem); /* 24-32px */

  /* ── Type weights ────────────────────────────────────────────────── */
  --hh-weight-regular:  400;
  --hh-weight-medium:   500;
  --hh-weight-semibold: 600;

  /* ── Tracking ────────────────────────────────────────────────────── */
  --hh-tracking-tight:    -0.015em;
  --hh-tracking-display:  -0.01em;
  --hh-tracking-question: -0.005em;
  --hh-tracking-caps:     0.14em;

  /* ── Line heights ────────────────────────────────────────────────── */
  --hh-leading-hero:    1.05;
  --hh-leading-display: 1.15;
  --hh-leading-md:      1.25;
  --hh-leading-question:1.3;
  --hh-leading-body:    1.55;
  --hh-leading-tight:   1.1;
  --hh-leading-flat:    1.0;

  /* ── Radius ──────────────────────────────────────────────────────── */
  --hh-radius-none: 0px;
  --hh-radius-sm:   8px;
  --hh-radius-md:   16px;
  --hh-radius-lg:   20px;
  --hh-radius-xl:   28px;
  --hh-radius-2xl:  36px;
  --hh-radius-full: 9999px;

  /* ── Spacing scale (4/8 grid, mobile-first; values shrink at xs/sm) ── */
  --hh-space-xs:   4px;
  --hh-space-sm:   8px;
  --hh-space-md:   12px;   /* xs/sm uses 12; md+ overrides to 16 */
  --hh-space-lg:   16px;   /* xs/sm uses 16; md+ overrides to 24 */
  --hh-space-xl:   24px;   /* xs/sm uses 24; md+ overrides to 32 */
  --hh-space-2xl:  32px;   /* xs/sm uses 32; md+ overrides to 48 */
  --hh-space-3xl:  48px;   /* xs/sm uses 48; md+ overrides to 72 */
  --hh-space-4xl:  64px;   /* xs/sm uses 64; md+ overrides to 120 */

  --hh-gutter:     16px;
  --hh-margin:     20px;   /* mobile safe-area inset */

  /* ── Layout ──────────────────────────────────────────────────────── */
  --hh-content-narrow: 640px;  /* Q-flow, prose narrow */
  --hh-content-prose:  720px;  /* article body max */
  --hh-content-wide:   1280px; /* page max */
  --hh-form-max:       480px;  /* form field cluster max */

  /* ── Transition ──────────────────────────────────────────────────── */
  --hh-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --hh-duration:    200ms;
  --hh-duration-slow: 350ms;
}

/* ── Spacing rhythm at md+ (per DESIGN.md responsiveness table) ──── */
@media (min-width: 768px) {
  :root {
    --hh-space-md:  16px;
    --hh-space-lg:  24px;
    --hh-space-xl:  32px;
    --hh-space-2xl: 40px;
    --hh-space-3xl: 56px;
    --hh-space-4xl: 88px;
    --hh-gutter:    24px;
  }
}
@media (min-width: 1024px) {
  :root {
    --hh-space-2xl: 48px;
    --hh-space-3xl: 72px;
    --hh-space-4xl: 120px;
  }
}