/* ==========================================================================
   tabiOS — Colors & Type Tokens
   ==========================================================================
   Brand: 株式会社tabiOS — travel app where influencer-made plans
   become bookable trips. Tone: refined, minimal, trustworthy
   (in the spirit of NEWT, Airbnb).

   Brand colors:
   - Coral  #FF7853  (primary, energy / emotion)
   - Navy   #1B2F6E  (text, structure, trust)
   - White  #FFFFFF  (canvas, breathing room)
   ========================================================================== */

/* ------- Webfonts ------- */
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;700&display=swap");

:root {
  --cream: #FFF9F3;
  --cream-deep: #F4ECDF;
  --sky-pale: #E6EDF8;
  --sky: #A8C0E5;
  --orange-soft: #FF6B35;
  --orange-deep: #D9522A;
  --ink: #1B1B1E;
  --muted-ink: #5E5E62;
  --label-blue: #2956AF;

  /* ====== Color — brand ====== */
  --coral-50:  #FFF1EC;
  --coral-100: #FFDDD0;
  --coral-200: #FFB89E;
  --coral-300: #FF9A75;
  --coral-400: #FF8862;
  --coral-500: #FF6B35;  /* accent — 5% */
  --coral-600: #E55322;
  --coral-700: #C24018;
  --coral-800: #8E3517;

  --navy-50:   #EAF0FB;
  --navy-100:  #D2DDF4;
  --navy-200:  #A5BBE9;
  --navy-300:  #7795DA;
  --navy-400:  #4972C7;
  --navy-500:  #2956AF;  /* secondary — 25% */
  --navy-600:  #214891;
  --navy-700:  #193974;
  --navy-800:  #122A57;

  /* ====== Color — neutral (warm-leaning grays anchored to navy) ====== */
  --white:     #FFFFFF;
  --paper:     #FAF7F2;   /* off-white surface, slight warm tint */
  --sand:      #F4F1EB;   /* card / section break */
  --mist:      #ECEEF3;   /* cool muted, dividers */
  --gray-100:  #F2F3F5;
  --gray-200:  #E6E8ED;
  --gray-300:  #CFD3DC;
  --gray-400:  #9AA0AE;
  --gray-500:  #6C7388;
  --gray-600:  #4A5066;
  --gray-700:  #2E3550;
  --black:     #0B1024;

  /* ====== Semantic — surfaces ====== */
  --bg:           var(--white);
  --bg-alt:       var(--paper);
  --bg-muted:     var(--sand);
  --surface:      var(--white);
  --surface-alt:  var(--paper);
  --overlay:      rgba(11, 16, 36, 0.55);

  /* ====== Semantic — foreground ====== */
  --fg-1:         var(--ink);   /* primary text */
  --fg-2:         var(--muted-ink);   /* body */
  --fg-3:         var(--gray-500);   /* secondary / meta */
  --fg-4:         var(--gray-400);   /* tertiary / hint */
  --fg-on-coral:  var(--white);
  --fg-on-navy:   var(--white);

  /* ====== Semantic — accents ====== */
  --accent:           var(--coral-500);
  --accent-dark:      var(--coral-600);
  --accent-hover:     var(--coral-600);
  --accent-pressed:   var(--coral-700);
  --accent-soft:      var(--coral-50);
  --accent-soft-fg:   var(--coral-700);

  --link:             var(--coral-600);
  --link-hover:       var(--coral-700);

  /* ====== Semantic — feedback ====== */
  --success: #2F9E6B;
  --warning: #E0A23A;
  --danger:  #D14B4B;
  --info:    var(--navy-400);

  /* ====== Borders & dividers ====== */
  --border-subtle: rgba(27, 27, 30, 0.08);
  --border:        rgba(27, 27, 30, 0.14);
  --border-strong: rgba(27, 27, 30, 0.22);

  /* ====== Radii ====== */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* ====== Spacing scale (4px base) ====== */
  --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;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ====== Shadows / elevation — soft, low spread, near-black ====== */
  --shadow-xs: 0 1px 2px rgba(27, 27, 30, 0.06);
  --shadow-sm: 0 2px 6px rgba(27, 27, 30, 0.06), 0 1px 2px rgba(27, 27, 30, 0.04);
  --shadow-md: 0 8px 20px rgba(27, 27, 30, 0.08), 0 2px 4px rgba(27, 27, 30, 0.04);
  --shadow-lg: 0 18px 40px rgba(27, 27, 30, 0.10), 0 4px 8px rgba(27, 27, 30, 0.05);
  --shadow-xl: 0 32px 64px rgba(27, 27, 30, 0.14), 0 8px 16px rgba(27, 27, 30, 0.06);
  --shadow-coral: 0 12px 28px rgba(255, 120, 83, 0.32);

  /* ====== Type — families ====== */
  --font-serif:   "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-jp:      "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans:    "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-mono:    "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* ====== Type — scale (display sans) ====== */
  --fs-display-xl: clamp(56px, 8vw, 112px);
  --fs-display-lg: clamp(44px, 6vw, 84px);
  --fs-display:    clamp(36px, 4.6vw, 64px);
  --fs-h1:         clamp(32px, 3.6vw, 48px);
  --fs-h2:         clamp(26px, 2.6vw, 36px);
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-eyebrow:    12px;

  /* ====== Type — weight ====== */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ====== Type — line height & tracking ====== */
  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-base:  0;
  --tracking-wide:  0.04em;
  --tracking-eyebrow: 0.16em;

  /* ====== Motion ====== */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ------------------------------------------------------------------
   Semantic typography — drop-in classes / element styles
   ------------------------------------------------------------------ */
.ts-eyebrow,
[data-ts="eyebrow"] {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.ts-display-xl { font: var(--fw-bold) var(--fs-display-xl)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.ts-display-lg { font: var(--fw-bold) var(--fs-display-lg)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.ts-display    { font: var(--fw-bold) var(--fs-display)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); }

.ts-h1 { font: var(--fw-bold) var(--fs-h1)/var(--lh-snug) var(--font-display); letter-spacing: var(--tracking-snug); color: var(--fg-1); }
.ts-h2 { font: var(--fw-bold) var(--fs-h2)/var(--lh-snug) var(--font-display); letter-spacing: var(--tracking-snug); color: var(--fg-1); }
.ts-h3 { font: var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-sans); color: var(--fg-1); }
.ts-h4 { font: var(--fw-semibold) var(--fs-h4)/var(--lh-snug) var(--font-sans); color: var(--fg-1); }

.ts-body-lg { font: var(--fw-regular) var(--fs-body-lg)/var(--lh-base) var(--font-sans); color: var(--fg-2); }
.ts-body    { font: var(--fw-regular) var(--fs-body)/var(--lh-base) var(--font-sans); color: var(--fg-2); }
.ts-body-sm { font: var(--fw-regular) var(--fs-body-sm)/var(--lh-base) var(--font-sans); color: var(--fg-3); }
.ts-caption { font: var(--fw-medium) var(--fs-caption)/var(--lh-base) var(--font-sans); color: var(--fg-3); }
.ts-mono    { font: var(--fw-medium) var(--fs-body-sm)/var(--lh-base) var(--font-mono); color: var(--fg-2); }

.ts-jp      { font-family: var(--font-jp); }