/* ============================================================
   慶覺寺 Design Tokens
   ============================================================
   Portable foundation shared across keigakuji.org and
   sit.keigakuji.org. Site 2 copies this file and overrides
   ~6 values (mainly font stacks and line-height for Latin).

   Naming: --k- prefix to avoid collisions with GP/GB vars.
   ============================================================ */

:root {

  /* --------------------------------------------------------
     COLORS — grounded in temple materials
     --------------------------------------------------------
     Not the wellness palette (cream + sage + dusty rose).
     These reference what you actually see at 慶覺寺:
     weathered wood, mountain forest, washi paper,
     tatami straw, and the plum/ume of Zen gardens.
     -------------------------------------------------------- */

  /* Backgrounds */
  --k-bg:            #FAF7F3;   /* warm washi-paper white              */
  --k-bg-alt:        #F0EDE8;   /* alternating sections, card fills    */
  --k-bg-dark:       #2D2926;   /* footer, dark hero overlays          */
  --k-white:         #FFFFFF;

  /* Ink / text */
  --k-ink:           #2D2926;   /* primary text — aged temple wood     */
  --k-ink-soft:      #6B6560;   /* secondary text, captions            */
  --k-ink-on-dark:   #F0EDE8;   /* text on dark backgrounds            */

  /* Primary accent — Niigata mountain forest */
  --k-forest:        #3A5A40;   /* deep green — nav, links, emphasis   */
  --k-forest-hover:  #2E4A33;   /* hover / active state                */
  --k-forest-light:  #E8EFEA;   /* very light green tint for bg        */

  /* Warm accent — plum / ume for CTAs */
  --k-plum:          #9B6B6A;   /* primary CTA, warm without pink      */
  --k-plum-hover:    #835857;   /* CTA hover                           */
  --k-plum-light:    #F3EDEC;   /* subtle warm tint for bg             */

  /* Detail accent — tatami / straw gold */
  --k-straw:         #C4B48A;   /* borders, rules, decorative lines    */
  --k-straw-light:   #EDE8DA;   /* subtle gold tint                    */

  /* Utility */
  --k-border:        #DDD8D2;   /* default border color                */
  --k-shadow:        rgba(45, 41, 38, 0.08); /* subtle card shadow    */
  --k-overlay:       rgba(45, 41, 38, 0.55); /* dark photo overlay    */


  /* --------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------
     Zero-cost system font stacks for Japanese.
     Full Noto Serif JP is 1.5–4 MB; we avoid it.
     游明朝 / 游ゴシック cover macOS + Windows 8.1+.
     Hiragino covers older macOS / iOS.
     Android falls through to Noto (pre-installed).

     For sit.keigakuji.org: override these two stacks
     with Latin-primary families (e.g., Cormorant Garamond
     for display, system sans for body), keeping JP as
     fallback.
     -------------------------------------------------------- */

  --k-font-display:
    "游明朝", "Yu Mincho", "YuMincho",
    "ヒラギノ明朝 ProN", "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  --k-font-body:
    "游ゴシック体", "Yu Gothic", "YuGothic",
    "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    sans-serif;

  --k-font-mono:
    "SF Mono", "Consolas", "Liberation Mono", monospace;


  /* --------------------------------------------------------
     TYPE SCALE — modular, based on 1rem = 16px
     --------------------------------------------------------
     Headings use --k-font-display (mincho/serif).
     Body uses --k-font-body (gothic/sans).
     The contrast between poetic headings and clean body
     text is the typographic personality of the site.
     -------------------------------------------------------- */

  --k-text-xs:       0.75rem;   /* 12px — legal, fine print            */
  --k-text-sm:       0.875rem;  /* 14px — captions, meta               */
  --k-text-base:     1rem;      /* 16px — body text                    */
  --k-text-lg:       1.125rem;  /* 18px — lead paragraphs              */
  --k-text-xl:       1.25rem;   /* 20px — section intros               */
  --k-text-2xl:      1.5rem;    /* 24px — H4                           */
  --k-text-3xl:      1.875rem;  /* 30px — H3                           */
  --k-text-4xl:      2.25rem;   /* 36px — H2                           */
  --k-text-5xl:      3rem;      /* 48px — H1                           */
  --k-text-hero:     3.5rem;    /* 56px — hero headline                */

  /* Line-heights tuned for Japanese text.
     JP typically needs more line-height than Latin
     because characters are denser and taller.
     sit.keigakuji.org overrides to ~1.5 / ~1.2. */
  --k-leading-body:  1.9;       /* body text                           */
  --k-leading-heading: 1.4;     /* headings                            */
  --k-leading-tight: 1.2;       /* hero, display                       */

  /* Letter-spacing: JP body should be 0 or very slight.
     Headings can use a tiny positive value for elegance. */
  --k-tracking-body:    0;
  --k-tracking-heading: 0.04em;
  --k-tracking-wide:    0.12em;  /* labels, nav items                  */


  /* --------------------------------------------------------
     SPACING — 8px base, geometric scale
     -------------------------------------------------------- */

  --k-space-2xs:     0.25rem;   /*  4px  */
  --k-space-xs:      0.5rem;    /*  8px  */
  --k-space-s:       1rem;      /* 16px  */
  --k-space-m:       1.5rem;    /* 24px  */
  --k-space-l:       2rem;      /* 32px  */
  --k-space-xl:      3rem;      /* 48px  */
  --k-space-2xl:     5rem;      /* 80px  — section padding             */
  --k-space-3xl:     8rem;      /* 128px — hero padding                */


  /* --------------------------------------------------------
     LAYOUT WIDTHS
     -------------------------------------------------------- */

  --k-width-site:    1200px;    /* max site container                  */
  --k-width-content: 720px;     /* comfortable JP reading width        */
  --k-width-narrow:  580px;     /* centered poetic blocks, forms       */
  --k-width-wide:    1000px;    /* card grids, wide layouts            */


  /* --------------------------------------------------------
     BORDERS & RADII
     --------------------------------------------------------
     Slightly rounded, not pill-shaped. A temple is made
     of straight lines and natural curves, not Figma bubbles.
     -------------------------------------------------------- */

  --k-radius-s:      4px;
  --k-radius-m:      8px;
  --k-radius-l:      12px;
  --k-radius-full:   9999px;    /* pill buttons if ever needed         */

  --k-border-thin:   1px solid var(--k-border);
  --k-border-straw:  1px solid var(--k-straw);


  /* --------------------------------------------------------
     TRANSITIONS
     -------------------------------------------------------- */

  --k-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --k-duration:      200ms;
  --k-transition:    var(--k-duration) var(--k-ease);
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --k-duration: 0ms;
  }
}


/* ============================================================
   MOBILE OVERRIDES (< 768px)
   ============================================================
   Scale down the type for small screens.
   Spacing compresses proportionally.
   ============================================================ */

@media (max-width: 767px) {
  :root {
    --k-text-hero:   2.25rem;   /* 36px  */
    --k-text-5xl:    2rem;      /* 32px  */
    --k-text-4xl:    1.75rem;   /* 28px  */
    --k-text-3xl:    1.5rem;    /* 24px  */

    --k-space-2xl:   3rem;      /* 48px  */
    --k-space-3xl:   5rem;      /* 80px  */
  }
}