/*
 * デザイントークン。
 *
 * 方向: 部室の壁。木の名札掛けと、その横にテープで貼られた顔写真。
 * 札は全員共通の白木。幹事長は金・副幹事長は銀・会計は銅・卒業した人は黒。
 * 朱は「いま部室にいる」を示すためだけに使う（札の帯・写真の時刻・開室日の印）。飾りには使わない。
 */

:root {
  color-scheme: light dark;

  /* ---- 壁と板 ---- */
  --wall: oklch(95% 0.012 80);
  --wall-sunk: oklch(91.5% 0.016 78);
  --surface: oklch(99% 0.004 85);
  --wood: oklch(60% 0.075 62);
  --wood-grain: oklch(56% 0.078 58);
  --wood-edge: oklch(46% 0.07 52);

  /* ---- 札 ---- */
  /* 札は物なので、暗い画面でも表は白いまま。文字色も固定する */
  --plaque-face: oklch(98.5% 0.006 85);
  --plaque-ink: oklch(21% 0.012 60);
  --plaque-off: oklch(83% 0.035 72);
  --plaque-off-ink: oklch(43% 0.04 60);
  --gold: oklch(70% 0.12 82);
  --brass-hi: oklch(86% 0.09 90);
  --brass-lo: oklch(70% 0.11 78);
  --brass-ink: oklch(26% 0.04 70);

  /* ---- 役職の札の素材。札は物なので暗い画面でも同じ色 ---- */
  --copper-hi: oklch(82% 0.09 55);
  --copper-mid: oklch(66% 0.13 45);
  --copper-lo: oklch(50% 0.11 40);
  --copper-ink: oklch(24% 0.05 40);
  --silver-hi: oklch(97% 0.004 250);
  --silver-mid: oklch(83% 0.01 250);
  --silver-lo: oklch(66% 0.013 250);
  --silver-ink: oklch(24% 0.012 250);
  --gold-hi: oklch(95% 0.09 98);
  --gold-mid: oklch(82% 0.15 86);
  --gold-lo: oklch(63% 0.13 72);
  --gold-ink: oklch(28% 0.07 60);
  --lacquer: oklch(17% 0.012 30);
  --lacquer-sheen: oklch(32% 0.02 30);
  --lacquer-ink: oklch(82% 0.13 86);

  /* ---- 写真（白い台紙とマスキングテープ）---- */
  --mat: oklch(99% 0.004 85);
  --mat-blank: oklch(90% 0.025 75);
  --mat-blank-ink: oklch(55% 0.04 65);
  --tape: oklch(88% 0.06 85 / 0.72);
  --shadow-photo: 0 1px 2px oklch(30% 0.04 55 / 0.18), 0 12px 20px -12px oklch(30% 0.05 55 / 0.5);
  --scrim: oklch(18% 0.02 50 / 0.5);

  /* ---- 文字 ---- */
  --ink: oklch(21% 0.012 60);
  --ink-soft: oklch(40% 0.015 60);
  --ink-faint: oklch(50% 0.015 60);

  /* ---- 意味のある色 ---- */
  --shu: oklch(55% 0.19 32);
  --shu-ink: oklch(99% 0 0);
  --shu-wash: oklch(93% 0.035 35);

  /* ---- 線 ---- */
  --line: oklch(86% 0.015 72);
  --line-field: oklch(60% 0.02 65);
  --focus: oklch(55% 0.19 32);

  /* ---- 影（札が掛かっている／浮いている）---- */
  --shadow-hung: 0 1px 0 oklch(30% 0.05 50 / 0.18), 0 7px 12px -6px oklch(28% 0.06 50 / 0.55);
  --shadow-card: 0 1px 2px oklch(30% 0.03 60 / 0.08), 0 14px 32px -18px oklch(30% 0.05 55 / 0.35);

  /* ---- 書体 ---- */
  --font-ui: 'Zen Kaku Gothic New', 'Hiragino Sans', system-ui, sans-serif;
  --font-plaque: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: clamp(0.95rem, 0.92rem + 0.15vw, 1.03rem);
  --text-lg: 1.2rem;
  --text-count: clamp(4.5rem, 3rem + 8vw, 7.5rem);
  --text-name: clamp(1.9rem, 1.5rem + 1.6vw, 2.4rem);

  /* ---- 余白（均一にしない。見出しの前だけ大きく空ける）---- */
  --gutter: 16px;
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-section: clamp(2.5rem, 2rem + 3vw, 4rem);

  /* ---- 札の寸法 ---- */
  --plaque-w: 2.6rem;
  --plaque-h: 8.6rem;

  /* ---- 動き ---- */
  --duration-fast: 140ms;
  --duration-flip: 520ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --plaque-w: 2.9rem;
    --plaque-h: 9.4rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --wall: oklch(19% 0.012 60);
    --wall-sunk: oklch(16% 0.012 60);
    --surface: oklch(23% 0.014 60);
    --wood: oklch(34% 0.045 55);
    --wood-grain: oklch(31% 0.045 52);
    --wood-edge: oklch(25% 0.04 50);
    --plaque-face: oklch(94% 0.012 82);
    --plaque-off: oklch(40% 0.035 58);
    --plaque-off-ink: oklch(78% 0.03 72);
    --mat: oklch(92% 0.008 80);
    --mat-blank: oklch(36% 0.03 60);
    --mat-blank-ink: oklch(70% 0.04 70);
    --scrim: oklch(5% 0.01 50 / 0.65);
    --gold: oklch(76% 0.12 84);
    --ink: oklch(94% 0.01 80);
    --ink-soft: oklch(80% 0.012 75);
    --ink-faint: oklch(70% 0.012 70);
    --shu: oklch(66% 0.17 35);
    --shu-ink: oklch(16% 0.02 35);
    --shu-wash: oklch(30% 0.06 32);
    --line: oklch(31% 0.015 60);
    --line-field: oklch(56% 0.02 65);
    --focus: oklch(72% 0.15 40);
    --shadow-card: 0 1px 0 oklch(100% 0 0 / 0.04), 0 18px 36px -20px oklch(0% 0 0 / 0.7);
  }
}

:root[data-theme='dark'] {
  --wall: oklch(19% 0.012 60);
  --wall-sunk: oklch(16% 0.012 60);
  --surface: oklch(23% 0.014 60);
  --wood: oklch(34% 0.045 55);
  --wood-grain: oklch(31% 0.045 52);
  --wood-edge: oklch(25% 0.04 50);
  --plaque-face: oklch(94% 0.012 82);
  --plaque-off: oklch(40% 0.035 58);
  --plaque-off-ink: oklch(78% 0.03 72);
  --mat: oklch(92% 0.008 80);
  --mat-blank: oklch(36% 0.03 60);
  --mat-blank-ink: oklch(70% 0.04 70);
  --scrim: oklch(5% 0.01 50 / 0.65);
  --gold: oklch(76% 0.12 84);
  --ink: oklch(94% 0.01 80);
  --ink-soft: oklch(80% 0.012 75);
  --ink-faint: oklch(70% 0.012 70);
  --shu: oklch(66% 0.17 35);
  --shu-ink: oklch(16% 0.02 35);
  --shu-wash: oklch(30% 0.06 32);
  --line: oklch(31% 0.015 60);
  --line-field: oklch(56% 0.02 65);
  --focus: oklch(72% 0.15 40);
  --shadow-card: 0 1px 0 oklch(100% 0 0 / 0.04), 0 18px 36px -20px oklch(0% 0 0 / 0.7);
}