/* sofuca design tokens — shared by design-system.html and index.html */
:root{
  /* Brand */
  --brand-50:#F1FBE0; --brand-100:#DDF5B5; --brand-200:#C2EC85;
  --brand-300:#A0DF52; --brand-400:#7BD028; --brand-500:#53BC00;
  --brand-600:#449C00; --brand-700:#357C00; --brand-800:#285E00; --brand-900:#1B4100;

  /* Neutral */
  --neutral-0:#FFFFFF; --neutral-50:#FAFAF7; --neutral-100:#F5F5F2;
  --neutral-150:#F0F0EC; --neutral-200:#E8E8E5; --neutral-250:#E0E0DA;
  --neutral-300:#DDDDDD; --neutral-400:#BBBBBB; --neutral-500:#888888;
  --neutral-600:#666666; --neutral-700:#555555; --neutral-800:#333333; --neutral-900:#1A1A1A;

  /* Accent gradient pairs */
  --accent-coral-200:#FFE5D6; --accent-coral-500:#FFB893;
  --accent-pink-200:#FFD9E5;  --accent-pink-500:#FF9DBC;
  --accent-sky-200:#D9F0FF;   --accent-sky-500:#9DC8FF;
  --accent-amber-200:#FFD89E; --accent-amber-500:#FF9D5C;

  /* Semantic */
  --bg:var(--neutral-0); --bg-alt:var(--neutral-100); --bg-inverse:var(--neutral-900);
  --text:var(--neutral-900); --text-secondary:var(--neutral-600);
  --text-muted:var(--neutral-500); --text-inverse:var(--neutral-0);
  --border:var(--neutral-200); --border-strong:var(--neutral-300);
  --primary:var(--brand-500); --primary-hover:var(--brand-600);
  --primary-soft:var(--brand-50);

  /* Type */
  --font-sans:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --text-xs:11px; --text-sm:12px; --text-base:13px; --text-md:14px;
  --text-lg:16px; --text-xl:18px; --text-2xl:22px; --text-3xl:28px;
  --text-4xl:32px; --text-5xl:42px;
  --leading-tight:1.3; --leading-snug:1.5; --leading-normal:1.7;
  --leading-relaxed:1.95; --leading-loose:2.0;
  --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.04em;
  --tracking-wider:0.06em; --tracking-widest:0.16em; --tracking-eyebrow:0.18em;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  /* Spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:28px; --space-8:32px;
  --space-10:40px; --space-12:48px; --space-14:56px; --space-16:64px; --space-20:80px;

  /* Radius */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px;
  --radius-lg:12px; --radius-xl:20px; --radius-pill:9999px;

  /* Shadow */
  --shadow-xs:0 1px 2px rgba(26,26,26,.04);
  --shadow-sm:0 1px 3px rgba(26,26,26,.06),0 1px 2px rgba(26,26,26,.04);
  --shadow-md:0 4px 12px rgba(26,26,26,.08),0 2px 4px rgba(26,26,26,.04);
  --shadow-lg:0 12px 32px rgba(26,26,26,.10),0 4px 8px rgba(26,26,26,.04);
  --shadow-focus:0 0 0 3px rgba(45,206,122,.25);

  /* Motion */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --duration-fast:120ms; --duration-normal:200ms; --duration-slow:300ms;

  /* Layout */
  --container:1080px; --container-narrow:880px;
}