/* ============================================================
   Tsumugi Web Design System — Colors & Type
   ============================================================
   落ち着いた信頼感のある青系をベースに、アクセントは
   テラコッタ寄りのオレンジ。サンセリフ体・柔らかい角丸。
   ============================================================ */

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

:root {
  /* ---------- BASE COLORS — Blue (Primary) ---------- */
  --blue-50:  #f1f5f9;
  --blue-100: #dbe5ee;
  --blue-200: #b7c9da;
  --blue-300: #8ba8c2;
  --blue-400: #5e84a4;
  --blue-500: #3d6586;
  --blue-600: #2f5070;
  --blue-700: #243f5a;
  --blue-800: #1c3247;
  --blue-900: #142436;

  /* ---------- BASE COLORS — Terracotta (Accent) ---------- */
  --terracotta-50:  #fbf3ee;
  --terracotta-100: #f5e0d3;
  --terracotta-200: #ecc1ab;
  --terracotta-300: #df9d7e;
  --terracotta-400: #d17c5a;
  --terracotta-500: #c0623e;
  --terracotta-600: #a64f30;
  --terracotta-700: #823d26;
  --terracotta-800: #5e2c1c;
  --terracotta-900: #3d1c12;

  /* ---------- NEUTRALS ---------- */
  --neutral-0:   #ffffff;
  --neutral-50:  #faf8f5;
  --neutral-100: #f3efe9;
  --neutral-200: #e6e1d8;
  --neutral-300: #cfc8bc;
  --neutral-400: #a89f90;
  --neutral-500: #80776a;
  --neutral-600: #5d564c;
  --neutral-700: #3f3a33;
  --neutral-800: #2a2620;
  --neutral-900: #1a1714;

  /* ---------- SEMANTIC — STATUS ---------- */
  --success-500: #5a8a5e;
  --success-100: #e3eee2;
  --warning-500: #d59a3b;
  --warning-100: #f7ecd2;
  --danger-500:  #b34a3a;
  --danger-100:  #f3dcd6;
  --info-500:    var(--blue-500);
  --info-100:    var(--blue-100);

  /* ---------- SEMANTIC — FG / BG / BORDER ---------- */
  --bg-page:        var(--neutral-50);
  --bg-surface:     var(--neutral-0);
  --bg-surface-alt: var(--neutral-100);
  --bg-inverse:     var(--blue-900);

  --fg-1: var(--neutral-900);
  --fg-2: var(--neutral-700);
  --fg-3: var(--neutral-500);
  --fg-4: var(--neutral-400);
  --fg-on-primary: var(--neutral-0);
  --fg-on-accent:  var(--neutral-0);
  --fg-link:       var(--blue-600);
  --fg-link-hover: var(--blue-700);

  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-500);

  /* ---------- BRAND ROLES ---------- */
  --color-primary:        var(--blue-700);
  --color-primary-hover:  var(--blue-800);
  --color-primary-press:  var(--blue-900);
  --color-primary-soft:   var(--blue-100);

  --color-accent:         var(--terracotta-500);
  --color-accent-hover:   var(--terracotta-600);
  --color-accent-press:   var(--terracotta-700);
  --color-accent-soft:    var(--terracotta-100);

  /* ---------- TYPE — FAMILIES ---------- */
  --font-sans-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
                  "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --font-sans-latin: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-sans: var(--font-sans-latin), var(--font-sans-jp);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* ---------- TYPE — SCALE ---------- */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  1.875rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  3rem;
  --fs-5xl:  3.75rem;

  /* ---------- TYPE — WEIGHTS ---------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- TYPE — LINE HEIGHTS ---------- */
  --lh-tight:   1.25;
  --lh-snug:    1.4;
  --lh-normal:  1.65;
  --lh-relaxed: 1.85;

  /* ---------- TYPE — TRACKING ---------- */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  /* ---------- SPACING ---------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* ---------- RADII ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(20, 36, 54, 0.04);
  --shadow-sm: 0 2px 6px rgba(20, 36, 54, 0.06);
  --shadow-md: 0 6px 16px rgba(20, 36, 54, 0.08);
  --shadow-lg: 0 14px 32px rgba(20, 36, 54, 0.10);
  --shadow-focus: 0 0 0 3px rgba(61, 101, 134, 0.25);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.ts-display {
  font-family: var(--font-sans);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.ts-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.ts-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
}

.ts-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.ts-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.ts-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
}

.ts-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  color: var(--fg-2);
}

.ts-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
}

.ts-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.ts-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--fg-3);
  letter-spacing: var(--tracking-wide);
}

.ts-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* ============================================================
   BASE
   ============================================================ */

html { color-scheme: light; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--fg-link-hover); text-decoration: underline; text-underline-offset: 3px; }