/*
 * zemla-tokens.css — Unified Design-Token Layer (stage-a v1.8.0)
 *
 * TWO-LAYER ARCHITECTURE (OQ-AUDIT-05 resolution):
 *   Layer 1  :root            — Global semantic tokens shared across all 3 sites.
 *   Layer 2  .theme-zemla     — Per-site brand overrides applied via body class.
 *   Layer 3  .locale-ja       — JA locale font-fallback chain (zemla only).
 *
 * RELATIONSHIP TO style.css:
 *   style.css defines the legacy short-name tokens (--f-body, --sp-4, --r-md …).
 *   This file introduces the canonical long-name tokens (--font-body, --space-md …)
 *   specified in the 3FP brief §2.1. Both sets coexist; stage (c) will migrate
 *   remaining consumers to the canonical names and retire the short aliases.
 *
 * LOAD ORDER:
 *   zemla-tokens.css is enqueued BEFORE zemla-style (style.css) so that
 *   custom properties declared here are available when style.css is parsed.
 *
 * BRAND COLOUR NOTES (zemla):
 *   Values extracted from audit/computed-styles/zemla-home.json (2026-05-15):
 *     --c-accent  = #5c7a5c  (forest/moss green — actual computed value)
 *     --c-bg      = #f8f7f4  (warm off-white — actual computed value)
 *     --c-border  = #e0ddd6  (actual computed value)
 *     --c-link    = #3d5c3d  (actual computed value)
 *   Brief §2.2 proposed purple #5c2c7c + gold #d4a55c as zemla brand — these
 *   are abstract proposals; actual live palette is moss-green. This file uses
 *   the actual computed palette. Stage (c) redesign may revise brand colours.
 *
 * @package     Zemla
 * @since       1.8.0
 * @see         inc/zemla-config.php (PHP constants mirror these values)
 * @see         3FP-STAGE-A-TOKENS-BRIEF-v0.1.md §2.1, §2.2, §2.4
 */

/* ═══════════════════════════════════════════════════════════════════
   LAYER 1 — GLOBAL :root TOKENS
   Semantic base layer; brand-neutral where possible.
   Per-site brand colours live in .theme-* blocks below.
   ═══════════════════════════════════════════════════════════════════ */
:root {

  /* ── Color (semantic) ───────────────────────────────────────── */
  --c-text:          #1a1a1a;
  --c-muted:         #6a6a6a;
  --c-bg:            #fafafa;       /* overridden per-site in .theme-* */
  --c-bg-card:       #ffffff;
  --c-border:        #e0e0e0;       /* overridden per-site in .theme-* */
  --c-border-strong: #c0c0c0;
  --c-link:          var(--c-brand);       /* resolves via per-site .theme-* */
  --c-link-hover:    var(--c-accent);
  --c-error:         #c62828;
  --c-warning:       #f57c00;
  --c-success:       #2e7d32;
  /* --c-brand and --c-accent are intentionally NOT set at :root —
     they are brand tokens and must come from .theme-* override blocks. */

  /* ── Typography ─────────────────────────────────────────────── */
  --font-body:    "Noto Serif", Georgia, serif;
  --font-heading: "Noto Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", Menlo, Consolas, monospace;

  /* ── Type scale (mobile-first; desktop overrides in @media below) */
  --fs-body:    16px;
  --fs-h1:      2.5rem;
  --fs-h2:      1.875rem;
  --fs-h3:      1.5rem;
  --fs-h4:      1.25rem;
  --fs-small:   0.875rem;
  --lh-body:    1.6;
  --lh-heading: 1.25;

  /* ── Spacing scale ──────────────────────────────────────────── */
  --space-xs:  0.25rem;   /*  4px */
  --space-sm:  0.5rem;    /*  8px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  2rem;      /* 32px */
  --space-xl:  4rem;      /* 64px */
  --space-2xl: 6rem;      /* 96px */

  /* ── Layout ─────────────────────────────────────────────────── */
  --content-width:  720px;
  --container-max:  1200px;

  /* ── Breakpoints (reference values — use in JS; CSS uses @media) */
  --bp-mobile:  640px;
  --bp-tablet:  768px;
  --bp-desktop: 1024px;
  --bp-wide:    1280px;

  /* ── Gallery (per ADR-02 sidebar pattern) ───────────────────── */
  --gallery-cols-mobile:    1;
  --gallery-cols-tablet:    2;
  --gallery-cols-desktop:   3;
  --gallery-gap:            var(--space-md);
  --gallery-sidebar-width:  220px;

  /* ── Photo treatment (per ADR-03 album-card pattern) ───────── */
  --img-radius-sm:   4px;
  --img-radius-md:   8px;
  --img-radius-lg:   12px;
  --img-aspect-card: 3 / 2;

  /* ── Forms + components ─────────────────────────────────────── */
  --border-radius-button: 4px;
  --border-radius-card:   8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.08);
  --transition-fast: 150ms ease-out;
  --transition-base: 250ms ease-out;

  /* ── Typography extras (R-AUDIT-018, R-AUDIT-019, R-AUDIT-020) */
  --font-tracking-h1:     -0.36px;   /* zemla-specific negative tracking */
  --nav-logo-weight:      300;        /* zemla: thin logo weight (brand) */
  --font-size-body:       16px;
  --radius-image:         0px;        /* all sites: flat images (ADR-03) */
  --radius-card:          0px;
  --c-card-bg:            #ffffff;    /* zemla album card background */

}

