/*
 * デザイントークン
 *
 * 方向性: 温かみのある紙の上に、時間で冷えていく計器を置く。
 *
 * 色は装飾ではなく状態そのものとして使う。いま自分が何倍かを、数字ではなく
 * ページ全体の温度で先に伝える。1.5倍は熱い赤、1.2倍は琥珀、1.0倍は冷えたスレート。
 * ユーザーが最初に受け取るのは「まだ間に合う / もう冷めた」という体温の情報。
 *
 * 既定は明るい面。LINEで共有されて昼間にスマホで開かれる道具なので、
 * 暗色を初期値にする理由がない。ただし夜に開く人のために暗色も用意する。
 */

:root {
  color-scheme: light dark;

  /* ---- 面 ---- */
  --paper: oklch(98.6% 0.006 85);
  --paper-sunk: oklch(96.2% 0.008 85);
  --surface: oklch(100% 0 0);
  --surface-raised: oklch(100% 0 0);
  --line: oklch(89% 0.008 85);
  --line-strong: oklch(80% 0.012 85);

  /* ---- 文字 ---- */
  --ink: oklch(22% 0.015 60);
  --ink-soft: oklch(45% 0.014 60);
  --ink-faint: oklch(62% 0.012 60);

  /* ---- 段階の色（倍率そのもの） ---- */
  --tier-1: oklch(58% 0.208 28);
  --tier-1-soft: oklch(94.5% 0.038 40);
  --tier-1-edge: oklch(82% 0.11 35);

  --tier-2: oklch(62% 0.148 62);
  --tier-2-soft: oklch(95.5% 0.042 80);
  --tier-2-edge: oklch(84% 0.1 72);

  --tier-3: oklch(48% 0.035 250);
  --tier-3-soft: oklch(95.5% 0.01 250);
  --tier-3-edge: oklch(85% 0.02 250);

  /* 段階0 = 締切後。色味を完全に抜いて、力を失った状態だと見た目で分かるようにする */
  --tier-0: oklch(52% 0 0);
  --tier-0-soft: oklch(94% 0 0);
  --tier-0-edge: oklch(84% 0 0);

  /* 現在の段階。JS が data-tier を書き換えると全部追従する */
  --tier: var(--tier-3);
  --tier-soft: var(--tier-3-soft);
  --tier-edge: var(--tier-3-edge);

  /* ---- ○▲× ---- */
  --maru: oklch(56% 0.135 155);
  --maru-soft: oklch(94% 0.05 155);
  --sankaku: oklch(64% 0.13 78);
  --sankaku-soft: oklch(95% 0.05 82);
  --batsu: oklch(55% 0.18 22);
  --batsu-soft: oklch(94.5% 0.045 25);

  /* ---- 文字サイズ ---- */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1.3vw, 2.125rem);
  /* 倍率表示。ここだけスケールを飛ばして主役だと分からせる */
  --text-hero: clamp(3.25rem, 2rem + 6.5vw, 5.5rem);

  --font-ui: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP",
    "Segoe UI", system-ui, sans-serif;
  /* 数字は等幅で。カウントダウンの桁が揺れると安っぽくなる */
  --font-num: ui-monospace, "SF Mono", "Menlo", monospace;

  /* ---- 余白 ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-section: clamp(2rem, 1.5rem + 3vw, 4rem);

  /* ---- 形 ---- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* 影は暖色寄りに。中性グレーの影は紙の上で濁って見える */
  --shadow-sm: 0 1px 2px oklch(40% 0.02 60 / 0.06),
               0 1px 1px oklch(40% 0.02 60 / 0.04);
  --shadow: 0 2px 4px oklch(40% 0.02 60 / 0.05),
            0 8px 20px -6px oklch(40% 0.02 60 / 0.1);
  --shadow-lg: 0 4px 8px oklch(40% 0.02 60 / 0.06),
               0 18px 40px -12px oklch(40% 0.02 60 / 0.16);

  /* ---- 動き ---- */
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 480ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --max-w: 46rem;
}

/*
 * 段階が変わったら、色の変数ごと差し替える。
 * :root だけでなく任意の要素に効かせる。こうしておくと、紹介ページのデモのように
 * 「ページ全体は落ち着かせたまま、一部だけ状態を移り変わらせる」が書ける。
 */
