/* Hallmark · genre: modern-minimal · macrostructure: Map / Diagram · theme: Cobalt
 * tone: technical · anchor hue: 258 (cool) · enrichment: hand-built SVG system map (Tier B)
 * nav: N5 floating pill · footer: Ft2 inline single line
 * pre-emit critique: P5 H4 E4 S5 R5 V4
 *
 * eunoos の設計トークン。色とフォントはすべてここで名前を付け、
 * 他の CSS からは var() 経由でのみ参照する(値の直書き禁止)。
 */

/* --- 自前ホストの可変フォント -------------------------------------------
 * Space Grotesk / IBM Plex Sans はいずれも SIL OFL 1.1(public/fonts/LICENSE.md)。
 * 日本語などラテン以外のグリフはこのサブセットに含まれないため、
 * font-family のフォールバックで各 OS の和文フォントへ落とす。
 */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* 面 — アンカー色相 258 をわずかに含ませた寒色系ニュートラル。純白・純黒は使わない */
  --color-paper: oklch(98% 0.004 258);
  --color-paper-2: oklch(95.5% 0.006 258);
  --color-paper-3: oklch(92.5% 0.008 258);
  --color-rule: oklch(87% 0.009 258);
  /* ボタンと入力欄の輪郭はこの線だけで示すので、面に対して 3:1 以上が要る
   * (76% では 2.03:1 で WCAG 1.4.11 を満たさなかった) */
  --color-rule-strong: oklch(62% 0.011 258);
  /* neutral は 12〜13px の二次テキストに使うので paper に対して 4.5:1 以上を確保する
   * (60% では 3.72:1 で WCAG 1.4.3 を満たさなかった) */
  --color-neutral: oklch(52% 0.012 258);
  --color-muted: oklch(45% 0.014 258);
  --color-ink: oklch(21% 0.016 258);

  /* アクセントは 1 色。リンク・フォーカス・現在地・図の有効な辺にだけ使う */
  --color-accent: oklch(52% 0.19 258);
  --color-accent-soft: oklch(93% 0.04 258);
  --color-focus: oklch(52% 0.19 258);

  /* 状態色。色だけに意味を持たせず、必ず文言か形と併用する */
  --color-positive: oklch(48% 0.11 165);
  --color-caution: oklch(52% 0.15 55);
  --color-danger: oklch(51% 0.17 25);
  --color-danger-soft: oklch(94% 0.03 25);

  /* 書体。ラテン以外は各 OS の和文フォントへフォールバックする */
  --font-display: 'Space Grotesk', 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif;
  --font-body: 'IBM Plex Sans', 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif;

  /* 音階 1.25(長三度)。1 ページで使うサイズは 5 段まで */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-md: 1.1875rem;
  --text-lg: 1.5rem;
  --text-xl: 1.9375rem;
  --text-2xl: 2.4375rem;
  --text-display: clamp(2.5rem, 4.4vw + 1rem, 4.5rem);
  --text-display-s: clamp(2rem, 3vw + 1rem, 3.25rem);

  /* 4pt スケール */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* 定規で引いた線。Cobalt は細いが見える線 */
  --rule-hair: 1px;
  --rule-thick: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-pill: 999px;

  --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-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  /* z の段階。任意の大きな値は使わない */
  --z-base: 1;
  --z-raised: 10;
  --z-nav: 20;
  --z-overlay: 30;
  --z-toast: 40;

  --measure: 65ch;
  --page-gutter: clamp(1rem, 4vw, 2rem);
  --page-max: 76rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 面を暗くしても色相は動かさない。上位の面ほど「明るく」する */
    --color-paper: oklch(16% 0.012 258);
    --color-paper-2: oklch(19.5% 0.014 258);
    --color-paper-3: oklch(23% 0.016 258);
    --color-rule: oklch(31% 0.014 258);
    --color-rule-strong: oklch(52% 0.016 258);
    --color-neutral: oklch(60% 0.014 258);
    --color-muted: oklch(74% 0.012 258);
    --color-ink: oklch(94% 0.008 258);

    --color-accent: oklch(74% 0.15 258);
    --color-accent-soft: oklch(30% 0.06 258);
    --color-focus: oklch(78% 0.15 258);

    --color-positive: oklch(76% 0.12 165);
    --color-caution: oklch(78% 0.13 55);
    --color-danger: oklch(72% 0.14 25);
    --color-danger-soft: oklch(28% 0.05 25);
  }
}