/* ── Desktop type-scale overrides ──────────────────────────────── */
@media (min-width: 768px) {
  :root {
    --fs-body: 18px;
    --fs-h1:   3rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   LAYER 2 — PER-SITE BRAND OVERRIDES
   Applied via body class: <body class="theme-zemla locale-cs">
   Only zemla overrides are here — mim2000/bodyterapie get their own
   token files in their respective themes (stage-b, stage-c of the
   3FP incremental rollout).
   ═══════════════════════════════════════════════════════════════════ */

/*
 * zemla — personal / intellectual / contemplative palette
 * Actual computed values from audit/computed-styles/zemla-home.json:
 *   accent/brand = #5c7a5c (forest green)
 *   bg            = #f8f7f4 (warm off-white)
 *   border        = #e0ddd6
 *   link          = #3d5c3d (darker green)
 *   body text     = #1c1b18 (near-black warm)
 *
 * Note: brief §2.2 proposed purple #5c2c7c as --c-brand — that is a
 * design proposal for stage (c) redesign consideration. Stage (a)
 * preserves the actual live palette. Document in STATUS §4 open items.
 */
.theme-zemla {
  /* Brand colours — actual live palette from computed-styles audit */
  --c-brand:  #5c7a5c;   /* moss green (= existing --c-accent) */
  --c-accent: #5c7a5c;   /* keep consistent with existing --c-accent */
  --c-bg:     #f8f7f4;   /* warm off-white */
  --c-border: #e0ddd6;   /* warm gray border */

  /* Text colours (actual computed body color = #1c1b18) */
  --c-text:   #1c1b18;   /* near-black warm (overrides :root #1a1a1a) */
  --c-muted:  #8c897f;   /* warm muted (= existing --c-ink-3) */

  /* Links (actual computed values from audit) */
  --c-link:       #3d5c3d;   /* dark green */
  --c-link-hover: #1c1b18;   /* near-black on hover */

  /* Card background */
  --c-card-bg:    #ffffff;

  /* Heading letter-spacing (R-AUDIT-018) */
  --font-tracking-h1: -0.36px;

  /* Logo weight: thin/contemplative (R-AUDIT-009 brand difference) */
  --nav-logo-weight: 300;
}


/* ═══════════════════════════════════════════════════════════════════
   LAYER 2b — SELF-HOSTED @font-face DECLARATIONS (stage-a)
   Source files: assets/fonts/Noto*.woff2
   Downloaded via: assets/fetch-fonts.sh  (user runs this once)
   Licence: SIL Open Font Licence (OFL) 1.1 — redistribution permitted.
   font-display: swap — text visible immediately in system fallback font
   while Noto loads. Prevents layout shift on slow connections.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Noto Serif (body copy, longform reading) ──────────────────── */
@font-face {
  font-family: "Noto Serif";
  src: url("/wp-content/themes/zemla/assets/fonts/NotoSerif-Regular.woff2")
       format("woff2");
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif";
  src: url("/wp-content/themes/zemla/assets/fonts/NotoSerif-Italic.woff2")
       format("woff2");
  font-weight: 400;
  font-style:  italic;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif";
  src: url("/wp-content/themes/zemla/assets/fonts/NotoSerif-Bold.woff2")
       format("woff2");
  font-weight: 700;
  font-style:  normal;
  font-display: swap;
}

/* ── Noto Sans (headings, UI chrome) ──────────────────────────── */
@font-face {
  font-family: "Noto Sans";
  src: url("/wp-content/themes/zemla/assets/fonts/NotoSans-Regular.woff2")
       format("woff2");
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("/wp-content/themes/zemla/assets/fonts/NotoSans-Bold.woff2")
       format("woff2");
  font-weight: 700;
  font-style:  normal;
  font-display: swap;
}

/* ── Noto Serif JP (body copy in .locale-ja) ──────────────────── */
@font-face {
  font-family: "Noto Serif JP";
  src: url("/wp-content/themes/zemla/assets/fonts/NotoSerifJP-Regular.woff2")
       format("woff2");
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

/* ── Noto Sans JP (headings in .locale-ja) ────────────────────── */
@font-face {
  font-family: "Noto Sans JP";
  src: url("/wp-content/themes/zemla/assets/fonts/NotoSansJP-Regular.woff2")
       format("woff2");
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}


/* ═══════════════════════════════════════════════════════════════════
   LAYER 3 — JA LOCALE FONT FALLBACK (brief §2.4)
   Applied when body carries class="locale-ja" (see header.php Stage D).
   Extends --font-body and --font-heading with Japanese font stack.
   ═══════════════════════════════════════════════════════════════════ */
.locale-ja {
  --font-body:    "Noto Serif", "Noto Serif JP", "Hiragino Mincho ProN",
                  "Yu Mincho", serif;
  --font-heading: "Noto Sans", "Noto Sans JP", "Hiragino Sans",
                  "Yu Gothic", sans-serif;
}