[data-tier="0"] {
  --tier: var(--tier-0);
  --tier-soft: var(--tier-0-soft);
  --tier-edge: var(--tier-0-edge);
}
[data-tier="1"] {
  --tier: var(--tier-1);
  --tier-soft: var(--tier-1-soft);
  --tier-edge: var(--tier-1-edge);
}
[data-tier="2"] {
  --tier: var(--tier-2);
  --tier-soft: var(--tier-2-soft);
  --tier-edge: var(--tier-2-edge);
}
[data-tier="3"] {
  --tier: var(--tier-3);
  --tier-soft: var(--tier-3-soft);
  --tier-edge: var(--tier-3-edge);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: oklch(17% 0.012 60);
    --paper-sunk: oklch(14% 0.012 60);
    --surface: oklch(21% 0.013 60);
    --surface-raised: oklch(24% 0.014 60);
    --line: oklch(30% 0.012 60);
    --line-strong: oklch(38% 0.014 60);

    --ink: oklch(94% 0.008 85);
    --ink-soft: oklch(74% 0.012 75);
    --ink-faint: oklch(58% 0.012 70);

    --tier-1: oklch(72% 0.18 32);
    --tier-1-soft: oklch(27% 0.06 32);
    --tier-1-edge: oklch(45% 0.11 32);

    --tier-2: oklch(78% 0.13 72);
    --tier-2-soft: oklch(27% 0.05 72);
    --tier-2-edge: oklch(46% 0.09 72);

    --tier-3: oklch(72% 0.03 250);
    --tier-3-soft: oklch(25% 0.015 250);
    --tier-3-edge: oklch(40% 0.02 250);

    --tier-0: oklch(62% 0 0);
    --tier-0-soft: oklch(24% 0 0);
    --tier-0-edge: oklch(38% 0 0);

    --maru: oklch(72% 0.13 155);
    --maru-soft: oklch(26% 0.05 155);
    --sankaku: oklch(78% 0.12 80);
    --sankaku-soft: oklch(27% 0.05 80);
    --batsu: oklch(70% 0.16 25);
    --batsu-soft: oklch(27% 0.05 25);

    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.3);
    --shadow: 0 2px 4px oklch(0% 0 0 / 0.3), 0 8px 20px -6px oklch(0% 0 0 / 0.45);
    --shadow-lg: 0 4px 8px oklch(0% 0 0 / 0.35), 0 18px 40px -12px oklch(0% 0 0 / 0.55);
  }
}

/* 閲覧者が明示的に切り替えたときは、OS設定より優先する */
:root[data-theme="light"] {
  color-scheme: light;
  --paper: oklch(98.6% 0.006 85);
  --paper-sunk: oklch(96.2% 0.008 85);
  --surface: oklch(100% 0 0);
  --surface-raised: oklch(100% 0 0);
  --line: oklch(89% 0.008 85);
  --line-strong: oklch(80% 0.012 85);
  --ink: oklch(22% 0.015 60);
  --ink-soft: oklch(45% 0.014 60);
  --ink-faint: oklch(62% 0.012 60);
  --tier-1: oklch(58% 0.208 28);
  --tier-1-soft: oklch(94.5% 0.038 40);
  --tier-1-edge: oklch(82% 0.11 35);
  --tier-2: oklch(62% 0.148 62);
  --tier-2-soft: oklch(95.5% 0.042 80);
  --tier-2-edge: oklch(84% 0.1 72);
  --tier-3: oklch(48% 0.035 250);
  --tier-3-soft: oklch(95.5% 0.01 250);
  --tier-3-edge: oklch(85% 0.02 250);
  --tier-0: oklch(52% 0 0);
  --tier-0-soft: oklch(94% 0 0);
  --tier-0-edge: oklch(84% 0 0);
  --maru: oklch(56% 0.135 155);
  --maru-soft: oklch(94% 0.05 155);
  --sankaku: oklch(64% 0.13 78);
  --sankaku-soft: oklch(95% 0.05 82);
  --batsu: oklch(55% 0.18 22);
  --batsu-soft: oklch(94.5% 0.045 25);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: oklch(17% 0.012 60);
  --paper-sunk: oklch(14% 0.012 60);
  --surface: oklch(21% 0.013 60);
  --surface-raised: oklch(24% 0.014 60);
  --line: oklch(30% 0.012 60);
  --line-strong: oklch(38% 0.014 60);
  --ink: oklch(94% 0.008 85);
  --ink-soft: oklch(74% 0.012 75);
  --ink-faint: oklch(58% 0.012 70);
  --tier-1: oklch(72% 0.18 32);
  --tier-1-soft: oklch(27% 0.06 32);
  --tier-1-edge: oklch(45% 0.11 32);
  --tier-2: oklch(78% 0.13 72);
  --tier-2-soft: oklch(27% 0.05 72);
  --tier-2-edge: oklch(46% 0.09 72);
  --tier-3: oklch(72% 0.03 250);
  --tier-3-soft: oklch(25% 0.015 250);
  --tier-3-edge: oklch(40% 0.02 250);
  --tier-0: oklch(62% 0 0);
  --tier-0-soft: oklch(24% 0 0);
  --tier-0-edge: oklch(38% 0 0);
  --maru: oklch(72% 0.13 155);
  --maru-soft: oklch(26% 0.05 155);
  --sankaku: oklch(78% 0.12 80);
  --sankaku-soft: oklch(27% 0.05 80);
  --batsu: oklch(70% 0.16 25);
  --batsu-soft: oklch(27% 0.05 25);
}