/* =========================================================
   Otokara Events — Design Tokens (mock v0.2)
   Type matches the live LP's computed styles (otokara.jp, checked
   2026-10-12): font-family "Inter", sans-serif for headings, body,
   CTAs and numbers. Weights: body 600 (#555); everything heavier is 700
   (LP uses 800/900 for headings and header CTA; capped at 700 on request).
   Japanese glyphs fall back to the device's sans-serif.
   Flat surfaces: no decorative shadows, no gradients, no pale text.
   Single light theme by choice (the brand is white-based).
   ========================================================= */
:root {
  color-scheme: light;

  /* ---- Color ---- */
  --c-bg: #ffffff;
  --c-ink: #222222;          /* primary text / headings, 15.9:1 */
  --c-ink-2: #555555;        /* body copy as on the LP (rgb 85,85,85), 7.5:1 — lightest text color allowed */
  --c-surface: #f4f4f4;      /* neutral fill for grouped content */
  --c-surface-2: #e9e9e9;    /* pressed / hover fill */
  --c-line: #e2e2e2;         /* hairline dividers */
  --c-line-2: #c9c9c9;       /* control borders */
  --c-brand: #e73b88;        /* key color (unified): indicators, active states, CTA fills, brand text */
  --c-brand-ink: #e73b88;    /* same key color; white on it is 3.9:1, so CTA labels stay 16px+ bold */
  --c-brand-hover: #d02c76;  /* pressed / hover on the key color */
  --c-brand-tint: #fdebf3;   /* selected chip / booked fill, tint of the key color */
  --c-ok: #0e7a55;           /* 受付中 */
  --c-warn: #e73b88;         /* 残りわずか = the key color (old red-brown #a8420f retired) */
  --c-danger: #e73b88;       /* destructive / error = the key color (old red #b42335 retired) */
  --c-white: #ffffff;
  --c-scrim: rgba(0, 0, 0, .56);
  --c-photo-scrim: rgba(0, 0, 0, .45);
  /* Legacy avatar fills (avatars now use a photo or a grey silhouette) */
  --c-av-0: #e73b88;
  --c-av-1: #d02c76;
  --c-av-2: #2d6a8a;
  --c-av-3: #4f6b2a;
  --c-av-4: #8a5a24;
  --c-av-5: #5f4a8b;
  --c-av-6: #3d3d3d;

  /* ---- Type (LP stack) ---- */
  --f-sans: "Inter", sans-serif;
  --w-body: 600;   /* LP body */
  --w-bold: 700;   /* LP emphasis, hero CTA, prices */
  --w-xbold: 700;  /* LP header CTA, HOW IT WORKS copy (LP 800; capped at 700 on request) */
  --w-black: 700;  /* headings (LP H1–H3 900; capped at 700 on request) */

  --t-xs: .75rem;     /* 12 labels */
  --t-sm: .8125rem;   /* 13 meta */
  --t-md: .9375rem;   /* 15 secondary body */
  --t-base: 1rem;     /* 16 body */
  --t-lg: 1.125rem;   /* 18 card title */
  --t-xl: 1.375rem;   /* 22 section title */
  --t-2xl: 1.75rem;   /* 28 page title */
  --lh-tight: 1.3;
  --lh-body: 1.7;

  /* ---- Space (4px grid) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --gutter: 20px;

  /* ---- Radius ---- */
  --r-xs: 6px;    /* draft/placeholder labels */
  --r-sm: 8px;    /* inputs, small thumbnails */
  --r-md: 12px;   /* cards, photos */
  --r-lg: 16px;   /* sheets, hero photo */
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --d-fast: 140ms; --d-med: 240ms; --d-slow: 380ms;

  /* ---- Touch ---- */
  --tap: 48px;
}