/* ============================================================
   FOIGA PHOTOGRAPHY — colors_and_type.css
   Editorial photo-book / lifestyle-techo system.
   Inspired by 暮しの手帖, KINFOLK, 寫真書.
   ============================================================ */

/* ---------- Webfonts (Google Fonts only) -------------------- */
/* Editorial Mincho + Sans pairing for Foiga.
   - Display    : Cormorant Garamond (Latin) + Shippori Mincho (CJK)
   - Body serif : Cormorant Garamond + Noto Serif JP Light
   - Body sans  : Inter Tight + Noto Sans JP Light
   Original brief used Morisawa Marumin Old / A News Mincho / A News Gothic —
   swapped for Google Fonts to drop the webfont sublicensing requirement and
   shed the local OTF payload. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter+Tight:wght@300;400;500&family=Shippori+Mincho:wght@400;500&family=Noto+Serif+JP:wght@300;400&family=Noto+Sans+JP:wght@300;400;500&display=swap");


/* ============================================================
   COLORS
   ============================================================ */
:root {
  /* Brand ---------------------------------------------------- */
  --foiga-sumi:        #0E0C0A;   /* logo black, ink */
  --foiga-bronze:      #A87850;   /* logo copper / FOIGA letterforms */
  --foiga-bronze-dk:   #87603F;   /* pressed / hover */
  --foiga-bronze-lt:   #C89060;   /* highlight, link */
  --foiga-bronze-pale: #E8D8C4;   /* tint, hairline panels */

  /* Paper / neutrals (warm, like uncoated stock) ----------- */
  --paper:             #F6F1E8;   /* primary page background */
  --paper-cream:       #EFE7D7;   /* tinted card / sidebar */
  --paper-warm:        #FBF7EE;   /* whitest, photo borders */
  --washi:             #E8E1D2;   /* very soft warm grey */

  /* Inks (text) -------------------------------------------- */
  --ink-1:             #1A1714;   /* primary text */
  --ink-2:             #4A4138;   /* secondary text */
  --ink-3:             #7A6E60;   /* tertiary, captions */
  --ink-4:             #A89C8A;   /* placeholder, meta */
  --rule:              #C8BFAE;   /* hairlines */

  /* Editorial accents (used very sparingly) ---------------- */
  --indigo-ink:        #2A3142;   /* deep cool ink (rare) */
  --moss:              #5C6B4F;   /* botanical accent */
  --vermilion:         #B14A35;   /* hanko-red, special marks */

  /* Semantic ----------------------------------------------- */
  --bg:                var(--paper);
  --bg-elev:           var(--paper-warm);
  --bg-tinted:         var(--paper-cream);
  --fg:                var(--ink-1);
  --fg-muted:          var(--ink-2);
  --fg-soft:           var(--ink-3);
  --fg-faint:          var(--ink-4);
  --hairline:          var(--rule);
  --accent:            var(--foiga-bronze);
  --accent-strong:     var(--foiga-bronze-dk);
  --link:              var(--foiga-bronze);
  --link-hover:        var(--foiga-bronze-dk);
  --selection-bg:      var(--foiga-bronze-pale);
  --selection-fg:      var(--ink-1);
}


/* ============================================================
   TYPE SCALE
   ------------------------------------------------------------
   Two families set the tone:
     · Display serif  → Cormorant Garamond (Latin) / Shippori Mincho (CJK)
     · Body Mincho    → Cormorant Garamond / Noto Serif JP — long-form editorial copy
     · Body Gothic    → Inter Tight / Noto Sans JP — captions, UI
   Tracking is tight on display, generous on metadata (.12em+).
   ============================================================ */
