/* KNK WebEditor 管理画面：デザインの値（色・余白・角丸・影・動き）
   重なりの順番をここで決める。後ろほど強い。サイトごとの調整は site に書く。
   使い方と決まりごとは docs/ui.md */
@layer tokens, base, components, layout, pages, modules, site;

@layer tokens {
  :root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-2: #f8f9fb;
    --text: #1b2026;
    --muted: #66707a;
    --faint: #98a1ab;
    --border: #e4e7eb;
    --field-bg: #fcfcfd;         /* 入力欄：枠を濃く、背景をカードと少し変えて「ここに入力する」と分かるように（2026-10-16 YoKa） */
    --field-border: #b9c1cb;
    --field-border-hover: #98a1ab;
    --accent: #2458d6;
    --accent-hover: #1c47b0;
    --accent-soft: #eaf0fd;
    --on-accent: #ffffff;
    --danger: #c53030;
    --danger-fg: #ffffff;        /* 赤の塗りの上の文字 */
    --knob: #ffffff;             /* スイッチのつまみ（両モードで白） */
    --hero-fg: #ffffff;          /* 青のグラデーションの上の文字（両モード） */
    --toast-bg: #1b2026;         /* トースト：明るい画面では濃く、暗い画面では明るく（背景に溶けない） */
    --toast-fg: #ffffff;
    --toast-ok: #35b46e;
    --toast-warn: #e0892e;
    --danger-soft: #fdecec;
    --success: #1f7a45;
    --success-soft: #e7f5ec;
    --warning: #9a6200;
    --warning-soft: #fdf3e1;
    --scrim: rgba(10, 14, 20, .38);

    --radius-s: 10px;
    --radius: 14px;
    --radius-l: 20px;
    --shadow: 0 1px 2px rgba(20, 30, 40, .05), 0 2px 8px rgba(20, 30, 40, .04);
    --shadow-l: 0 12px 32px rgba(20, 30, 40, .14), 0 2px 6px rgba(20, 30, 40, .06);
    --hero: linear-gradient(135deg, #2458d6 0%, #3b6ef0 55%, #5b86f5 100%);
    --hero-shadow: 0 10px 24px rgba(36, 88, 214, .28);
    /* QR コードはダークモードでも白地に黒（反転すると読めないアプリがある） */
    --qr-bg: #ffffff;
    --qr-fg: #000000;

    --font: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
    --mono: ui-monospace, "SFMono-Regular", Consolas, "Courier New", monospace;
    --ease: cubic-bezier(.2, .8, .2, 1);

    --topbar-h: 56px;
    --editbar-h: 59px;
    --side-w: 248px;
    --content-w: 960px;
    color-scheme: light;
  }
  /* 広い画面では本文の幅も広げる（記事の編集・一覧・設定の2列）。左の列の幅は変えない */
  @media (min-width: 1280px) { :root { --content-w: 1120px; } }
  @media (min-width: 1600px) { :root { --content-w: 1240px; } }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #111418;
      --surface: #1a1e23;
      --surface-2: #20252b;
      --text: #e7eaee;
      --muted: #9aa3ad;
      --faint: #6f7883;
      --border: #2a3038;
      --field-bg: #12161a;
      --field-border: #434c57;
      --field-border-hover: #5a6470;
      --accent: #6b95f2;
      --accent-hover: #86a9f5;
      --accent-soft: #1f2a42;
      --on-accent: #0d1320;
      --danger: #f07b7b;
      --danger-fg: #111418;
      --danger-soft: #3a1f22;
      --toast-bg: #e7eaee;
      --toast-fg: #111418;
      --success: #5cc38a;
      --success-soft: #1b3326;
      --warning: #e0b050;
      --warning-soft: #3a2f18;
      --scrim: rgba(0, 0, 0, .55);
      --shadow: none;
      --shadow-l: 0 12px 32px rgba(0, 0, 0, .5);
      --hero-shadow: 0 10px 24px rgba(0, 0, 0, .4);
      color-scheme: dark;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --ease: linear; }
  }
}