/* Life HQ — design tokens. Light, warm, editorial. */

:root {
  /* Paper & ink -------------------------------------------------------- */
  --paper:          oklch(97.4% 0.009 84);
  --paper-raised:   oklch(99.2% 0.006 84);
  --paper-sunk:     oklch(94.6% 0.012 82);
  --ink:            oklch(23% 0.018 55);
  --ink-soft:       oklch(46% 0.014 55);
  --ink-faint:      oklch(52% 0.014 60);
  --rule:           oklch(89% 0.011 75);
  --rule-strong:    oklch(80% 0.014 72);

  /* Accents ------------------------------------------------------------ */
  --accent:         oklch(47% 0.135 30);   /* deep terracotta */
  --accent-ink:     oklch(99% 0.005 84);
  --accent-wash:    oklch(94% 0.030 40);
  --gain:           oklch(46% 0.105 155);
  --gain-wash:      oklch(94% 0.035 155);
  --loss:           oklch(50% 0.150 27);
  --loss-wash:      oklch(94.5% 0.035 30);
  --flag:           oklch(63% 0.130 75);   /* amber, for "due soon" */
  --flag-wash:      oklch(95% 0.045 85);

  /* Type --------------------------------------------------------------- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;

  --text-xs:    0.75rem;
  --text-sm:    0.8125rem;
  --text-base:  0.9375rem;
  --text-md:    1.0625rem;
  --text-lg:    1.375rem;
  --text-xl:    clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  --text-figure: clamp(2.25rem, 1.6rem + 3.4vw, 3.25rem);

  /* Space -------------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --gutter: 1.125rem;

  /* Shape & depth ------------------------------------------------------ */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px oklch(30% 0.02 60 / 0.05),
                 0 6px 18px -8px oklch(30% 0.02 60 / 0.16);
  --shadow-lift: 0 2px 6px oklch(30% 0.02 60 / 0.08),
                 0 20px 44px -16px oklch(30% 0.02 60 / 0.28);

  /* Motion ------------------------------------------------------------- */
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 420ms;
  --ease: cubic-bezier(0.2, 0.7, 0.25, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Chrome ------------------------------------------------------------- */
  --nav-h: 4.25rem;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}