/*
  Tala Brand System — global stylesheet (custom properties + reusable classes).
  Version 1.0.0 (2026-07-01). Generated from tokens.json / brand-spec.md. Do not edit
  values here without updating both of those files to match.

  This file is a complete, linkable resource: fonts, tokens, and component classes in
  one place. Link it directly (`<link rel="stylesheet" href=".../tokens.css">`) for
  anything that lives in or alongside this repo — HTML documents, internal tools, the
  digital showroom, etc. — rather than re-declaring @font-face or hand-writing margin/
  weight values locally per file (see GAPS.md for the duplication that prompted this).

  Exception: a fully standalone single-file document with no access to this repo's
  asset folder (e.g. an email HTML sent outside the codebase) can't resolve the
  relative font paths below — inline the equivalent @font-face/variable values
  directly in that case instead, using this file as the source of truth for exact
  values.
*/

/* ---- Fonts ----
   Paths are relative to this file's own location (brand-system/), not to whichever
   HTML file links it — CSS resolves @font-face url()s relative to the stylesheet. */

@font-face {
  font-family: "Nanum Myeongjo";
  src: url("skill/assets/fonts/NanumMyeongjo-Regular.woff2") format("woff2"),
       url("skill/assets/fonts/NanumMyeongjo-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Montserrat";
  src: url("skill/assets/fonts/Montserrat-Regular.woff2") format("woff2"),
       url("skill/assets/fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Montserrat";
  src: url("skill/assets/fonts/Montserrat-Medium.woff2") format("woff2"),
       url("skill/assets/fonts/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
}

@font-face {
  font-family: "Montserrat";
  src: url("skill/assets/fonts/Montserrat-SemiBold.woff2") format("woff2"),
       url("skill/assets/fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
}

:root {
  /* ---- Colour: primary ---- */
  --tala-color-tala-green: #1A3431;
  --tala-color-red-brown: #481A09;
  --tala-color-cappucino: #D6C3A4;
  --tala-color-off-white: #F0EDE7;

  /* ---- Colour: secondary / seasonal ---- */
  --tala-color-olive: #403313;
  --tala-color-orange: #973D17;
  --tala-color-warm-yellow: #EA9C25;
  --tala-color-christmas-plum: #651918;

  /* ---- Colour: semantic (text-capable colours only) ---- */
  --tala-text-on-dark: var(--tala-color-off-white);
  --tala-text-on-light: var(--tala-color-tala-green);

  /* ---- Typography: font stacks ---- */
  --tala-font-serif: "Nanum Myeongjo", Georgia, serif;
  --tala-font-sans: "Montserrat", Arial, sans-serif;

  /* ---- Typography: web scale (desktop) ---- */
  --tala-h1-size: 48px;
  --tala-h2-size: 36px;
  --tala-subtitle-size: 12px;
  --tala-body-size: 12px;

  /* ---- Typography: web scale (mobile) ---- */
  --tala-h1-size-mobile: 26px;
  --tala-h2-size-mobile: 20px;
  --tala-subtitle-size-mobile: 10px;
  --tala-body-size-mobile: 10px;

  /* ---- Typography: print scale (derived, pt — TBC-CONFIRM, see GAPS.md) ---- */
  --tala-print-h1-size: 28pt;
  --tala-print-h2-size: 21pt;
  --tala-print-h3-size: 16pt;
  --tala-print-h4-size: 11pt;
  --tala-print-subtitle-size: 9pt;
  --tala-print-body-size: 10.5pt;
  --tala-print-caption-size: 8.5pt;

  /* ---- Typography: line-height (derived, TBC-CONFIRM) ---- */
  --tala-heading-line-height: 1.15;
  --tala-body-line-height: 1.5;
  --tala-subtitle-line-height: 1.4;
  --tala-caption-line-height: 1.4;

  /* ---- Typography: tracking (derived, TBC-CONFIRM) ---- */
  --tala-heading-tracking: 0.01em;
  --tala-subtitle-tracking: 0.08em;

  /* ---- Layout: content margin — CONFIRMED, team decision 2026-07-02 ----
     20mm / 56.7pt, uniform on all four sides, every format (A4, 16:9 slide, A5 alike).
     Supersedes the old per-axis A4/slide margin values, which didn't match each other
     and produced visibly inconsistent borders. Full-bleed imagery is the one
     deliberate exception (touches the edge with zero margin). */
  --tala-content-margin-mm: 20mm;
  --tala-content-margin-pt: 56.7pt;

  /* ---- Layout: grid (derived from Figma production reference) ---- */
  --tala-canvas-width: 1920px;
  --tala-page-margin: 100px;
  --tala-max-content-width: 1720px;
  --tala-space-1: 4px;
  --tala-space-2: 8px;
  --tala-space-3: 12px;
  --tala-space-4: 16px;
  --tala-space-5: 24px;
  --tala-space-6: 32px;
  --tala-space-7: 48px;
  --tala-space-8: 64px;
  --tala-space-9: 100px;
}

/* ---- Layout: content margin utility ----
   Applies the uniform 20mm/56.7pt margin (see the variable definitions above) as
   padding on a page/slide container. For elements that use `position: absolute`
   instead of flowing inside a padded container (e.g. a logo or footer placed directly
   on a full-bleed image), use `var(--tala-content-margin-pt)` directly as the
   top/left/right/bottom offset instead — absolute positioning doesn't inherit a
   parent's padding. */

.tala-page-margin {
  padding: var(--tala-content-margin-pt);
}

/* ---- Typography roles ---- */

.tala-h1 {
  font-family: var(--tala-font-serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tala-heading-tracking);
  line-height: var(--tala-heading-line-height);
  font-size: var(--tala-h1-size);
}

.tala-h2 {
  font-family: var(--tala-font-serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tala-heading-tracking);
  line-height: var(--tala-heading-line-height);
  font-size: var(--tala-h2-size);
}

.tala-subtitle {
  font-family: var(--tala-font-sans);
  font-weight: 500; /* Montserrat Medium — team override 2026-07-02, was SemiBold (600) */
  text-transform: uppercase;
  letter-spacing: var(--tala-subtitle-tracking);
  line-height: var(--tala-subtitle-line-height);
  font-size: var(--tala-subtitle-size);
}

.tala-body {
  font-family: var(--tala-font-sans);
  font-weight: 400;
  text-transform: none;
  line-height: var(--tala-body-line-height);
  font-size: var(--tala-body-size);
}

.tala-caption {
  font-family: var(--tala-font-sans);
  font-weight: 400;
  line-height: var(--tala-caption-line-height);
  font-size: var(--tala-print-caption-size);
  opacity: 0.7;
}

@media (max-width: 767px) {
  .tala-h1 { font-size: var(--tala-h1-size-mobile); }
  .tala-h2 { font-size: var(--tala-h2-size-mobile); }
  .tala-subtitle { font-size: var(--tala-subtitle-size-mobile); }
  .tala-body { font-size: var(--tala-body-size-mobile); }
}

/* ---- Page themes ---- */

.tala-theme-content {
  background-color: var(--tala-color-off-white);
  color: var(--tala-color-tala-green);
}

.tala-theme-divider-plum {
  background-color: var(--tala-color-christmas-plum);
  color: var(--tala-color-off-white);
}

.tala-theme-divider-red-brown {
  background-color: var(--tala-color-red-brown);
  color: var(--tala-color-off-white);
}

.tala-theme-divider-cappucino {
  background-color: var(--tala-color-cappucino);
  color: var(--tala-color-tala-green);
}

/* ---- Buttons (two shipped patterns — see brand-spec.md §8.3) ---- */

.tala-btn-pill {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: var(--tala-space-3) var(--tala-space-5);
  font-family: var(--tala-font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tala-subtitle-tracking);
  font-size: var(--tala-subtitle-size);
  background: transparent;
  text-align: center;
}

.tala-btn-icon-label {
  display: inline-flex;
  align-items: center;
  gap: var(--tala-space-3);
}

.tala-btn-icon-label .tala-btn-icon-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--tala-color-off-white);
  color: var(--tala-color-tala-green);
}

/* ---- Footer convention ---- */

.tala-footer {
  position: absolute;
  /* Matches the content margin, not --tala-space-5 — this is a page-edge position,
     not an internal spacing gap. Absolute positioning doesn't inherit a parent's
     padding, so this must restate the same margin value directly. */
  bottom: var(--tala-content-margin-pt);
  left: var(--tala-content-margin-pt);
  font-family: var(--tala-font-sans);
  font-weight: 500; /* Montserrat Medium — team decision 2026-07-02, resolves GAPS.md #37: "semibold is always too bold" */
  font-size: var(--tala-body-size-mobile);
  text-transform: uppercase;
  letter-spacing: var(--tala-subtitle-tracking);
  opacity: 0.6;
}