/* =========================================================
   Parade Bookkeeping — Color & Type Foundations
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND PALETTE (v2 — muted pastel) ---------- */
  /* Clay — primary signal color, dusty terracotta */
  --terracotta-50:  #FBF3EF;
  --terracotta-100: #F4DFD2;
  --terracotta-200: #E8C0AE;
  --terracotta-300: #D89C82;
  --terracotta-400: #C58973;  /* PRIMARY — dusty clay */
  --terracotta-500: #A87560;
  --terracotta-600: #855B49;
  --terracotta-700: #5E4031;

  /* Butter — accent for highlights, confetti, banner trim */
  --marigold-50:  #FDF8EC;
  --marigold-100: #F8ECCB;
  --marigold-200: #F1DDA1;
  --marigold-300: #ECCE82;
  --marigold-400: #E5C173;  /* ACCENT — soft butter */
  --marigold-500: #C8A35A;
  --marigold-600: #9C7E40;
  --marigold-700: #6E5828;

  /* Sage — secondary, grounded, calm */
  --forest-50:  #EFF3F0;
  --forest-100: #D6E0D8;
  --forest-200: #B6C8BA;
  --forest-300: #92AC97;
  --forest-400: #7A9580;  /* SECONDARY — muted sage */
  --forest-500: #5F7B66;
  --forest-600: #485E4E;
  --forest-700: #314236;

  /* Ink — neutrals, warm-leaning */
  --ink-900: #1A1814;  /* near-black, paper-friendly */
  --ink-800: #2A2620;
  --ink-700: #423C32;
  --ink-600: #5C544A;
  --ink-500: #7A7165;
  --ink-400: #9C9285;
  --ink-300: #C2B9AC;
  --ink-200: #DDD5C8;
  --ink-100: #ECE6DA;
  --ink-50:  #F5F1E8;

  /* Paper — backgrounds, warm cream */
  --paper:    #FAF7F2;
  --paper-2:  #F5F1E8;
  --paper-3:  #ECE6DA;
  --white:    #FFFFFF;

  /* ---------- SEMANTIC TOKENS ---------- */
  --bg:         var(--paper);
  --bg-alt:     var(--paper-2);
  --bg-sunken:  var(--paper-3);
  --bg-inverse: var(--ink-900);
  --surface:    var(--white);

  --fg:         var(--ink-900);
  --fg-muted:   var(--ink-600);
  --fg-subtle:  var(--ink-500);
  --fg-faint:   var(--ink-400);
  --fg-inverse: var(--paper);

  --primary:    var(--terracotta-400);
  --primary-hover: var(--terracotta-500);
  --primary-press: var(--terracotta-600);
  --primary-fg: var(--white);

  --secondary:    var(--forest-400);
  --secondary-hover: var(--forest-500);
  --secondary-fg: var(--white);

  --accent:     var(--marigold-400);
  --accent-fg:  var(--ink-900);

  --border:     var(--ink-200);
  --border-strong: var(--ink-300);
  --border-faint: var(--ink-100);

  --success: #5F7B66;
  --warning: #C8A35A;
  --danger:  #A87560;
  --info:    #6B8499;

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Geist", "Inter", -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — minor third (1.2), comfortable for editorial sans */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-md:  16px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 84px;

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.08em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ---------- SPACING (4px base) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- RADII ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (warm, soft) ---------- */
  --shadow-xs: 0 1px 2px rgba(42, 38, 32, 0.06);
  --shadow-sm: 0 1px 3px rgba(42, 38, 32, 0.08), 0 1px 2px rgba(42, 38, 32, 0.04);
  --shadow-md: 0 4px 8px rgba(42, 38, 32, 0.06), 0 2px 4px rgba(42, 38, 32, 0.04);
  --shadow-lg: 0 12px 24px rgba(42, 38, 32, 0.08), 0 4px 8px rgba(42, 38, 32, 0.04);
  --shadow-xl: 0 24px 48px rgba(42, 38, 32, 0.10), 0 8px 16px rgba(42, 38, 32, 0.04);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(42, 38, 32, 0.04);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 360ms;
}

/* =========================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ========================================================= */

.t-display {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.t-h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.t-h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.t-h3 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.t-h4 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.t-h5 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg);
}

.t-lead {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-muted);
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg);
}

.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg);
}

.t-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--terracotta-500);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
  color: var(--fg);
}

.t-num {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}