/* iine design tokens — claude.ai/design「iine Design System」から移植（すき=v2方向）
   青→温かい金の光。言葉は「すき」。客画面に数字は出さない（数は店主のもの）。 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@500;700;900&display=swap");

:root {
  /* — Brand blue（参考・現状は未使用） — */
  --blue-500: #1f43ff;
  --blue-soft: rgba(31, 67, 255, 0.18);

  /* — Warm gold（「すき」の光＝デススト的な"いいね"の光） — */
  --gold-500: #e3a21e;   /* the light */
  --gold-600: #c6881a;   /* hover / 白地の数字 */
  --gold-700: #a56f14;   /* pressed */
  --gold-tint: #fbf3dd;
  --gold-soft: rgba(227, 162, 30, 0.42);

  /* — Neutrals — */
  --grey-50:  #f4f5f7;
  --white:    #ffffff;
  --grey-200: #e4e6ea;
  --grey-500: #8b8d96;
  --grey-800: #3a3b42;
  --ink:      #1c1d22;

  /* — Type — */
  --font-jp:    "Noto Sans JP", system-ui, sans-serif;
  --font-latin: "Inter", system-ui, sans-serif;
  --weight-medium: 500;
  --weight-bold:   700;
  --weight-black:  900;
  --text-display: clamp(26px, 7vw, 34px);
  --num-hero:   clamp(72px, 24vw, 108px);
  --tracking-label: 0.08em;

  /* — Space / radii — */
  --space-3: 14px;
  --space-5: 28px;
  --space-6: 40px;
  --space-8: 64px;
  --radius-pill: 999px;

  /* — Motion — */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-float: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   0.12s;
  --dur-pop:    0.45s;
  --dur-float:  1.9s;

  /* — Semantic（既定=blue。.theme-suki が金へ上書き） — */
  --color-accent:    var(--blue-500);
  --surface-card:    var(--white);
  --accent-soft:     var(--blue-soft);
  --text-on-accent:  var(--white);
  --count-color:     var(--blue-500);
  --glow-dot:    0 0 14px 2px var(--accent-soft);
  --glow-button: 0 18px 40px -12px rgba(31, 67, 255, 0.55);
  --glow-soft:   0 8px 24px -10px rgba(31, 67, 255, 0.35);
  --shadow-card: 0 1px 2px rgba(28, 29, 34, 0.04), 0 8px 24px -16px rgba(28, 29, 34, 0.18);
}

/* 「すき」テーマ：青を金に置き換える。要素側の変更は不要。 */
.theme-suki {
  --color-accent:  var(--gold-500);
  --accent-soft:   var(--gold-soft);
  --count-color:   var(--gold-600);
  --glow-dot:    0 0 16px 3px var(--gold-soft);
  --glow-button: 0 0 60px -6px var(--gold-soft), 0 18px 44px -14px rgba(166, 111, 20, 0.40);
  --glow-soft:   0 8px 28px -10px var(--gold-soft);
}