/* Hallmark · genre: modern-minimal · macrostructure: Workbench · theme: Keeper Teal
 * tone: quiet and trustworthy · anchor hue: 198 (teal) · enrichment: semantic product workbench
 * nav: N9 edge-aligned minimal · footer: Ft5 statement
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 * slop: pass (1–58) · contrast: pass (40–41) · mobile: unchanged / prior pass (34, 49, 50–57)
 *
 * 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 {
  /* 面 — Keeper Tealの色相をわずかに含ませた寒色系ニュートラル。純白・純黒は使わない */
  --color-paper: oklch(97% 0.008 198);
  --color-paper-2: oklch(94.5% 0.01 198);
  --color-paper-3: oklch(91.5% 0.012 198);
  --color-rule: oklch(86% 0.012 198);
  /* ボタンと入力欄の輪郭はこの線だけで示すので、面に対して 3:1 以上が要る
   * (76% では 2.03:1 で WCAG 1.4.11 を満たさなかった) */
  --color-rule-strong: oklch(61% 0.015 198);
  /* neutral は 12〜13px の二次テキストに使うので paper に対して 4.5:1 以上を確保する
   * (60% では 3.72:1 で WCAG 1.4.3 を満たさなかった) */
  --color-neutral: oklch(51% 0.014 205);
  --color-muted: oklch(44% 0.016 205);
  --color-ink: oklch(20% 0.017 205);
  --color-shadow: oklch(18% 0.02 205 / 0.3);

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

  /* 状態色。色だけに意味を持たせず、必ず文言か形と併用する */
  --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-section: clamp(1.75rem, 8vw, 2.4375rem);
  --text-hero: clamp(1.55rem, 3.55vw, 3.1rem);
  --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;
  --dur-reduced: 100ms;

  /* 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.014 205);
    --color-paper-2: oklch(19.5% 0.015 205);
    --color-paper-3: oklch(23% 0.017 205);
    --color-rule: oklch(31% 0.015 205);
    --color-rule-strong: oklch(52% 0.018 205);
    --color-neutral: oklch(60% 0.015 205);
    --color-muted: oklch(74% 0.012 205);
    --color-ink: oklch(94% 0.008 198);
    --color-shadow: oklch(3% 0.01 205 / 0.55);

    --color-accent: oklch(75% 0.095 198);
    --color-accent-soft: oklch(29% 0.04 198);
    --color-focus: oklch(79% 0.095 198);

    --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);
  }
}