@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;600&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ─── Brand — Orange ─────────────────────────────── */
  --orange-base:   #F28C38;
  --orange-dark:   #D9732A;
  --orange-darker: #C06020;
  --orange-tint:   #FEF3E8;  /* subtle orange surface */

  /* ─── Balance — Soft Green ───────────────────────── */
  --green-base:    #7FB77E;
  --green-dark:    #6BA06A;
  --green-tint:    #EEF7EE;  /* subtle green surface */

  /* ─── Backgrounds ────────────────────────────────── */
  --bg-base:    #FAFAF8;   /* warm white — page */
  --bg-surface: #FFFFFF;   /* pure white — cards */
  --bg-subtle:  #F5F5F3;   /* very light — hover bg, tags */

  /* ─── Text ───────────────────────────────────────── */
  --text-primary:   #2B2B2B;
  --text-secondary: #6A6A6A;
  --text-muted:     #9A9A9A;
  --text-disabled:  #BFBFBF;
  --text-on-accent: #FFFFFF;

  /* ─── Borders ────────────────────────────────────── */
  --border-default: #E8E8E6;
  --border-strong:  #D0D0CE;

  /* ─── Semantic Aliases ───────────────────────────── */
  --accent:          var(--orange-base);
  --accent-hover:    var(--orange-dark);
  --accent-active:   var(--orange-darker);

  --secondary:       var(--green-base);
  --secondary-hover: var(--green-dark);
  --secondary-tint:  var(--green-tint);

  /* ─── Typography ─────────────────────────────────── */
  --font-family:     'Figtree', sans-serif;
  --text-display:    48px;
  --text-heading:    24px;
  --text-body:       16px;
  --text-caption:    12px;
  --leading-display: 56px;
  --leading-heading: 32px;
  --leading-body:    24px;
  --leading-caption: 16px;
  --weight-regular:  400;
  --weight-semibold: 600;

  /* ─── Spacing — 8pt Grid ─────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  96px;
  --space-9:  128px;

  --gap-inner:   var(--space-3);
  --gap-between: var(--space-5);
  --gap-section: var(--space-6);

  /* ─── Radius ─────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* ─── Shadow ─────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(43, 43, 43, 0.07);
  --shadow-md: 0 4px 16px rgba(43, 43, 43, 0.09);

  /* ─── Focus ──────────────────────────────────────── */
  --focus-ring: 0 0 0 3px rgba(242, 140, 56, 0.35);

  /* ─── Motion ─────────────────────────────────────── */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --easing-base:   ease;
}

@media (min-width: 768px) {
  :root { --gap-section: var(--space-7); }
}

@media (min-width: 1024px) {
  :root { --gap-section: var(--space-8); }
}