/* =========================================================
   Gleam & Sip — design tokens
   Color, type, spacing, radii, shadow, motion.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Hanken+Grotesk:wght@300;400;500;600;700&family=Noto+Serif+JP:wght@300;400;500&display=swap');

:root {
  /* -----------------------------------------------------
     COLOR — paper / ink / matcha / clay
     ----------------------------------------------------- */

  /* Paper — washi-toned off-whites, the default backgrounds */
  --paper-0: #F6F1E6;   /* washi base — page background */
  --paper-1: #F0EADC;   /* card surface, primary paper */
  --paper-2: #E8E1D0;   /* nested surface, subtle fill */
  --paper-3: #DDD4BF;   /* dividers between paper regions, quiet hover */
  --paper-bone: #FBF7EE; /* lightest — overlays, modals */

  /* Sumi — ink-stick blacks and stone greys, for type and rules */
  --ink-0: #14130E;     /* deepest sumi — display headlines */
  --ink-1: #221F18;     /* primary text */
  --ink-2: #45412F;     /* secondary text */
  --ink-3: #6E6750;     /* tertiary, metadata, captions */
  --ink-4: #9C9478;     /* disabled, hint, very soft */

  /* Matcha — desaturated stone-ground green */
  --matcha-0: #4A5A2E;  /* deepest matcha — pressed text */
  --matcha-1: #6B8040;  /* primary accent — slightly greener */
  --matcha-2: #8FA361;  /* hover/light state */
  --matcha-3: #B8C28E;  /* fill tint */
  --matcha-4: #DEE3C5;  /* very soft wash */

  /* Vermillion — the seal-stamp accent, used very sparingly */
  --seal-1: #A23B2A;    /* deep vermillion — kanji seals only */
  --seal-2: #C25A48;    /* lighter, for hover/text */
  --seal-3: #EBD0CB;    /* wash */

  /* Semantic surface roles */
  --bg: var(--paper-0);
  --surface: var(--paper-1);
  --surface-sunk: var(--paper-2);
  --surface-raised: var(--paper-1);
  --rule: rgba(42, 39, 31, 0.12);   /* hairline 1px */
  --rule-strong: rgba(42, 39, 31, 0.22);

  /* Semantic text roles */
  --fg: var(--ink-1);
  --fg-strong: var(--ink-0);
  --fg-muted: var(--ink-2);
  --fg-soft: var(--ink-3);
  --fg-faint: var(--ink-4);

  /* Semantic accent roles */
  --accent: var(--matcha-1);
  --accent-hover: var(--matcha-0);
  --accent-soft: var(--matcha-4);
  --accent-fg-on-accent: var(--paper-0);

  /* Backwards-compatible clay aliases (now mapped to seal/vermillion) */
  --clay-1: var(--seal-1);
  --clay-2: var(--seal-2);
  --clay-3: var(--seal-3);

  /* Status (used very sparingly — brand is not loud about errors) */
  --status-error: #9A4233;
  --status-error-soft: #F2E2DC;
  --status-success: var(--matcha-0);

  /* -----------------------------------------------------
     TYPE — families, scale, semantic styles
     ----------------------------------------------------- */

  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-italic: "Spectral", Georgia, serif;
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-accent: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* Type scale (fluid not used — brand prefers crisp fixed sizes) */
  --t-display-xl: 88px;
  --t-display-l: 64px;
  --t-display-m: 48px;
  --t-display-s: 36px;
  --t-h1: 44px;
  --t-h2: 32px;
  --t-h3: 24px;
  --t-h4: 20px;
  --t-body-l: 19px;
  --t-body: 16px;
  --t-body-s: 14px;
  --t-meta: 12px;
  --t-micro: 11px;

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --lh-tight: 1.3;

  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body: 0;
  --ls-meta: 0.16em;     /* small caps tracked */

  /* -----------------------------------------------------
     SPACING — 4px base
     ----------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* -----------------------------------------------------
     RADII — almost zero by default
     ----------------------------------------------------- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 9999px;

  /* -----------------------------------------------------
     SHADOWS — used sparingly
     ----------------------------------------------------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(26, 24, 19, 0.04), 0 8px 24px rgba(26, 24, 19, 0.04);
  --shadow-2: 0 2px 4px rgba(26, 24, 19, 0.06), 0 16px 40px rgba(26, 24, 19, 0.08);

  /* -----------------------------------------------------
     MOTION
     ----------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 200ms;
  --dur: 400ms;
  --dur-slow: 700ms;

  /* -----------------------------------------------------
     LAYOUT
     ----------------------------------------------------- */
  --measure-prose: 640px;     /* prose column max */
  --measure-wide: 1080px;     /* media-heavy max */
  --measure-page: 1280px;     /* outermost container */
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   ========================================================= */

html { background: var(--bg); color: var(--fg); }

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display & headings — serif, italic for the most lyric H1 */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-display-l);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-strong);
}

h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--fg-strong);
  margin: 0;
}

h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--fg-strong);
  margin: 0;
}

h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
  color: var(--fg-strong);
  margin: 0;
}

h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-h4);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  color: var(--fg-strong);
  margin: 0;
}

p {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
  margin: 0;
}

.lede, p.lede {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-body-l);
  line-height: 1.55;
  color: var(--fg-muted);
}

.meta, .eyebrow {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: var(--t-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--fg-soft);
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(123, 143, 78, 0.5);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
a:hover { text-decoration-color: var(--accent); }

hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: var(--space-7) 0;
}

::selection {
  background: var(--matcha-4);
  color: var(--ink-0);
}

/* =========================================================
   PRIMITIVE UTILITY CLASSES (used by preview cards + UI kit)
   ========================================================= */

.gs-pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-fg-on-accent);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-body-s);
  letter-spacing: 0.02em;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.gs-pill-button:hover { background: var(--accent-hover); }
.gs-pill-button:active { background: var(--matcha-0); transform: none; }

.gs-ghost-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 20px;
  border-radius: var(--radius-2);
  background: transparent;
  color: var(--fg-strong);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-body-s);
  border: 1px solid var(--rule-strong);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.gs-ghost-button:hover { background: rgba(0,0,0,0.03); border-color: var(--ink-3); }

.gs-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-2);
  padding: var(--space-6);
}

.gs-rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  width: 100%;
}