:root {
  --font-display:  "Cormorant Garamond", "Shippori Mincho", "Songti SC",
                   "Source Han Serif", "Noto Serif JP", serif;
  --font-serif:    "Cormorant Garamond", "Noto Serif JP",
                   "Source Han Serif", serif;
  --font-sans:     "Inter Tight", "Noto Sans JP",
                   "Source Han Sans",
                   system-ui, -apple-system, sans-serif;
  --font-latin-display: "Cormorant Garamond", "Shippori Mincho", serif;
  --font-latin-sans:    "Inter Tight", "Noto Sans JP", sans-serif;

  /* Sizes -- editorial, tight rhythm */
  --t-hero:        clamp(56px, 8vw, 112px);   /* magazine cover word */
  --t-display:     clamp(40px, 5.4vw, 72px);  /* section opener */
  --t-h1:          clamp(32px, 3.6vw, 48px);
  --t-h2:          28px;
  --t-h3:          22px;
  --t-h4:          18px;
  --t-body:        16px;
  --t-body-lg:     17px;
  --t-caption:     13px;
  --t-meta:        11px;       /* often UPPERCASE TRACKED */
  --t-folio:       10px;       /* page numbers / footers */

  /* Leading */
  --lh-tight:      1.08;
  --lh-snug:       1.25;
  --lh-body:       1.7;
  --lh-jp-body:    1.9;        /* Japanese body needs more leading */

  /* Tracking */
  --tr-tight:     -0.01em;
  --tr-normal:     0;
  --tr-meta:       0.14em;
  --tr-meta-wide:  0.22em;
}


/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
html { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font-serif);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-feature-settings: "palt", "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* Headings ---------------------------------------------------- */
.foiga-hero,
.foiga-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--ink-1);
}
.foiga-hero    { font-size: var(--t-hero); }
.foiga-display { font-size: var(--t-display); }

h1, .foiga-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--ink-1);
}
h2, .foiga-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.35;
  color: var(--ink-1);
}
h3, .foiga-h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.4;
  color: var(--ink-1);
}
h4, .foiga-h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h4);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* Body / paragraph ------------------------------------------- */
p, .foiga-p {
  font-family: var(--font-serif);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
}
p:lang(ja), p:lang(zh), .foiga-jp {
  line-height: var(--lh-jp-body);
}

/* Lede / standfirst */
.foiga-lede {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-1);
  font-style: italic;
}

/* Captions, metadata, folios --------------------------------- */
.foiga-caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  line-height: 1.55;
  color: var(--ink-3);
}
.foiga-meta {
  font-family: var(--font-latin-sans);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--ink-3);
}
.foiga-folio {
  font-family: var(--font-latin-sans);
  font-size: var(--t-folio);
  letter-spacing: var(--tr-meta-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Kicker / section label (often above titles) */
.foiga-kicker {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: var(--tr-meta-wide);
  text-transform: uppercase;
  color: var(--foiga-bronze);
}

/* Links ------------------------------------------------------ */
a, .foiga-link {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid var(--foiga-bronze-pale);
  transition: color 140ms ease, border-color 140ms ease;
}
a:hover, .foiga-link:hover {
  color: var(--link-hover);
  border-bottom-color: var(--foiga-bronze);
}

/* Mono / numerics — used only for codes, page refs, EXIF data */
.foiga-mono {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* Rules ------------------------------------------------------ */
hr, .foiga-rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 32px 0;
}
.foiga-rule-thin { border-top-width: 0.5px; }
.foiga-rule-ink  { border-top-color: var(--ink-1); }

/* Vertical rule (used in JP layouts) */
.foiga-vrule {
  width: 1px;
  background: var(--hairline);
}


/* ============================================================
   SPACING / RADII / SHADOWS
   ============================================================ */
:root {
  /* Spacing (8pt-ish, slightly editorial) */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10: 128px;

  /* Radii — Foiga is squared. Use radius only on tiny chips. */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-pill: 999px;

  /* Photo border (paper edge feel) */
  --photo-border: 1px solid var(--washi);

  /* Shadows — minimal. Photo-book shadows are very soft, warm-cast. */
  --shadow-1: 0 1px 2px rgba(26, 23, 20, 0.06);
  --shadow-2: 0 8px 24px -12px rgba(26, 23, 20, 0.18);
  --shadow-print: 0 18px 40px -22px rgba(26, 23, 20, 0.35);
}