/* =============================================================
 * biitsikuvat.com — Design Tokens
 * Philosophy: sporty editorial (white ground, confident sans,
 *             generous whitespace, single warm accent).
 *
 * Font loading: Fraunces (display, opsz variable) + Inter (body) via
 *   Google Fonts in index.html. Two families is a deliberate departure
 *   from the original single-family rule — the editorial serif/sans
 *   pairing carries the "magazine masthead" feel the project asked for.
 * ============================================================= */

:root {
  /* -------------------------------------------------------------
   * Colour
   * White ground, near-black text, one warm accent. Greys are
   * warm-neutral (a hint of orange) rather than cool, so the
   * palette coheres around the accent instead of fighting it.
   * ------------------------------------------------------------- */

  /* Backgrounds */
  --color-bg-primary:     #ffffff;          /* page background */
  --color-bg-secondary:   #fafaf8;          /* cards/wells, near-invisible warm off-white */
  --color-bg-tertiary:    #eef3f8;          /* donation block, workflow band — pale sky */
  --color-bg-inverse:     #14110d;          /* footer or any inverted surface */

  /* Text */
  --color-text-primary:   #14110d;          /* body and headings; warm near-black */
  --color-text-secondary: #5a564f;          /* dates on cards, footer meta — muted warm grey */
  --color-text-tertiary:  #8b857c;          /* placeholders, disabled; not used in current scope */
  --color-text-inverse:   #fafaf8;          /* text on inverse surfaces */
  --color-text-link:      var(--color-accent-primary-strong);

  /* Borders */
  --color-border-primary:   #e4dfd6;        /* default card/footer rules */
  --color-border-secondary: #eeeae1;        /* softer dividers between sections */
  --color-border-focus:     var(--color-accent-primary);

  /* Accent — coral-orange, summer-sunset */
  --color-accent-primary:        #db4e1f;   /* display, buttons, large accent text */
  --color-accent-primary-hover:  #bd3f14;   /* hover / press-in */
  --color-accent-primary-active: #9b3310;   /* active / pressed */
  --color-accent-primary-strong: #a83b15;   /* AA-compliant on white for small text / links */

  /* Surfaces */
  --color-surface-overlay: rgba(20, 17, 13, 0.4);  /* unused in current scope */

  /* -------------------------------------------------------------
   * Typography
   * Fraunces (display) + Inter (body). Fraunces gives the wordmark
   * and section headers their editorial/magazine character; Inter
   * is the workhorse for body text and small UI.
   * ------------------------------------------------------------- */

  --font-family-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-family-body:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-card:    "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* unused in current scope */

  /* Type ramp — tuned for mobile first. Body is 17px because 90%
     of traffic is phone reading; 16px is cramped in Finnish which
     runs long. Scale is a gentle perfect-fourth-ish blend rather
     than a pure modular scale — editorial, not mathy. */
  --font-size-xs:   0.75rem;     /* 12px — tiny labels, unused in current scope */
  --font-size-sm:   0.875rem;    /* 14px — footer meta, event date */
  --font-size-base: 1.0625rem;   /* 17px — body default */
  --font-size-md:   1.1875rem;   /* 19px — intro tagline */
  --font-size-lg:   1.5rem;      /* 24px — card event title (mobile) */
  --font-size-xl:   1.875rem;    /* 30px — section header "Kesä 20XX" */
  --font-size-2xl:  2.5rem;      /* 40px — masthead wordmark (mobile) */
  --font-size-3xl:  3.5rem;      /* 56px — masthead wordmark (desktop) */
  --font-size-4xl:  4.5rem;      /* 72px — reserved; not used in current scope */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.1;    /* wordmark, large display */
  --line-height-snug:    1.25;   /* section headers, card titles */
  --line-height-normal:  1.5;    /* body */
  --line-height-relaxed: 1.65;   /* tagline, donation copy */

  --letter-spacing-tight:  -0.02em; /* wordmark and large display */
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.04em;  /* small-cap labels, nav links */

  /* -------------------------------------------------------------
   * Spacing — 8px base, editorial-spacious scale.
   * Small jumps up to space-4 (16px); larger multipliers above
   * to give the page breathing room between sections.
   * ------------------------------------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.5rem;    /* 24px */
  --space-6:   2rem;      /* 32px */
  --space-7:   3rem;      /* 48px */
  --space-8:   4rem;      /* 64px */
  --space-9:   6rem;      /* 96px — between major page sections */
  --space-10:  8rem;      /* 128px — masthead to first grid (desktop) */
  --space-11:  12rem;     /* 192px — reserved */
  --space-12:  16rem;     /* 256px — reserved */

  /* -------------------------------------------------------------
   * Layout
   * ------------------------------------------------------------- */

  /* Max widths */
  --max-width-content: 42rem;    /* 672px — reading column for tekijät bios */
  --max-width-wide:    64rem;    /* 1024px — donation block, narrow sections */
  --max-width-page:    75rem;    /* 1200px — grid container on desktop */

  /* Radii — editorial restraint, slight softness on cards */
  --border-radius-sm:   2px;     /* tight — rule lines, small chips */
  --border-radius-md:   4px;     /* cards, images — subtle, not rounded-card-y */
  --border-radius-lg:   8px;     /* large panels, donation block */
  --border-radius-full: 9999px;  /* reserved */

  /* Shadows — photos do the lifting, shadows stay quiet */
  --shadow-sm:    0 1px 2px rgba(20, 17, 13, 0.04);
  --shadow-md:    0 2px 8px rgba(20, 17, 13, 0.06);   /* card hover */
  --shadow-lg:    0 8px 24px rgba(20, 17, 13, 0.08);  /* reserved */
  --shadow-focus: 0 0 0 3px rgba(219, 78, 31, 0.35);  /* accent-based focus ring */

  /* -------------------------------------------------------------
   * Motion
   * Editorial-restrained: fast and linear-ish. No bounce
   * (reads as cartoonish against photography).
   * ------------------------------------------------------------- */
  --duration-instant: 50ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in:      cubic-bezier(0.4, 0, 1, 1);
  --easing-out:     cubic-bezier(0, 0, 0.2, 1);

  /* -------------------------------------------------------------
   * Responsive breakpoints
   * Driven by the 3 / 2 / 1 grid from the brief. Mobile is the
   * default; breakpoints are min-width thresholds for larger.
   * ------------------------------------------------------------- */
  --breakpoint-sm: 40rem;     /* 640px  — tablet kicks in, 2 cols */
  --breakpoint-md: 64rem;     /* 1024px — desktop, 3 cols */
  --breakpoint-lg: 80rem;     /* 1280px — wide desktop */
  --breakpoint-xl: 96rem;     /* 1536px — reserved */
}

/* =============================================================
 * Reduced motion
 * Honour user preference — matches the brief's a11y requirements.
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-normal:  0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
  }
}