/* ==========================================================================
   Hearth — design tokens (the single source of visual truth)
   Extracted from the live club site hearth.ee (theme: hearth-movement).
   Import this into the web app and the Telegram Mini App so every surface
   matches the brand exactly. Do not hardcode brand colors anywhere else —
   reference these custom properties.
   ========================================================================== */

/* --- Brand fonts ----------------------------------------------------------
   SeasonMix = high-contrast display serif (headings).
   ABC Favorit (ABCFavoritEdu) = grotesque sans (body / UI).
   The .woff2 files are LICENSED commercial fonts and are gitignored — copy
   them from the existing hearth-movement theme into ./brand/fonts/ (see
   brand/fonts/README.md). Until then the fallbacks (Arial/Helvetica) apply. */
@font-face {
  font-family: "SeasonMix";
  src: url("./brand/fonts/SeasonMix-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABCFavoritEdu";
  src: url("./brand/fonts/ABCFavoritEdu-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Palette (the 6 brand-book colors + neutrals) --- */
  --hearth-purple:        #48224c; /* "Tumelilla" — primary: text, header, borders */
  --hearth-navy:          #392b55; /* "Tumesinine" — secondary dark / deep surface  */
  --hearth-orchid:        #ba79d3; /* interactive / hover accent (from the motif)    */
  --hearth-red:           #ff1326; /* validation / alert / sharp accent              */
  --hearth-lavender:      #ddd2fd; /* "Helelilla" — primary page background          */
  --hearth-pink:          #ffe3f2; /* "Heleroosa" — soft surface (cards, panels)     */
  --hearth-gray:          #c2bede; /* "Tuhm lilla" — muted surface (.bg-gray)        */
  --hearth-white:         #ffffff;
  --hearth-black:         #000000;

  /* --- Semantic roles (use these in components) --- */
  --color-bg:             var(--hearth-lavender);
  --color-surface:        var(--hearth-pink);
  --color-surface-muted:  var(--hearth-gray);
  --color-surface-dark:   var(--hearth-navy);    /* deep panels (event hero, etc.) */
  --color-text:           var(--hearth-purple);
  --color-text-invert:    var(--hearth-pink);   /* text on purple/navy fills       */
  --color-primary:        var(--hearth-purple);
  --color-accent:         var(--hearth-orchid);
  --color-danger:         var(--hearth-red);
  --color-header-bg:      var(--hearth-purple);

  /* --- Typography --- */
  --font-display: "SeasonMix", Arial, Helvetica, sans-serif;   /* headings */
  --font-body:    "ABCFavoritEdu", Arial, Helvetica, sans-serif; /* body/UI */

  /* Type scale observed on the site (px): 10 14 15 16 21 24 30 32 40 43 45 50 55 80 */
  --fs-xs:    14px;
  --fs-sm:    15px;
  --fs-base:  16px;   /* body */
  --fs-md:    21px;
  --fs-lg:    24px;
  --fs-xl:    30px;
  --fs-2xl:   40px;
  --fs-3xl:   55px;
  --fs-display: 80px; /* hero */

  --lh-body:  30px;   /* body line-height from the site */
  --letter-spacing: 0;

  /* --- Spacing (Bootstrap-style gutters used by the theme) --- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 56px;
  --space-7: 96px;

  /* --- Radii --- */
  --radius-sm:   6px;     /* 0.375rem, small elements */
  --radius-pill: 50em;    /* the signature oversized pill buttons */

  /* --- Layout --- */
  --header-height:          100px;
  --header-height-scrolled: 68px;
}

/* --- Base ---------------------------------------------------------------- */
body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: var(--letter-spacing);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .fnt-season {
  font-family: var(--font-display);
  font-weight: 400; /* the display serif is used at its regular weight */
}

h1 { font-size: var(--fs-display); line-height: 1.05; }
h2 { font-size: var(--fs-3xl);     line-height: 1.1; }
h3 { font-size: var(--fs-2xl);     line-height: 1.15; }

a { color: var(--color-primary); text-underline-offset: 4px; }
a:hover { color: var(--color-accent); }

/* Visible keyboard focus across every interactive surface (a11y). Mouse users
   keep the quiet hover states; keyboard users get a clear orchid ring. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Signature button: large outline pill, hover -> orchid --------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  color: var(--color-primary);
  background: transparent;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  padding: 17px 28px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s linear, color .15s linear, background-color .15s linear;
}
.btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
/* Filled variant (e.g. the newsletter submit on the site) */
.btn--filled {
  background-color: var(--color-primary);
  color: var(--color-text-invert);
  border-color: var(--color-primary);
}
.btn--filled:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--hearth-white);
}
/* Disabled / busy state (e.g. while a magic link is sending). */
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: progress;
  pointer-events: none;
}

/* --- Utility classes mirrored from the theme --- */
.color-purple { color: var(--hearth-purple); }
.bg-purple    { background-color: var(--hearth-purple); }
.bg-navy      { background-color: var(--hearth-navy); }
.bg-gray      { background-color: var(--hearth-gray); }
.bg-pink      { background-color: var(--hearth-pink); }

/* --- Brand "täiendav graafika": the square motif ------------------------
   The converging-community squares from the brand book. Used small + quiet as
   a decorative accent on headers/cards — never as content. brand/motif.svg is
   the canonical asset; this just places it. */
.motif {
  background-image: url("./brand/motif.svg");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  user-select: none;
}

/* Respect users who ask for less motion: drop transitions/animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}