/* ============================================================
   アイテックシステム IT事業部 — Design Tokens
   Single source of truth. Everything else derives from here.
   ============================================================ */

:root {
  /* ── CI colours (unchanged, taken from the corporate mark) ──
     #E8390D  logo mark + "iTEC" wordmark
     #727172  "SYSTEM" wordmark
     #212529  corporate body text                              */
  --ci-vermilion: #e8390d;
  --ci-graphite: #727172;
  --ci-ink: #212529;

  /* Vermilion scale — derived from the CI mark, for states only.
     The pure CI value is the only one used at brand-mark size. */
  --vermilion-800: #8f2207;
  --vermilion-700: #b62b09;
  --vermilion-600: #cf3210;
  --vermilion-500: #e8390d; /* = --ci-vermilion */
  --vermilion-200: #f9bfb0;
  --vermilion-100: #fde7e0;
  --vermilion-050: #fef5f2;

  /* Graphite scale — the CI grey, extended into a working ramp */
  --graphite-700: #3f3f40;
  --graphite-600: #58585a;
  --graphite-500: #727172; /* = --ci-graphite */
  --graphite-300: #b0afb1;
  --graphite-100: #e4e3e4;

  /* ── Neutrals: cool "blueprint" ramp ──
     Deliberately cool, so the warm CI vermilion always reads as
     the single point of heat on the page.                      */
  --paper: #ffffff;
  --blueprint: #f1f2f4;
  --blueprint-deep: #e7e9ec;
  --rule: #dcdee2;
  --rule-strong: #b9bec6;
  --ink: #212529; /* = --ci-ink */
  --ink-2: #4a5057;
  --ink-3: #7a8087;
  --ink-4: #a4a9b0;
  --slate: #171a1e; /* dark section surface */
  --slate-2: #23272d;
  --on-slate: #ffffff;
  --on-slate-2: #b5bac1;

  /* ── Product identities (chips + product pages only) ──
     Never used for corporate chrome.                          */
  --wheelink: #22c55e;
  --napplink: #db2825;
  --tasklink: #1f3fb5;

  /* ── Semantic ── */
  --bg: var(--paper);
  --bg-alt: var(--blueprint);
  --fg: var(--ink);
  --fg-muted: var(--ink-3);
  --accent: var(--ci-vermilion);
  --accent-hover: var(--vermilion-600);
  --accent-active: var(--vermilion-700);
  --border: var(--rule);
  --focus: #0b57d0;
  --success: #1f8a4c;
  --warning: #a86400;
  --danger: #c8321c;

  /* ── Type ──
     Display + Latin body are the CI faces, kept as-is.
     Mono is the added utility layer: labels, indices, specs.   */
  --font-display: "M PLUS Rounded 1c", "Montserrat", -apple-system,
    "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body: "Montserrat", "Noto Sans JP", -apple-system,
    "Hiragino Kaku Gothic ProN", "Yu Gothic UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 800;

  /* Fluid scale. Ratio ≈1.28 at the small end, opening up at display sizes. */
  --fs-display: clamp(2.375rem, 5vw, 4.25rem);
  --fs-h1: clamp(1.875rem, 3.4vw, 2.75rem);
  --fs-h2: clamp(1.4375rem, 2.4vw, 2rem);
  --fs-h3: clamp(1.125rem, 1.5vw, 1.375rem);
  --fs-h4: 1.0625rem;
  --fs-lead: clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.6875rem; /* mono eyebrow */

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.75; /* generous — Japanese body copy needs it */
  --lh-ui: 1.45;

  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body: 0.01em;
  --ls-label: 0.18em; /* mono eyebrows */

  /* ── Space: 4px base ── */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 10rem;

  /* ── Layout ── */
  --content-max: 1200px;
  --measure: 34em; /* prose max width */
  --gutter: var(--s-5);
  --grid-cols: 12;

  /* The spine: the vertical rail that threads every section. */
  --spine-w: 4.5rem; /* reserved gutter, desktop */
  --spine-w-sm: 1.25rem; /* mobile */
  --spine-line: 1px;
  --node: 7px; /* square node — same geometry as the logo counters */

  /* ── Radius ──
     Structural elements stay square, matching the mark.
     Only interactive surfaces soften, and only slightly.       */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* ── Elevation — hairlines do the work; shadow is for overlays only ── */
  --shadow-1: 0 1px 2px rgba(23, 26, 30, 0.06);
  --shadow-2: 0 8px 24px -8px rgba(23, 26, 30, 0.18);

  /* ── Motion ── */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* ── Z ── */
  --z-header: 100;
  --z-overlay: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}