/* ============================================================
 * Teasan — design tokens
 * Lived-in maximalism. Dense restraint. Color-confident.
 * Depth + Sauce. Culture-first, never wellness, never
 * Japanese-aesthetic, never minimalist.
 *
 * Status: Heat (vermillion) is the locked hero anchor. The
 * supporting palette is a confident, layerable set built to
 * coexist as full color fields, not as timid accents.
 * ============================================================ */

@font-face {
  font-family: 'Crimson Text';
  src: url('fonts/CrimsonText-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Crimson Text';
  src: url('fonts/CrimsonText-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Crimson Text';
  src: url('fonts/CrimsonText-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Crimson Text';
  src: url('fonts/CrimsonText-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Helvetica Neue · wordmark, headlines, impact, technical body. */
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeueLight.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeueRoman.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeueItalic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeueMedium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeueBold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeueBoldItalic.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}

@font-face {
  font-family: 'Commit Mono';
  src: url('fonts/CommitMonoCustomedFinal-500-Regular.otf') format('opentype');
  font-weight: 400 600; font-style: normal; font-display: swap;
}

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

:root {
  /* --------------------------------------------------------
   * HERO ANCHOR
   * One vermillion red anchors the identity. It is the
   * recognition color: the thing you see across a shelf.
   * Everything else is built to sit confidently beside it.
   * ------------------------------------------------------ */
  --color-heat:    #A13D22;   /* Heat · brick vermillion · hero anchor */

  /* --------------------------------------------------------
   * NEUTRALS — warm, lived-in. Not white space.
   * ------------------------------------------------------ */
  --color-kinari:  #ECE3CE;   /* warm cream · primary ground */
  --color-rice:    #F4EEDD;   /* lighter cream · elevated surface */
  --color-shiro:   #FBF9F2;   /* warm bright white · reversed TEXT on dark fields only */
  --color-sumi:    #1C1813;   /* warm near-black · ink and dark grounds */
  /* legacy aliases kept so existing cards keep resolving */
  --color-chalk:   var(--color-kinari);
  --color-slate:   var(--color-sumi);
  --color-paper:   var(--color-kinari);
  --color-black:   var(--color-sumi);

  /* --------------------------------------------------------
   * SUPPORTING PALETTE
   * Confident, layerable color used as FULL FIELDS. Heritage
   * depth (Pine, Indigo, Oxblood, Ochre) plus one surreal
   * pop (Citron — the "Sauce"). These pair with Heat and with
   * each other. Not reserved for content-world only; they
   * carry packaging SKU differentiation at smaller scale.
   * ------------------------------------------------------ */
  --color-pine:    #20473A;   /* deep heritage green · red's complement */
  --color-indigo:  #1F3149;   /* deep ink blue · cool anchor */
  --color-oxblood: #6E1F24;   /* burgundy · Heat's deep cousin */
  --color-ochre:   #BD7B29;   /* warm gold · bridges red and green */
  --color-citron:  #B3B936;   /* chartreuse · the surreal pop, used sparingly */

  /* Semantic */
  --bg-default:    var(--color-kinari);
  --bg-elevated:   var(--color-rice);
  --bg-inverse:    var(--color-sumi);
  --fg-default:    var(--color-sumi);
  --fg-inverse:    var(--color-shiro);
  --fg-muted:      rgba(28, 24, 19, 0.64);
  --fg-subtle:     rgba(28, 24, 19, 0.40);
  --fg-on-heat:    var(--color-shiro);
  --border-default: rgba(28, 24, 19, 0.18);
  --border-strong:  var(--color-sumi);
  --accent:        var(--color-heat);
  --accent-fg:     var(--color-kinari);

  /* legacy City Pop aliases retired — mapped onto the new set
     so any stragglers still resolve to live tokens */
  --color-cerulean: var(--color-indigo);
  --color-pink:     var(--color-oxblood);
  --color-cadmium:  var(--color-ochre);

  /* Semantic (legacy block below retired; see top of :root) */

  /* --------------------------------------------------------
   * TYPE
   * ------------------------------------------------------ */
  --font-serif:   'DM Serif Display', 'GT Sectra', 'Iowan Old Style', serif;
  --font-sans:    'Helvetica Neue', 'Inter', system-ui, sans-serif;
  --font-jp:      'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-jp-serif: 'Noto Serif JP', 'Source Han Serif JP', 'Hiragino Mincho ProN', serif;
  --font-mono:    'Commit Mono', ui-monospace, monospace;
  --font-jp:      'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-jp-serif: 'Noto Serif JP', 'Source Han Serif JP', 'Hiragino Mincho ProN', serif;

  --fs-display:   84px;
  --fs-h1:        56px;
  --fs-h2:        36px;
  --fs-h3:        24px;
  --fs-h4:        18px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-mono:      13px;

  --lh-tight:     1.02;
  --lh-snug:      1.18;
  --lh-base:      1.5;
  --lh-loose:     1.6;

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* Spacing, radius, motion */
  --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;

  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;

  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(28,24,19,.08);
  --shadow-2: 0 10px 28px rgba(28,24,19,.12);

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --ease-base:     cubic-bezier(0.4, 0, 0.2, 1);
}

html, body {
  font-family: var(--font-sans);
  font-size:   var(--fs-body);
  line-height: var(--lh-base);
  color:       var(--fg-default);
  background:  var(--bg-default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.t-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-bold);
}
h1, .t-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight); font-weight: var(--fw-bold); margin: 0;
}
h2, .t-h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2); line-height: var(--lh-snug);
  font-weight: var(--fw-regular); margin: 0;
}
h3, .t-h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3); line-height: var(--lh-snug);
  font-weight: var(--fw-regular); margin: 0;
}
/* Editorial accent — GT Sectra (stand-in: DM Serif Display).
   Use ONLY for pull quotes, oversized story headlines, callouts.
   Never for running body copy. */
.t-editorial-accent {
  font-family: var(--font-serif);
  font-size: 28px; line-height: 1.2;
  font-weight: var(--fw-regular);
}
/* Botanical names — always italic GT Sectra. */
.t-botanical {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
}
/* Product / blend names — italic editorial convention. */
.t-blend {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
}
.t-serif { font-family: var(--font-serif); font-weight: var(--fw-regular); }
h4, .t-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4); line-height: var(--lh-base);
  font-weight: var(--fw-medium); margin: 0;
}
p, .t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body); line-height: var(--lh-loose);
  font-weight: var(--fw-regular); text-wrap: pretty;
}
.t-small {
  font-family: var(--font-sans);
  font-size: var(--fs-small); line-height: var(--lh-base);
}
.t-jp { font-family: var(--font-jp); }
.t-jp-serif { font-family: var(--font-jp-serif); }
.t-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono); line-height: 1.4;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase; font-weight: var(--fw-medium);
}
code, .t-code { font-family: var(--font-mono); font-size: 0.94em; }

a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: opacity var(--duration-base) var(--ease-base); }
a:hover { opacity: 0.7; }