/* Ikigai Traveler — v2 design tokens
   IKIGAI brand (DESIGN.md): two logo greens over a warm paper canvas.
   iOS (Apple HIG) component grammar, re-skinned to the brand. */
:root{
  /* ---------- Brand greens (from IKIGAI-logo.png) ---------- */
  --green:#0a7d55;            /* brand green — default filled CTA / active */
  --green-500:#12946a;
  --green-400:#34b27b;        /* lighter accent */
  --green-deep:#004831;       /* deep forest — wordmark, headers, pressed */
  --green-strong:#063d2c;     /* darkest — dark surfaces */
  --green-100:#d7ece2;        /* wash — pill/badge fill */
  --green-50:#f3faf6;         /* faintest — hover wash */
  --green-grad:linear-gradient(135deg,#18a072,#0a7d55 52%,#046046);

  /* ---------- Lime (second logo colour — sparingly) ---------- */
  --lime:#a8c030;
  --lime-strong:#8aa521;
  --lime-soft:#eaf2c9;

  /* iOS "tint color" -> brand green */
  --tint:var(--green);

  /* ---------- Ink (text) ---------- */
  --ink:#12261f;              /* default text — dark green-black, never pure black */
  --ink-2:#28413a;
  --ink-mute:#5c716a;         /* secondary */
  --ink-faint:#93a49d;        /* placeholder / disabled */

  /* on-color */
  --on-primary:#ffffff;       /* text on green */
  --on-lime:#26310a;          /* text on lime */
  --on-dark:#eef6f1;          /* text on deep-green surface */

  /* ---------- Surfaces ---------- */
  --canvas:#f3f4f0;           /* app background — warm paper */
  --paper:#ffffff;            /* cards / raised */
  --canvas-soft:#f6f8f7;
  --canvas-dark:#063d2c;      /* deep-green hero/emotional surface */
  --canvas-dark-soft:#0a4834;

  /* ---------- Hairlines (iOS neutral separators — systemGray) ---------- */
  --hairline:rgba(60,60,67,.20);       /* card/list borders (opaque-ish over white) */
  --hairline-strong:rgba(60,60,67,.30);
  --hairline-cool:rgba(60,60,67,.11);  /* inner row separators */
  --separator:var(--hairline);
  --ios-gray3:#C7C7CC;                  /* disclosure chevrons */

  /* fills (iOS translucent fills, tinted to brand) */
  --fill:rgba(10,72,49,.05);
  --fill-2:rgba(10,72,49,.09);

  /* semantic label aliases (used across components) */
  --label:var(--ink);
  --label-2:var(--ink-mute);
  --label-3:var(--ink-faint);
  --label-4:rgba(18,38,31,.16);

  --danger:#c0392b; --warning:#b7791f;

  /* ---------- Type — system font (SF on Apple) per HIG; New York for serif ---------- */
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Google Sans','Noto Sans JP','Segoe UI',Roboto,system-ui,sans-serif;
  --serif:ui-serif,'New York','Lora',Georgia,'Times New Roman',serif;

  --lt:34px;      /* large title */
  --t1:28px;      /* title 1 */
  --t2:22px;      /* title 2 */
  --t3:20px;      /* title 3 */
  --headline:17px;
  --body:17px;
  --callout:16px;
  --subhead:15px;
  --footnote:13px;
  --caption:12px;
  --caption2:11px;

  /* ---------- Geometry (rounded / hospitable — DESIGN.md) ---------- */
  --r-xs:8px;
  --r-sm:10px;
  --r-card:14px;   /* list cards */
  --r-btn:999px;   /* pill buttons */
  --r-xl:18px;     /* primary cards / sheets */
  --r-cont:22px;
  --nav-h:44px;
  --tab-h:52px;

  /* safe areas — floor the top so content never hugs the very top on non-notch/browser */
  --sat:max(env(safe-area-inset-top,0px), 24px);
  --sab:max(env(safe-area-inset-bottom,0px), 8px);

  /* motion */
  --ease:cubic-bezier(.32,.72,0,1);
  --dur:360ms;

  /* app column */
  --app-max:480px;
}