/* =============================================================
   Hikitori Design System — colors_and_type.css
   All low-level tokens + semantic variables live here.
   ============================================================= */

/* ---------- Fonts (webfont imports) -------------------------
   Japanese UI/body:  Noto Sans JP  (400, 500, 700)
   Japanese display:  Zen Kaku Gothic New (700, 900)  — rounded-terminal,
                      chunky katakana that echoes the logotype.
   Latin body:        Inter fallback via system stack is fine; we use
                      Noto Sans JP's latin for brand consistency.
   Numerics / mono:   JetBrains Mono (data tables, invoice numbers).
   NOTE: No custom font files were provided. These are Google Fonts
   substitutes. See README → Caveats.
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@700;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ===== PALETTE — raw tokens ============================== */

  /* Brand — coral-red sampled from the logo (#E84848) */
  --coral-50:  #FFF1F1;
  --coral-100: #FFDADA;
  --coral-200: #FAB5B5;
  --coral-300: #F38F8F;
  --coral-400: #EE6969;
  --coral-500: #E84848;   /* ★ brand primary — from logo */
  --coral-600: #CF3535;
  --coral-700: #A82828;
  --coral-800: #7A1E1E;
  --coral-900: #4A1212;

  /* Neutral — warm off-black → paper. NOT pure gray. Slight
     warm cast pairs better with the coral accent. */
  --ink-50:  #FAF8F6;     /* paper / page bg */
  --ink-100: #F1EDE8;     /* panel / card alt */
  --ink-200: #E3DCD3;     /* hairline */
  --ink-300: #C9BFB2;
  --ink-400: #9C9084;
  --ink-500: #6E6459;
  --ink-600: #4A4239;
  --ink-700: #302A24;
  --ink-800: #1E1A16;     /* body text */
  --ink-900: #121010;     /* display text */

  /* Support — muted, never garish. Used for semantic states
     only; the brand stays single-accent (coral). */
  --moss-500:   #4F7A4A;   /* success / paid / active */
  --moss-100:   #E4EDE2;
  --ochre-500:  #B8873A;   /* warning / pending */
  --ochre-100:  #F4E9CE;
  --claret-500: #9B2C2C;   /* error / overdue — darker than brand coral */
  --claret-100: #F4D9D9;
  --indigo-500: #3D4A73;   /* informational / links in body copy */
  --indigo-100: #DDE2F0;

  /* ===== SEMANTIC — use these, not raw tokens =============== */

  /* Surfaces */
  --bg-page:     var(--ink-50);
  --bg-panel:    #FFFFFF;
  --bg-sunken:   var(--ink-100);
  --bg-inverse:  var(--ink-900);

  /* Foreground / text */
  --fg-1:        var(--ink-900);    /* display headings */
  --fg-2:        var(--ink-800);    /* body */
  --fg-3:        var(--ink-500);    /* secondary / captions */
  --fg-4:        var(--ink-400);    /* tertiary / placeholder */
  --fg-inverse:  var(--ink-50);     /* text on dark */
  --fg-brand:    var(--coral-500);
  --fg-brand-hover: var(--coral-600);

  /* Lines */
  --line-1:      var(--ink-200);    /* default hairline */
  --line-2:      var(--ink-300);    /* emphasized */
  --line-focus:  var(--coral-500);

  /* Semantic */
  --fg-success:  var(--moss-500);
  --bg-success:  var(--moss-100);
  --fg-warning:  var(--ochre-500);
  --bg-warning:  var(--ochre-100);
  --fg-error:    var(--claret-500);
  --bg-error:    var(--claret-100);
  --fg-info:     var(--indigo-500);
  --bg-info:     var(--indigo-100);

  /* ===== TYPE =============================================== */

  --font-display: 'Zen Kaku Gothic New', 'Noto Sans JP',
                  'Hiragino Kaku Gothic ProN', 'Yu Gothic', system-ui, sans-serif;
  --font-body:    'Noto Sans JP',
                  'Hiragino Kaku Gothic ProN', 'Yu Gothic',
                  -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale — modular, ~1.25 ratio, tuned for JP density.
     JP copy reads denser than Latin — we use slightly larger
     body sizes and tighter line-heights than a Latin-only system. */
  --text-xs:   12px;   /* micro labels, legal */
  --text-sm:   14px;   /* captions, meta */
  --text-base: 16px;   /* body default */
  --text-md:   18px;   /* lead body */
  --text-lg:   20px;   /* h5 */
  --text-xl:   24px;   /* h4 */
  --text-2xl:  32px;   /* h3 */
  --text-3xl:  44px;   /* h2 */
  --text-4xl:  60px;   /* h1 */
  --text-5xl:  84px;   /* display hero */

  --lh-tight:    1.15;   /* display */
  --lh-snug:     1.35;   /* headings */
  --lh-normal:   1.65;   /* body JP — roomier than Latin default */
  --lh-loose:    1.9;    /* long-form */

  --tracking-tight: -0.02em;  /* display */
  --tracking-snug:  -0.01em;  /* headings */
  --tracking-normal: 0;
  --tracking-wide:  0.04em;   /* ALL-CAPS eyebrows */
  --tracking-jp:    0.02em;   /* Japanese body — subtle positive tracking */

  /* ===== SPACING ========================================== */
  /* 4px base. Use semantic names for layout. */
  --s-0:   0;
  --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;

  /* Semantic layout */
  --gutter:         var(--s-5);     /* 24 — grid gutter */
  --section-y:      var(--s-9);     /* 96 — between marketing sections */
  --container-max:  1200px;
  --container-pad:  var(--s-6);     /* 32 — container inner pad */

  /* ===== RADII ============================================ */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;    /* default for cards, inputs */
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ===== SHADOW =========================================== */
  /* Soft, warm, low-contrast. Hikitori is calm; no dramatic shadows. */
  --shadow-sm:  0 1px 2px rgba(48, 42, 36, 0.06);
  --shadow-md:  0 4px 12px rgba(48, 42, 36, 0.08),
                0 1px 3px rgba(48, 42, 36, 0.05);
  --shadow-lg:  0 12px 32px rgba(48, 42, 36, 0.10),
                0 2px 6px rgba(48, 42, 36, 0.05);
  --shadow-focus: 0 0 0 3px rgba(232, 72, 72, 0.28);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ===== MOTION =========================================== */
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --ease-emphasis: cubic-bezier(.16, 1, .3, 1);   /* gentle over-ease */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
}

/* =============================================================
   SEMANTIC ELEMENTS — raw HTML defaults using the tokens above.
   Scope to `.hk` (or the :root) so it doesn't bleed elsewhere.
   ============================================================= */
.hk, .hk * { box-sizing: border-box; }

.hk {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--bg-page);
  letter-spacing: var(--tracking-jp);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hk h1, .hk .h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
.hk h2, .hk .h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  margin: 0;
}
.hk h3, .hk .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  margin: 0;
}
.hk h4, .hk .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
.hk h5, .hk .h5 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
.hk .eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-brand);
}
.hk p  { margin: 0; }
.hk .lead { font-size: var(--text-md); color: var(--fg-2); line-height: var(--lh-normal); }
.hk .caption, .hk small { font-size: var(--text-sm); color: var(--fg-3); }
.hk .micro { font-size: var(--text-xs); color: var(--fg-3); }
.hk code, .hk .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}
.hk .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}