/* Tokihana — Color tokens
 *
 * Palette lifted from the 見学体験LP wireframe. The system is anchored on a
 * dusty wedding-morning teal, warmed by three "support" accents (sage, ochre,
 * terracotta) — one per service pillar — and grounded in soft warm neutrals
 * so photography and mincho headlines can breathe.
 */

:root {
  /* ---------- Brand ---------- */
  --brand-50:  #F1F8FA;   /* highlight row bg */
  --brand-100: #E9F3F7;   /* chip bg */
  --brand-200: #CBE3EC;   /* KV gradient stop, chip border */
  --brand-300: #A8D1E0;
  --brand-400: #84BCD3;
  --brand-500: #62A8C4;   /* PRIMARY BRAND — CTAs, headings accents */
  --brand-600: #4E8FAA;
  --brand-700: #3F7A94;
  --brand-ink: #3F7A94;   /* legible on white */

  /* Semantic alias */
  --brand: var(--brand-500);
  --brand-soft: var(--brand-100);
  --brand-line: var(--brand-200);

  /* ---------- Support accents (3 service pillars) ---------- */
  /* 01 — Check App (sage) */
  --sage-50:  #EEF5ED;
  --sage-100: #DDEBDA;
  --sage-500: #5F9F63;
  --sage-600: #4E8451;
  --sage-ink: #5F8A5E;

  /* 02 — AI estimate is on brand teal */

  /* 03 — Coupon (terracotta) */
  --terra-50:  #FFF8F4;
  --terra-100: #FFF7F2;
  --terra-200: #FBEEE7;
  --terra-300: #E6B79E;
  --terra-500: #D48A6C;
  --terra-600: #B76F53;

  /* Award / stats gold (No.1 badge, ％ figures) */
  --gold-50:  #FBF3E0;
  --gold-200: #ECCB86;
  --gold-500: #C2A35B;
  --gold-600: #B89248;
  --gold-700: #C18F2E;

  /* ---------- Ink (text) ---------- */
  --ink-900: #1A1A1A;   /* headline */
  --ink-800: #3A3A3A;   /* body */
  --ink-700: #5C5C5C;   /* secondary */
  --ink-600: #7A7A7A;   /* meta */
  --ink-500: #8A8A8A;   /* disclaimer, legalese */
  --ink-400: #A8A29A;   /* caption, warm gray */
  --ink-300: #B5B0A9;
  --ink-200: #CFCFCF;   /* comparison ×/△ */

  /* ---------- Surface ---------- */
  --surface-page:    #E3E9EA;   /* outer canvas (behind mobile frame) */
  --surface-app:     #FBFCFD;   /* app bg */
  --surface-card:    #FFFFFF;
  --surface-muted:   #EEF3F4;   /* soft banded section */
  --surface-warm:    #F6F4EF;   /* comparison first-col */
  --surface-warm-2:  #F2F0EB;   /* comparison other headers */
  --surface-footer:  #E9F0F1;

  /* Tinted surfaces per accent */
  --surface-brand-tint: #E9F3F7;
  --surface-sage-tint:  #F0F5EF;
  --surface-terra-tint: #FFF7F2;
  --surface-gold-tint:  #FBF3E0;

  /* ---------- Line ---------- */
  --line-100: #ECECE6;
  --line-200: #E4EBEC;
  --line-300: #E2E9EB;
  --line-400: #DBE4E6;
  --line-warm: #E5C9BB;

  /* ---------- Semantic ---------- */
  --text-heading: var(--ink-900);
  --text-body:    var(--ink-800);
  --text-muted:   var(--ink-700);
  --text-meta:    var(--ink-500);
  --text-on-brand: #FFFFFF;
  --text-brand:   var(--brand-500);

  --border-card:  var(--line-300);
  --border-soft:  var(--line-200);
  --border-hard:  var(--line-400);

  --focus-ring:   var(--brand-500);
}