/* =====================================================================
   Design tokens
   ---------------------------------------------------------------------
   The single source of truth for colour, type, spacing, radius and
   motion. Ported from the Transferly design canvas. Nothing below this
   file should contain a raw hex value.
   ===================================================================== */

:root {
  /* --- Colour ------------------------------------------------------ */
  --bg:              #E9E6DF;   /* warm neutral page ground */
  --surface:         #FFFFFF;
  --surface-2:       #F6F4EF;   /* inset panels, table stripes */
  --surface-3:       #ECE8DF;   /* drop zone, disabled fills */
  --border:          #E5E1D8;
  --border-strong:   #D6D1C5;

  --text:            #17160F;
  --text-muted:      #6E6A61;
  --text-faint:      #9B968C;

  --primary:         #1F3D36;   /* deep forest green */
  --primary-hover:   #173029;
  --primary-ink:     #FFFFFF;

  --success:         #3E7C5A;
  --success-bg:      #E8F1EA;
  --success-ink:     #2E5F45;

  --warning:         #B7791F;
  --warning-bg:      #FBF1DF;
  --warning-ink:     #8A5A12;

  --danger:          #B4453E;
  --danger-bg:       #F9E8E6;
  --danger-ink:      #8F342E;

  --focus-ring:      #1F3D36;

  /* --- Type -------------------------------------------------------- */
  --font-sans:  'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --display:    clamp(2.75rem, 1.6rem + 5.2vw, 4.5rem);  /* 44 → 72 */
  --h1:         clamp(2rem,    1.4rem + 2.6vw, 2.75rem);  /* 32 → 44 */
  --h2:         clamp(1.5rem,  1.2rem + 1.4vw, 2rem);     /* 24 → 32 */
  --h3:         1.375rem;                                  /* 22 */
  --body-lg:    1.125rem;                                  /* 18 */
  --body:       1rem;                                      /* 16 */
  --small:      0.875rem;                                  /* 14 */
  --tiny:       0.75rem;                                   /* 12 */

  --lh-display: 1.0;
  --lh-heading: 1.15;
  --lh-body:    1.55;

  --ls-display: -0.035em;
  --ls-h1:      -0.03em;
  --ls-h2:      -0.02em;
  --ls-h3:      -0.01em;
  --ls-label:   0.08em;

  /* --- Radius ------------------------------------------------------ */
  --r-xs:  7px;
  --r-sm:  10px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* --- Elevation --------------------------------------------------- */
  --shadow-sm:   0 1px 2px rgba(23, 22, 15, 0.04);
  --shadow-md:   0 2px 8px rgba(23, 22, 15, 0.06);
  --shadow-lg:   0 12px 32px rgba(23, 22, 15, 0.08);
  --shadow-card: 0 18px 48px rgba(23, 22, 15, 0.10);

  /* --- Space ------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  /* --- Layout ------------------------------------------------------ */
  --container:  72rem;    /* 1152px */
  --container-narrow: 44rem;
  --gutter:     clamp(1rem, 0.5rem + 2vw, 2.5rem);

  /* --- Motion ------------------------------------------------------ */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:     120ms;
  --t-base:     200ms;
  --t-slow:     360ms;

  /* Minimum comfortable touch target. */
  --touch: 44px;
}

/* Honour a reduced-motion preference everywhere, once. */
@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;
  }
}