/* Hallmark · tokens · theme: Cobalt（cool engineered paper · electric cobalt signal · Space Grotesk + Inter + JetBrains Mono）
 * 色・フォント・余白・角丸・時間はすべてここで定義し、style.css は名前で参照する */
:root {
  --color-paper:      oklch(98.5% 0.004 250);
  --color-paper-2:    oklch(96.5% 0.005 252);
  --color-paper-3:    oklch(94%   0.006 254);
  --color-rule:       oklch(91%   0.008 255);
  --color-rule-2:     oklch(83%   0.011 255);
  --color-muted:      oklch(53%   0.013 255);
  --color-neutral:    oklch(46%   0.015 255);
  --color-ink-2:      oklch(34%   0.018 257);
  --color-ink:        oklch(24%   0.020 258);
  --color-accent:     oklch(55%   0.20  256);
  --color-accent-2:   oklch(48%   0.19  258);
  --color-accent-ink: oklch(99%   0.004 256);
  --color-accent-wash: oklch(55% 0.20 256 / 0.08);
  --color-focus:      oklch(58%   0.20  256);
  --color-mark:       oklch(93%   0.08  95);
  --color-scrim:      oklch(15% 0.02 258 / 0.5);

  /* 判定ステータス */
  --color-ok:   oklch(52% 0.13 160);
  --color-warn: oklch(58% 0.14 70);
  --color-bad:  oklch(55% 0.19 27);
  --color-ok-wash:   oklch(52% 0.13 160 / 0.1);
  --color-warn-wash: oklch(58% 0.14 70 / 0.12);
  --color-bad-wash:  oklch(55% 0.19 27 / 0.1);

  /* エージェントの識別色（小さな点にだけ使う） */
  --color-cc: oklch(64% 0.15 42);
  --color-cx: oklch(60% 0.12 170);

  /* 暗いバンド・コード面（ライト/ダーク共通で暗い） */
  --color-graphite:   oklch(24% 0.018 260);
  --color-graphite-2: oklch(28% 0.018 260);
  --color-graphite-3: oklch(33% 0.018 260);
  --color-band:       oklch(20% 0.016 260);
  --color-on-dark:    oklch(93% 0.006 255);
  --color-on-dark-2:  oklch(74% 0.012 255);
  --color-on-dark-3:  oklch(66% 0.014 255);
  --color-accent-on-dark: oklch(72% 0.15 256);
  --tok-key:   oklch(76% 0.12 250);
  --tok-str:   oklch(85% 0.09 140);
  --tok-num:   oklch(84% 0.11 75);
  --tok-kw:    oklch(76% 0.14 310);
  --tok-table: oklch(78% 0.12 40);
  --tok-punct: oklch(60% 0.014 255);

  --font-display: "Space Grotesk", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-body:    "Inter", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base: 0.9375rem;
  --text-md:  1.0625rem;
  --text-lg:  1.25rem;
  --text-xl:  1.625rem;
  --text-2xl: 2.125rem;
  --text-display: clamp(2.1rem, 3.6vw + 0.9rem, 3.75rem);

  --tracking-display: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-label:   0.06em;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  --radius-input: 6px;
  --radius-card:  10px;
  --radius-chip:  4px;
  --shadow-card: 0 1px 2px oklch(24% 0.02 258 / 0.05);
  --shadow-pop:  0 24px 48px -16px oklch(20% 0.02 258 / 0.35);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  120ms;
  --dur-short: 200ms;

  --nav-h: 60px;
  color-scheme: light;
}

/* ダーク: 同じ Cobalt の配色を暗い紙に移したもの */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper: oklch(17% 0.012 258); --color-paper-2: oklch(20% 0.013 258); --color-paper-3: oklch(23% 0.014 258);
    --color-rule: oklch(29% 0.014 258); --color-rule-2: oklch(37% 0.015 258);
    --color-muted: oklch(66% 0.013 255); --color-neutral: oklch(72% 0.013 255);
    --color-ink-2: oklch(84% 0.009 255); --color-ink: oklch(95% 0.005 255);
    --color-accent: oklch(70% 0.16 256); --color-accent-2: oklch(76% 0.14 256); --color-accent-ink: oklch(17% 0.02 258);
    --color-accent-wash: oklch(70% 0.16 256 / 0.12); --color-focus: oklch(72% 0.16 256); --color-mark: oklch(40% 0.08 95);
    --color-ok: oklch(74% 0.13 160); --color-warn: oklch(80% 0.13 75); --color-bad: oklch(72% 0.16 27);
    --color-graphite: oklch(13% 0.012 260); --color-graphite-2: oklch(17% 0.013 260); --color-graphite-3: oklch(24% 0.014 260);
    --color-band: oklch(12% 0.012 260);
    --shadow-card: 0 0 0 1px oklch(100% 0 0 / 0.02);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-paper: oklch(17% 0.012 258); --color-paper-2: oklch(20% 0.013 258); --color-paper-3: oklch(23% 0.014 258);
  --color-rule: oklch(29% 0.014 258); --color-rule-2: oklch(37% 0.015 258);
  --color-muted: oklch(66% 0.013 255); --color-neutral: oklch(72% 0.013 255);
  --color-ink-2: oklch(84% 0.009 255); --color-ink: oklch(95% 0.005 255);
  --color-accent: oklch(70% 0.16 256); --color-accent-2: oklch(76% 0.14 256); --color-accent-ink: oklch(17% 0.02 258);
  --color-accent-wash: oklch(70% 0.16 256 / 0.12); --color-focus: oklch(72% 0.16 256); --color-mark: oklch(40% 0.08 95);
  --color-ok: oklch(74% 0.13 160); --color-warn: oklch(80% 0.13 75); --color-bad: oklch(72% 0.16 27);
  --color-graphite: oklch(13% 0.012 260); --color-graphite-2: oklch(17% 0.013 260); --color-graphite-3: oklch(24% 0.014 260);
  --color-band: oklch(12% 0.012 260);
  --shadow-card: 0 0 0 1px oklch(100% 0 0 / 0.02);
  color-scheme: dark;
}