/* ============================================================================
   太閤検地株式会社 — Design System
   colors_and_type.css  ·  base tokens + semantic tokens
   ---------------------------------------------------------------------------
   DIRECTION  →  「白を基調に、明るく、信頼できる」

   Base is CLEAN WHITE. The page ground is a whisper-light neutral, cards are
   pure white, and the ink is a deep neutral blue-black. Indigo (藍) is the
   trust colour and carries every piece of structure; vermilion (朱) is the
   logo's seal and the colour of a single primary action.

   The 和紙 (warm cream) direction is retained as an opt-in theme so the two can
   be compared: <html data-theme="washi">. See the [data-theme="washi"] block at
   the end of :root.
   ========================================================================= */

/* ---------------------------------------------------------------- FONTS --- */
/* Shippori Mincho — display / headings. Subsetted to jōyō kanji + kana + latin. */
@font-face {
  font-family: 'Shippori Mincho';
  src: url('../fonts/shippori-mincho-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Shippori Mincho';
  src: url('../fonts/shippori-mincho-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Shippori Mincho';
  src: url('../fonts/shippori-mincho-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Shippori Mincho';
  src: url('../fonts/shippori-mincho-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
/* Noto Sans JP — body / UI. Variable weight axis. */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/noto-sans-jp-var.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* Cormorant Garamond — Latin display (the "TAIKO KENCHI" lockup, numerals). */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-var.woff2') format('woff2-variations');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  /* =========================================================== FONTS === */
  --font-display: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'MS PMincho', serif;
  --font-body:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  --font-latin:   'Cormorant Garamond', 'Shippori Mincho', Georgia, serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;

  /* ============================================================= INK === */
  /* Neutral blue-blacks. Warm sumi is gone: on a clean white ground a warm ink
     reads muddy, so the ink now carries a trace of blue for crispness. */
  --sumi-900: #12161C;   /* headings · deepest */
  --sumi-800: #1D232B;
  --sumi-700: #333B45;   /* body */
  --sumi-600: #4C5560;   /* secondary */
  --sumi-500: #6B747F;
  --sumi-400: #8C949E;   /* muted / captions */
  --sumi-300: #AEB5BD;   /* disabled text */
  --sumi-200: #CFD5DC;   /* strong hairline */
  --sumi-100: #E5E9EE;   /* hairline / divider */
  --sumi-050: #F2F5F8;   /* subtle fill */

  /* ============================================================= 藍 === */
  /* Indigo — the brand primary, and the trust colour. Brightened from the
     earlier #314470 so it reads 明るい on white while staying authoritative. */
  --ai-950: #0F1930;
  --ai-900: #16233D;     /* dark ground (only the contact band uses this) */
  --ai-800: #1D3055;
  --ai-700: #26437A;     /* PRIMARY */
  --ai-600: #31579B;     /* hover */
  --ai-500: #3F6BB8;
  --ai-400: #5F87C8;
  --ai-300: #8FACDC;
  --ai-200: #C0D2EE;
  --ai-100: #E1EAF9;
  --ai-050: #F1F5FD;     /* pale indigo band */

  /* ============================================================= 朱 === */
  /* RETIRED — 2026.10. The approved logo contains no red: its colours are
     black (--sumi-900) and gold (--kin-500). The vermilion ramp is kept ONLY so
     un-migrated files don't hard-fail, and is deliberately desaturated to grey
     so any surviving usage is instantly visible as wrong. Do not use these.
     The single "action" colour is now deep gold (--kin-600); structure stays
     indigo (--ai-700). */
  --shu-900: #3A3A3A;
  --shu-800: #494949;
  --shu-700: #585858;
  --shu-600: #6A6A6A;
  --shu-500: #7C7C7C;    /* retired — DO NOT USE */
  --shu-400: #909090;
  --shu-300: #A8A8A8;
  --shu-200: #C4C4C4;
  --shu-100: #E0E0E0;
  --shu-050: #F0F0F0;

  /* ============================================================= 金 === */
  /* BRAND GOLD — sampled from the official logo (#A88541). This is now the
     brand accent. The deep step is used for filled surfaces so white text on it
     clears 4.5:1; the base step is the logo gold itself. */
  --kin-700: #6F5522;    /* press / deep — 7.0:1 on white */
  --kin-600: #8A6B2E;    /* ACCENT fill — 4.9:1 on white */
  --kin-500: #A88541;    /* BRAND GOLD — the logo colour */
  --kin-400: #C0A162;
  --kin-300: #D6BE86;
  --kin-200: #E6D7B4;
  --kin-100: #F3EAD7;    /* tint ground */
  --kin-050: #FAF6EC;

  /* ========================================================== 白 / 面 === */
  /* The base. Pure white cards on a whisper-light neutral page. */
  --washi-000: #FFFFFF;  /* raised card, input */
  --washi-050: #FCFDFE;
  --washi-100: #F7F9FB;  /* DEFAULT PAGE GROUND — bright, clean */
  --washi-200: #EEF2F6;  /* sunken panel / light band */
  --washi-300: #E2E8EF;  /* card on white */

  /* ======================================================== FEEDBACK === */
  --midori-600: #1F7A4D;  /* success — darker than before: contrast on white */
  --midori-100: #DFF3E7;
  --ki-600:     #A87514;  /* warning */
  --ki-100:     #FBF0D5;
  --aka-700:    #B3261E;  /* error */
  --aka-100:    #FCE7E5;

  /* ==================================================== SEMANTIC · S === */
  --bg:            var(--washi-100);
  --bg-raised:     var(--washi-000);
  --bg-sunken:     var(--washi-200);
  --bg-ink:        var(--ai-900);      /* the one dark band */
  --bg-inverse:    var(--sumi-900);

  --fg1:           var(--sumi-900);
  --fg2:           var(--sumi-700);
  --fg3:           var(--sumi-600);
  --fg4:           var(--sumi-400);
  --fg-onink:      var(--washi-000);
  --fg-onink-2:    #C3D0E4;

  --brand:         var(--ai-700);
  --brand-hover:   var(--ai-600);
  --brand-press:   var(--ai-800);
  --brand-tint:    var(--ai-050);

  --accent:        var(--kin-600);   /* deep gold — the one action colour */
  --accent-hover:  var(--kin-500);   /* brand gold */
  --accent-press:  var(--kin-700);
  --accent-tint:   var(--kin-100);

  --gold:          var(--kin-500);

  --rule-accent:   var(--kin-500);   /* gold hairline — echoes the logo arc */

  --link:          var(--ai-700);
  --link-hover:    var(--ai-600);

  --border:        var(--sumi-100);
  --border-strong: var(--sumi-200);
  --border-subtle: var(--sumi-050);
  --border-brand:  var(--ai-700);
  --border-onink:  rgba(255, 255, 255, 0.24);

  --success:       var(--midori-600);
  --warning:       var(--ki-600);
  --error:         var(--aka-700);

  /* ======================================================== SPACING === */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;
  --section-y:      clamp(64px, 9vw, 128px);
  --section-y-tight: clamp(40px, 5vw, 72px);
  --gutter:         clamp(20px, 4vw, 48px);
  --measure:        68ch;
  --container:      1160px;
  --container-wide: 1400px;

  /* ========================================================== RADII === */
  /* Still rectilinear — but white space means a slightly softer 6px reads
     friendlier without turning into a consumer app. */
  --r-xs:  2px;
  --r-sm:  3px;
  --r-md:  6px;
  --r-lg:  10px;
  --r-xl:  16px;
  --r-pill: 999px;
  --r-seal: 4px;

  /* ========================================================= SHADOWS === */
  /* Cool, very low-opacity. On white, shadow does the work that a hairline
     used to do on cream — so shadows are slightly stronger and always blue. */
  --sh-xs:  0 1px 2px rgba(18, 29, 48, 0.05);
  --sh-sm:  0 1px 3px rgba(18, 29, 48, 0.07), 0 1px 2px rgba(18, 29, 48, 0.04);
  --sh-md:  0 2px 10px rgba(18, 29, 48, 0.08), 0 1px 3px rgba(18, 29, 48, 0.05);
  --sh-lg:  0 10px 28px rgba(18, 29, 48, 0.09), 0 2px 6px rgba(18, 29, 48, 0.05);
  --sh-xl:  0 20px 52px rgba(18, 29, 48, 0.13), 0 6px 14px rgba(18, 29, 48, 0.06);
  --sh-ink: 0 14px 36px rgba(18, 29, 48, 0.22);
  --ring:      inset 0 0 0 1px var(--border);
  --ring-brand: inset 0 0 0 1px var(--ai-200);

  /* ======================================================== MOTION === */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --ease-settle: cubic-bezier(0.16, 0.84, 0.44, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 560ms;
  --dur-5: 900ms;

  /* ===================================================== TYPE SCALE === */
  --t-display-1: clamp(2.75rem, 6.4vw, 4.75rem);
  --t-display-2: clamp(2.25rem, 4.6vw, 3.5rem);
  --t-h1:        clamp(1.875rem, 3.4vw, 2.75rem);
  --t-h2:        clamp(1.5rem, 2.4vw, 2rem);
  --t-h3:        clamp(1.25rem, 1.6vw, 1.5rem);
  --t-h4:        1.125rem;
  --t-lead:      clamp(1.0625rem, 1.35vw, 1.25rem);
  --t-body:      1rem;
  --t-small:     0.875rem;
  --t-caption:   0.8125rem;
  --t-micro:     0.6875rem;

  --lh-display: 1.28;
  --lh-heading: 1.42;
  --lh-body:    1.9;
  --lh-tight:   1.6;

  --ls-display: 0.02em;
  --ls-heading: 0.04em;
  --ls-body:    0.02em;
  --ls-label:   0.14em;
  --ls-wide:    0.22em;

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

/* ============================================================================
   OPT-IN THEME · 和紙 (the original warm-cream direction)
   Enable with <html data-theme="washi"> to compare. Only the neutral and
   surface tokens change — the indigo/vermilion brand colours are shared.
   ========================================================================= */
[data-theme="washi"] {
  --sumi-900: #1E1A17;
  --sumi-800: #2A2521;
  --sumi-700: #3B3530;
  --sumi-600: #544E47;
  --sumi-500: #6F6860;
  --sumi-400: #8C857C;
  --sumi-300: #ADA69C;
  --sumi-200: #CCC5BB;
  --sumi-100: #E4DED6;
  --sumi-050: #F1ECE5;

  --ai-700: #314470;
  --ai-600: #3E5484;
  --ai-800: #26375A;
  --ai-900: #1D2A44;
  --ai-050: #F1F4FA;
  --ai-100: #DEE5F1;
  --ai-200: #BFCBE2;

  --washi-000: #FFFDFA;
  --washi-050: #FBFAF5;
  --washi-100: #F7F3EA;
  --washi-200: #F0EADD;
  --washi-300: #E5DDCC;

  --ki-600: #C08A20;
  --ki-100: #F8EBCB;
  --midori-600: #2E6E4B;
  --aka-700: #8C2A22;

  --sh-xs:  0 1px 2px rgba(42, 37, 33, 0.06);
  --sh-sm:  0 1px 3px rgba(42, 37, 33, 0.08), 0 1px 2px rgba(42, 37, 33, 0.05);
  --sh-md:  0 2px 8px rgba(42, 37, 33, 0.09), 0 1px 3px rgba(42, 37, 33, 0.05);
  --sh-lg:  0 8px 24px rgba(42, 37, 33, 0.10), 0 2px 6px rgba(42, 37, 33, 0.06);
  --sh-xl:  0 16px 48px rgba(42, 37, 33, 0.14), 0 4px 12px rgba(42, 37, 33, 0.07);
  --sh-ink: 0 12px 32px rgba(29, 42, 68, 0.28);

  --link: #9E4331;
  --link-hover: #B8513C;
  --r-md: 5px;
  --r-lg: 8px;
}

/* ============================================================ RESET === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg2);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  font-feature-settings: 'palt' 1, 'kern' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: var(--ls-body);
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); text-decoration: none; }
::selection { background: var(--ai-200); color: var(--ai-950); }
:focus-visible { outline: 2px solid var(--ai-600); outline-offset: 2px; }

/* ====================================================== TYPE STYLES === */
.display-1, .display-2, .h1, .h2, .h3, .h4, .eyebrow, .lead, .serif-quote,
.num-latin, .label, .body, .small, .caption, .micro, .mono-num { margin: 0; }

.display-1 {
  font-family: var(--font-display);
  font-size: var(--t-display-1); font-weight: var(--fw-semibold);
  line-height: var(--lh-display); letter-spacing: var(--ls-display);
  color: var(--fg1);
}
.display-2 {
  font-family: var(--font-display);
  font-size: var(--t-display-2); font-weight: var(--fw-semibold);
  line-height: var(--lh-display); letter-spacing: var(--ls-display);
  color: var(--fg1);
}
.h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1); font-weight: var(--fw-semibold);
  line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
  color: var(--fg1);
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2); font-weight: var(--fw-semibold);
  line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
  color: var(--fg1);
}
.h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3); font-weight: var(--fw-semibold);
  line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
  color: var(--fg1);
}
.h4 {
  font-family: var(--font-body);
  font-size: var(--t-h4); font-weight: var(--fw-bold);
  line-height: var(--lh-tight); letter-spacing: var(--ls-heading);
  color: var(--fg1);
}
.lead {
  font-family: var(--font-body);
  font-size: var(--t-lead); font-weight: var(--fw-regular);
  line-height: 1.85; letter-spacing: var(--ls-body); color: var(--fg2);
}
.body { font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg2); }
.small { font-size: var(--t-small); line-height: 1.75; color: var(--fg3); }
.caption { font-size: var(--t-caption); line-height: 1.6; color: var(--fg4); letter-spacing: 0.03em; }
.micro {
  font-family: var(--font-body);
  font-size: var(--t-micro); font-weight: var(--fw-bold);
  line-height: 1.4; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--fg4);
}
.label {
  font-family: var(--font-body);
  font-size: var(--t-caption); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg4);
}
.serif-quote {
  font-family: var(--font-display);
  font-size: var(--t-h3); font-weight: var(--fw-regular);
  line-height: 1.7; letter-spacing: 0.03em; color: var(--fg1);
}
.num-latin {
  font-family: var(--font-latin); font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.01em;
}
.mono-num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  letter-spacing: 0; font-size: 0.9em;
}
/* Latin eyebrow above a Japanese heading — the brand's paired lockup.
   Indigo by default: vermilion is reserved for the logo and one action. */
.en {
  font-family: var(--font-latin);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--brand);
  font-size: clamp(0.75rem, 1vw, 0.875rem);
}
.rule-accent { display: block; width: 48px; height: 2px; background: var(--accent); border: 0; }
.rule-ink    { display: block; width: 48px; height: 1px; background: var(--sumi-300); border: 0; }
.rule-brand  { display: block; width: 48px; height: 2px; background: var(--brand); border: 0; }