/* ─── design tokens ─────────────────────────────────────────────
   Minimalist. Monochrome + one crisp green accent. Inter Tight
   for UI, JetBrains Mono for numerics. Hairlines, no shadows,
   tight radii. Tool-like.
────────────────────────────────────────────────────────────────── */

:root {
  /* surfaces */
  --bg:         #FFFFFF;
  --surface:    #FFFFFF;
  --surface-2:  #F7F7F7;
  --surface-3:  #F0F0F0;

  /* ink */
  --ink:        #0F0F0F;
  --ink-2:      #3F3F3F;
  --ink-3:      #6B6B6B;
  --ink-4:      #9A9A9A;
  --ink-5:      #C4C4C4;

  --line:       #EAEAEA;
  --line-soft:  #F2F2F2;
  --line-strong:#D4D4D4;

  /* single accent — only for active/success state */
  --accent:       #0E7C4A;
  --accent-ink:   #FFFFFF;
  --accent-soft:  #E6F1EC;
  --accent-hover: #0B6339;

  /* tones kept as plumbing; visually identical hairline darker-grey */
  --tone-accent: var(--ink-4);
  --tone-pull:   var(--ink-4);
  --tone-core:   var(--ink-4);

  /* semantic */
  --success:     #0E7C4A;
  --success-soft:#E6F1EC;
  --warn:        #7A6A1F;
  --warn-soft:   #F4EED7;
  --danger:      #8C2321;
  --danger-soft: #F5E2E0;

  /* shadows — essentially off; keep tokens for existing refs */
  --shadow-sm:  none;
  --shadow-md:  none;
  --shadow-key: 0 12px 40px -16px rgba(0, 0, 0, 0.18);

  /* type */
  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-2xs: 10px;
  --fs-xs:  11px;
  --fs-sm:  13px;
  --fs-base:15px;
  --fs-md:  17px;
  --fs-lg:  20px;
  --fs-xl:  28px;
  --fs-2xl: 40px;
  --fs-hero:120px;

  --lh-tight:  1.05;
  --lh-snug:   1.3;
  --lh-normal: 1.5;

  /* spacing (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;

  /* radius — tight */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* motion — iOS-flavoured curves */
  --ease-ios:     cubic-bezier(0.32, 0.72, 0, 1);     /* default iOS curve */
  --ease-spring:  cubic-bezier(0.5, 1.25, 0.5, 1);    /* gentle overshoot */
  --ease-out-exp: cubic-bezier(0.19, 1, 0.22, 1);     /* decel, quick settle */
  --ease:         var(--ease-ios);
  --ease-out:     var(--ease-out-exp);
  --dur-xs:   120ms;
  --dur-sm:   200ms;
  --dur-md:   320ms;
  --dur-lg:   480ms;
  --dur-fast: 120ms;
  --dur-mid:  220ms;
  --dur-slow: 360ms;

  /* layout */
  --page-max: 560px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --header-h: 48px;
  --tabs-h:   44px;
  --timer-h:  84px;
}