@charset "UTF-8";

/* ==========================================================================
   duoron — 共通デザイントークン
   サーバーサイドレンダリングの全画面（トップページ / 認証系 / エラー）で共有する。
   ブランドカラーはロゴの D マークのグラデーション（cyan #34a4ca → green #45b78a）
   から採取。文字・塗りボタンに使う濃色は白背景に対してコントラスト比 4.5:1 以上。

   このファイルはカスタムプロパティの定義のみを持ち、要素セレクタを一切含まない。
   （React 側の SPA に読み込まれても影響が出ないようにするため）
   ========================================================================== */
:root {
  /* brand */
  --brand-cyan: #34a4ca;
  --brand-green: #45b78a;
  --brand-grad: linear-gradient(135deg, #34a4ca 0%, #45b78a 100%);

  /* 濃色（白背景に対して 4.5:1 以上。テキスト・塗りボタンはこちらを使う） */
  --brand-700: #0a7a5c;
  --brand-800: #075f48;
  --cta-grad: linear-gradient(135deg, #0c8768 0%, #0a7f86 100%);
  --cta-grad-hover: linear-gradient(135deg, #0a7a5c 0%, #096f75 100%);

  /* 淡色（背景・装飾用） */
  --brand-50: #f0fbf8;
  --brand-100: #d9f3ec;
  --brand-200: #b4e7db;

  /* neutral */
  --ink: #0f172a;
  --ink-2: #1e293b;
  --body: #475569;
  --muted: #64748b;
  --line: #e2e8f0;
  --line-soft: #eef2f6;
  --surface: #f7fafb;
  --white: #ffffff;

  /* status */
  --danger: #dc2626;
  --danger-line: #fecaca;
  --danger-bg: #fef2f2;

  /* shape */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
  --sh: 0 2px 4px rgba(15, 23, 42, 0.04), 0 12px 24px -10px rgba(15, 23, 42, 0.12);
  --sh-lg: 0 8px 16px -8px rgba(15, 23, 42, 0.1),
    0 32px 64px -24px rgba(15, 23, 42, 0.22);

  --shell: 1280px;
  --header-h: 68px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Noto Sans JP", Meiryo, sans-serif;
  --font-display: "Oswald", var(--font-sans);
}