/* ============================================================
   Pragmateches Design System — Tokens
   ============================================================
   Light, professional, print-edged. Japanese-first.
   Anchored on #AD0021 (pragmateches crimson) and #263B53 (navy).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Shippori+Mincho:wght@500;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Brand ────────────────────────────────────── */
  --brand-crimson: #AD0021;        /* primary accent — used in seals, KPIs, focus */
  --brand-crimson-strong: #8a001a; /* hover / pressed */
  --brand-crimson-soft: rgba(173, 0, 33, 0.08); /* tints, selected rows */
  --brand-crimson-tint: rgba(173, 0, 33, 0.12);
  --brand-navy: #263B53;           /* secondary — print/editorial accent */
  --brand-navy-soft: rgba(38, 59, 83, 0.08);
  --brand-ink: #0e0f17;            /* near-black ink */

  /* Aliased for semantics */
  --accent: var(--brand-crimson);
  --accent-strong: var(--brand-crimson-strong);
  --accent-soft: var(--brand-crimson-soft);
  --accent-bg: var(--brand-crimson-tint);
  --accent-navy: var(--brand-navy);

  /* ── Surface ramp ─────────────────────────────── */
  --bg-0: #f4f4f8;          /* canvas */
  --bg-1: #fafafc;          /* subtle elevation, hover surface */
  --bg-2: #ffffff;          /* cards, sheets */
  --bg-3: #f0f0f5;          /* inset (inputs, code, chips) */
  --bg-hover: #ededf2;      /* hover over cards/rows */
  --bg-ink: #0e0f17;        /* inverse — print-style ink block */

  /* Aliases */
  --bg: var(--bg-0);
  --surface: var(--bg-2);
  --surface-hover: var(--bg-1);

  /* ── Text ramp ────────────────────────────────── */
  --text-0: #0e0f17;        /* highest emphasis, headings */
  --text-1: #1a1a2e;        /* body primary */
  --text-2: #5c5c72;        /* secondary / labels */
  --text-3: #9898ac;        /* tertiary / muted / placeholder */
  --text-4: #bcbccc;        /* disabled */
  --text-inverse: #ffffff;

  /* Aliases */
  --text: var(--text-1);
  --text-dim: var(--text-2);
  --text-muted: var(--text-3);

  /* ── Borders ──────────────────────────────────── */
  --border: #d8d8e2;        /* default — visible hairline */
  --border-strong: #b8b8c8; /* emphasized */
  --border-subtle: #eaeaf0; /* dividers, low-emphasis */
  --border-ink: #0e0f17;    /* print-style 1px ink line */

  /* ── Semantic ─────────────────────────────────── */
  --success: #1a9e4a;
  --success-bg: rgba(26, 158, 74, 0.10);
  --warning: #c98a08;
  --warning-bg: rgba(201, 138, 8, 0.10);
  --danger:  #c81d1d;       /* slightly cooler than crimson to distinguish */
  --danger-bg: rgba(200, 29, 29, 0.10);
  --info:    #2e7dd6;
  --info-bg: rgba(46, 125, 214, 0.10);

  /* ── Pipeline stage (kanban column heads ONLY) ── */
  /* These colors are scoped to the kanban board. Everywhere else
     (table chips, panel headers, etc.) use neutral --text-2 chips
     with text labels. Do NOT use stage colors as general-purpose
     semantic colors — that's what --success/--warning/--danger are for. */
  --stage-s0: #5b5fc7;      /* prospect / 接触 */
  --stage-s1: #2e7dd6;      /* qualifying */
  --stage-s2: #c98a08;      /* proposed */
  --stage-s3: #d06410;      /* committed */
  --stage-s4: #1a9e4a;      /* won */
  --stage-sx: #7a8599;      /* lost / dropped */

  /* ── P&L — neutral-first ────────────────────── */
  /* Revenue and Cost use text colors, NOT dedicated hues.
     Only profit/loss carries semantic color (green/red). */
  --revenue: var(--text-0);          /* ink black — the primary number */
  --cost: var(--text-2);             /* dimmed */
  --profit: var(--success);          /* alias → green when positive */
  --profit-negative: var(--danger);  /* red when negative */

  /* ── Type — families ──────────────────────────── */
  --font-sans: 'Hanken Grotesk', 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont,
               'Hiragino Sans', 'Yu Gothic UI', 'Meiryo UI', sans-serif;
  --font-serif: 'Shippori Mincho', 'Hiragino Mincho Pro', 'Yu Mincho', serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ── Type — scale (compact, dashboard-tuned) ──── */
  --fs-nano:    9px;   /* tiny chip text */
  --fs-micro:  10px;   /* table headers, uppercase labels */
  --fs-xs:     11px;   /* small UI text, tabs */
  --fs-sm:     12px;   /* body small, dense tables */
  --fs-body:   13px;   /* default UI body */
  --fs-md:     14px;   /* section titles */
  --fs-h2:     18px;   /* card titles */
  --fs-h1:     24px;   /* page headings */
  --fs-display: 32px;  /* KPI numbers */
  --fs-hero:   48px;   /* hero KPI */

  /* ── Type — weights ───────────────────────────── */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ── Type — tracking ──────────────────────────── */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-label:   0.04em;
  --tracking-caps:    0.08em;
  --tracking-stamp:   0.18em; /* "stamp"-style hero labels */

  /* ── Spacing (loose 4px rhythm, not rigid) ────── */
  --space-1:  4px;
  --space-2:  6px;
  --space-3:  8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 24px;
  --space-10: 32px;

  /* ── Radius (print-edged — minimal rounding) ──── */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius:      6px;        /* default — cards, buttons */
  --radius-md:   8px;
  --radius-lg:  10px;
  --radius-pill: 999px;

  /* ── Shadow — used sparingly ──────────────────── */
  --shadow-hairline: 0 0 0 1px var(--border);
  --shadow-sm:    0 1px 2px rgba(14, 15, 23, 0.04);
  --shadow:       0 1px 3px rgba(14, 15, 23, 0.06), 0 1px 2px rgba(14, 15, 23, 0.04);
  --shadow-md:    0 2px 6px rgba(14, 15, 23, 0.07), 0 1px 2px rgba(14, 15, 23, 0.04);
  --shadow-lg:    0 4px 12px rgba(14, 15, 23, 0.08);
  --glow-accent:  0 0 0 2px rgba(173, 0, 33, 0.18);

  /* ── Motion ───────────────────────────────────── */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  --easing:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ───────────────────────────────────── */
  --header-h: 52px;
  --panel-w:  420px;

  /* Editorial / print-rule hairline */
  --rule: 1px solid var(--text-0);
  --rule-soft: 1px solid var(--border);
  --rule-thick: 2px solid var(--text-0);
}

/* ============================================================
   Semantic type utilities
   ============================================================ */

.type-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
  color: var(--text-0);
}

.type-hero {
  font-family: var(--font-mono);
  font-size: var(--fs-hero);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.type-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-0);
}

.type-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--text-0);
}

.type-section {
  /* Print-style uppercase section header — the signature gesture */
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-2);
}

.type-stamp {
  /* Stamp-style headline — wider tracking, 「実」 brand voice */
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--accent);
}

.type-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.55;
  color: var(--text-1);
}

.type-small {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--text-2);
}

.type-label {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-2);
}

.type-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}

.type-num {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  color: var(--text-0);
}

.type-jp-serif {
  /* For editorial/marketing — the「実」brand voice in long form */
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  line-height: 1.7;
  color: var(--text-0);
}