/* ==========================================================================
   JAPAN BOUTIQUE - DESIGN TOKENS
   Source: Mini brandbook + colour palette PDF (palette values are exact).
   Fonts: Ysabeau (headings, caps) + Noto Sans (body). Self-host the files
   in /assets/fonts (GDPR-friendly, no Google request).
   ========================================================================== */

@font-face {
  font-family: "Ysabeau";
  src: url("../fonts/Ysabeau-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-VariableFont_wdth,wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ---- Colour: brand palette -------------------------------------------- */
  --jb-cream:  #f8f4df;  /* RGB 248/244/223 - page background             */
  --jb-sand:   #e2e0b8;  /* RGB 226/224/184 - soft surfaces, borders      */
  --jb-red:    #9b1c1f;  /* RGB 155/28/31   - hinomaru accent, use sparingly */
  --jb-olive:  #555c3a;  /* RGB 85/92/58    - primary brand / actions     */
  --jb-black:  #000000;  /* text                                          */
  --jb-white:  #ffffff;

  /* ---- Colour: derived (UI states only, same hue family) ---------------- */
  --jb-olive-dark:  #444a2e;  /* hover */
  --jb-red-dark:    #7d1619;  /* hover */
  --jb-ink:         #1d1d1b;  /* softer body text, AAA on cream */
  --jb-ink-soft:    #55564a;  /* secondary text, AA on cream (>= 6:1) */
  --jb-line:        #d6d3a8;  /* hairlines on cream */

  /* ---- Semantic roles --------------------------------------------------- */
  --color-bg:        var(--jb-cream);
  --color-surface:   var(--jb-white);
  --color-surface-2: var(--jb-sand);
  --color-text:      var(--jb-ink);
  --color-text-soft: var(--jb-ink-soft);
  --color-primary:   var(--jb-olive);
  --color-primary-hover: var(--jb-olive-dark);
  --color-on-primary: var(--jb-cream);
  --color-accent:    var(--jb-red);
  --color-accent-hover: var(--jb-red-dark);
  --color-border:    var(--jb-line);
  --color-focus:     var(--jb-red);

  /* ---- Typography ------------------------------------------------------- */
  --font-heading: "Ysabeau", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid scale, 1.25 ratio, 360px -> 1280px viewport */
  --fs-xs:   clamp(0.75rem,  0.73rem + 0.10vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --fs-base: clamp(1rem,     0.97rem + 0.15vw, 1.0625rem);
  --fs-md:   clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
  --fs-lg:   clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem);
  --fs-xl:   clamp(1.75rem,  1.5rem  + 1.1vw,  2.5rem);
  --fs-2xl:  clamp(2.25rem,  1.8rem  + 2vw,    3.5rem);
  --fs-hero: clamp(2.75rem,  2rem    + 3.4vw,  5rem);

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.6;

  --tracking-caps: 0.08em;   /* uppercase headings per brandbook */

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;
  --container: 1280px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* ---- Shape, elevation, motion ---------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(29, 29, 27, .06), 0 8px 24px -12px rgba(29, 29, 27, .18);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;

  /* ---- Layout helpers --------------------------------------------------- */
  --tap-min: 44px;           /* minimum touch target (WCAG 2.5.5 / Apple HIG) */
}

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