/* =========================================================
   DIL — Foundations
   Type + color tokens. Import once at the top of any artifact.
   ========================================================= */

/* ---------- Webfonts ---------- */

@font-face {
  font-family: "Shippori Mincho";
  src: url("./fonts/ShipporiMincho-Regular.woff2") format("woff2"),
       url("./fonts/ShipporiMincho-OTF-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shippori Mincho";
  src: url("./fonts/ShipporiMincho-Medium.woff2") format("woff2"),
       url("./fonts/ShipporiMincho-OTF-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shippori Mincho";
  src: url("./fonts/ShipporiMincho-SemiBold.woff2") format("woff2"),
       url("./fonts/ShipporiMincho-OTF-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shippori Mincho";
  src: url("./fonts/ShipporiMincho-Bold.woff2") format("woff2"),
       url("./fonts/ShipporiMincho-OTF-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shippori Mincho";
  src: url("./fonts/ShipporiMincho-ExtraBold.woff2") format("woff2"),
       url("./fonts/ShipporiMincho-OTF-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* JetBrains Mono — loaded for monospace ラベル only. */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");


/* ---------- Tokens ---------- */
:root {
  /* — Brand color (sampled from logo: #001C5B) — */
  --dil-ink-900: #001033;          /* deepest, near-black navy */
  --dil-ink-800: #001C5B;          /* PRIMARY — the logo navy */
  --dil-ink-700: #0A2A6E;
  --dil-ink-600: #1F3F87;
  --dil-ink-500: #3E5BA0;          /* hover / link */
  --dil-ink-400: #6E83B8;
  --dil-ink-300: #A6B3D0;
  --dil-ink-200: #D2D9E6;
  --dil-ink-100: #E8ECF3;
  --dil-ink-050: #F2F4F8;

  /* — Paper / neutral warm — the cream backdrop mincho asks for — */
  --dil-paper-000: #FFFFFF;
  --dil-paper-050: #FBF9F4;        /* PRIMARY surface — warm off-white */
  --dil-paper-100: #F4F1EA;        /* card / inset */
  --dil-paper-200: #ECE7DC;        /* subtle divider field */
  --dil-paper-300: #DDD6C5;
  --dil-paper-400: #B8AE96;
  --dil-paper-500: #847A62;        /* subdued text on paper */

  /* — Sumi (ink black) — body text on paper — */
  --dil-sumi-900: #14130E;         /* near-black, warm */
  --dil-sumi-700: #2A2820;
  --dil-sumi-500: #5C5849;

  /* — Accent: warm editorial gold (kincha) — */
  --dil-shu-700: #8A6A2E;
  --dil-shu-500: #BFA572;          /* PRIMARY accent — warm gold */
  --dil-shu-300: #D6C297;

  /* — Semantic state — */
  --dil-success: #4F7A3F;
  --dil-warning: #B5832A;
  --dil-danger:  #9E2A1F;
  --dil-info:    var(--dil-ink-600);

  /* — Semantic foreground / background pairs — */
  --fg-1: var(--dil-sumi-900);     /* primary body text */
  --fg-2: var(--dil-sumi-700);     /* secondary text */
  --fg-3: var(--dil-paper-500);    /* muted, captions */
  --fg-brand: var(--dil-ink-800);  /* h1/display ink */
  --fg-accent: var(--dil-shu-500);
  --fg-on-ink: var(--dil-paper-050);

  --bg-1: var(--dil-paper-050);    /* page */
  --bg-2: var(--dil-paper-100);    /* card */
  --bg-3: var(--dil-paper-200);    /* inset / well */
  --bg-ink: var(--dil-ink-800);    /* dark surface */
  --bg-ink-deep: var(--dil-ink-900);

  --border-hairline: rgba(20, 19, 14, 0.10);
  --border-rule:     rgba(20, 19, 14, 0.18);
  --border-strong:   var(--dil-ink-800);

  /* — Type families — */
  --font-serif:  "Shippori Mincho", "Noto Serif JP", "Times New Roman", serif;
  --font-sans:   "Shippori Mincho", "Noto Serif JP", "Times New Roman", serif;
  --font-mono:   "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* — Type scale (semantic; pixels for predictability) — */
  --type-display:  clamp(48px, 6.5vw, 96px);
  --type-h1:       clamp(36px, 4.5vw, 60px);
  --type-h2:       clamp(28px, 3.2vw, 40px);
  --type-h3:       24px;
  --type-h4:       19px;
  --type-lead:     20px;
  --type-body:     16px;
  --type-small:    14px;
  --type-caption:  12px;
  --type-eyebrow:  11px;          /* uppercase, letter-spaced */

  /* — 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 — restrained. Mincho aesthetic favors crisp corners. — */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;

  /* — Shadows — soft, ink-tinted, never hard drop shadows — */
  --shadow-1: 0 1px 2px rgba(0, 16, 51, 0.04);
  --shadow-2: 0 2px 8px rgba(0, 16, 51, 0.06), 0 1px 2px rgba(0,16,51,0.04);
  --shadow-3: 0 8px 24px rgba(0, 16, 51, 0.08), 0 2px 6px rgba(0,16,51,0.04);
  --shadow-inset: inset 0 0 0 1px var(--border-hairline);

  /* — Motion — */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* — Layout — */
  --measure: 64ch;                  /* ideal text column */
  --container: 1200px;
  --rule-width: 1px;
}


/* ---------- Semantic resets / element styles ---------- */
html { color-scheme: light; }

body {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — always Shippori Mincho. Tight tracking, taller leading at large sizes. */
h1, h2, h3, h4, h5, h6, .display {
  font-family: var(--font-serif);
  color: var(--fg-brand);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.display { font-size: var(--type-display); line-height: 1.04; font-weight: 700; letter-spacing: -0.015em; }
h1       { font-size: var(--type-h1);      line-height: 1.08; font-weight: 700; letter-spacing: -0.01em; }
h2       { font-size: var(--type-h2);      line-height: 1.15; font-weight: 600; }
h3       { font-size: var(--type-h3);      line-height: 1.25; font-weight: 600; }
h4       { font-size: var(--type-h4);      line-height: 1.30; font-weight: 600; }

.lead    { font-size: var(--type-lead);    line-height: 1.5; color: var(--fg-2); font-family: var(--font-serif); font-weight: 400; }
p        { font-size: var(--type-body);    line-height: 1.6; max-width: var(--measure); text-wrap: pretty; }
small    { font-size: var(--type-small);   color: var(--fg-2); }
.caption { font-size: var(--type-caption); color: var(--fg-3); letter-spacing: 0.01em; }
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-accent);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code { background: var(--bg-3); padding: 0.1em 0.35em; border-radius: var(--radius-1); }

a {
  color: var(--fg-brand);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--border-rule);
  transition: color var(--dur-fast) var(--ease-standard),
              text-decoration-color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--dil-shu-500); text-decoration-color: currentColor; }

hr {
  border: 0;
  border-top: var(--rule-width) solid var(--border-rule);
  margin: var(--space-7) 0;
}

::selection { background: var(--dil-ink-800); color: var(--dil-paper-050); }