/* ==========================================================================
   Prism download site — design tokens
   ==========================================================================
   出所 (0から作っていない):
     色      = Prism 製品本体の既定テーマ graphite の実値。
               /Users/kimuratakezou/Prism/src/renderer/styles.css
               [data-theme='graphite'] ブロック + :root の stroke/shadow/radius をそのまま採用。
               → サイトとアプリが同じ面・同じ階調で並ぶ (地続きに見せるため)。
     骨格CSS = Sendy ダウンロードサイト (tkimurabusiness-debug.github.io/sendy-download)
               の実 CSS を下敷きに、ヘッダーとヒーローの構造だけ流用して積み直した。
   意図的に引き継がなかったもの (「新しいサイトの方」= 見た目のコピーではない):
     ・青紫グラデーション (--acc: linear-gradient(#3b6dff, #8b5cf6)) は全廃。
       graphite は無彩テーマなので、有彩アクセントを1滴も入れない。
     ・radius 18px / 999px のピル多用 → アプリの radius (6/8/10/14px) に戻す。
     ・スクロールでピルに収縮する liquid-glass ヘッダー → アプリのトップバーと同じ
       「全幅・ヘアライン1本」の静的ヘッダーに変更。
   生値の直書きは禁止。ページ CSS はここの var() だけを参照する。
   ========================================================================== */
:root {
  color-scheme: dark;

  /* --- 面 (graphite の実値) --- */
  --bg: #1e1e1e;
  --frame: #1c1c1c;
  --panel-0: #1a1a1a;
  --panel-1: #202020;
  --panel-2: #242424;
  --panel-3: #292929;
  --panel-4: #2f2f2f;
  --topbar-tint: #1e1e1e;

  /* --- 文字 --- */
  --text: #e7eaf0;
  --text-strong: #f5f7fa;
  --muted: #a2a7b2;
  --muted-2: #6f747f;

  /* --- アクセント (graphite = 無彩) --- */
  --accent: #f5f7fa;
  --accent-soft: rgba(245, 247, 250, 0.08);
  --accent-border: rgba(245, 247, 250, 0.22);
  --button-primary-bg: #f5f7fa;
  --button-primary-bg-hover: #ffffff; /* アプリの primary は hover で 1 段明るくなる。その1段だけサイト側で定義 */
  --button-primary-text: #080808;
  /* graphite のリンク色 (青みを残した淡いスレート。本文と区別が付く唯一の色) */
  --link: #a8bdd6;

  /* --- 罫 --- */
  --stroke-faint: rgba(255, 255, 255, 0.035);
  --stroke: rgba(255, 255, 255, 0.06);
  --stroke-strong: rgba(255, 255, 255, 0.1);
  --stroke-bright: rgba(255, 255, 255, 0.18);

  /* --- 影 --- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 34px 80px rgba(0, 0, 0, 0.55);

  /* --- 角 (アプリと同値。18px 以上は使わない) --- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* --- 書体 (アプリの font-family トークンから。Inter は外した) --- */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --font-display:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* --- 文字サイズ (見出しと本文の差を4倍に取る) --- */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-display: clamp(30px, 5.4vw, 60px);

  /* --- 余白 (4pt) --- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;
  --space-4xl: 104px;

  /* --- 動き --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-mid: 260ms;
  --dur-slow: 620ms;

  /* --- 版面 --- */
  --header-h: 56px;
  --maxw: 1180px;
  --measure: 40em;
}