@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ─── Green Palette ─── */
  --green-950: #071610;
  --green-900: #0d2418;
  --green-800: #163d27;
  --green-700: #1f5535;
  --green-600: #276e43;
  --green-500: #338a54;
  --green-400: #50aa6e;
  --green-300: #7dc994;
  --green-200: #aee3bc;
  --green-100: #d4f0dc;
  --green-50:  #eef9f2;

  /* ─── Earth Palette (Afro warmth) ─── */
  --earth-900: #1c0d06;
  --earth-800: #371a0c;
  --earth-700: #5a2e14;
  --earth-600: #7c4523;
  --earth-500: #9e5e34;
  --earth-400: #bf7d52;
  --earth-300: #d9a47c;
  --earth-200: #edcaa8;
  --earth-100: #f6e2ce;
  --earth-50:  #fbf2e8;

  /* ─── Neutral Palette ─── */
  --neutral-900: #0c0c0c;
  --neutral-800: #1a1a1a;
  --neutral-700: #2e2e2e;
  --neutral-600: #484848;
  --neutral-500: #686868;
  --neutral-400: #8c8c8c;
  --neutral-300: #b2b2b2;
  --neutral-200: #d2d2d2;
  --neutral-100: #e8e8e8;
  --neutral-50:  #f5f5f5;

  /* ─── Accent ─── */
  --lime-500: #7ec44a;
  --lime-400: #a0d65c;
  --lime-300: #bfe480;
  --lime-200: #d9f2a8;
  --lime-100: #edfacc;

  /* ─── Semantic / Role-Based ─── */
  --color-bg-hero:    var(--green-900);
  --color-bg-page:    #ffffff;
  --color-bg-tint:    var(--green-50);
  --color-bg-earth:   var(--earth-50);
  --color-bg-dark:    var(--green-950);
  --color-bg-mid:     #f2f6f3;

  --color-brand:       var(--green-700);
  --color-brand-hover: var(--green-600);
  --color-brand-light: var(--green-400);
  --color-brand-earth: var(--earth-600);

  --color-text-primary:   var(--neutral-900);
  --color-text-secondary: var(--neutral-600);
  --color-text-muted:     var(--neutral-400);
  --color-text-inverse:   #ffffff;
  --color-text-brand:     var(--green-700);
  --color-text-earth:     var(--earth-700);

  --color-accent:        var(--lime-400);
  --color-accent-subtle: var(--lime-100);

  --color-border:        var(--neutral-200);
  --color-border-subtle: var(--neutral-100);
  --color-border-brand:  var(--green-300);

  --color-glass-bg:     rgba(255, 255, 255, 0.08);
  --color-glass-border: rgba(255, 255, 255, 0.16);
  --color-glass-dark:   rgba(0, 0, 0, 0.25);

  /* ─── Font Families ─── */
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* ─── Font Sizes ─── */
  --text-xs:   0.6875rem;
  --text-sm:   0.8125rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;
  --text-8xl:  5.5rem;
  --text-9xl:  7rem;

  /* ─── Font Weights ─── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ─── Line Heights ─── */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   2;

  /* ─── Letter Spacing ─── */
  --tracking-tightest: -0.05em;
  --tracking-tight:    -0.03em;
  --tracking-snug:     -0.01em;
  --tracking-normal:    0;
  --tracking-wide:      0.04em;
  --tracking-wider:     0.08em;
  --tracking-widest:    0.16em;

  /* ─── Base unit: 4px ─── */
  --space-0:  0;
  --space-px: 1px;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;
  --space-56: 14rem;
  --space-64: 16rem;

  /* ─── Layout containers ─── */
  --container-xs:  480px;
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --section-y:     var(--space-24);
  --section-x:     var(--space-8);
  --section-gap:   var(--space-12);

  /* ─── Border Radius ─── */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  36px;
  --radius-full: 9999px;

  /* ─── Elevation / Shadows ─── */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 14px rgba(0,0,0,0.09), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg:   0 10px 30px rgba(0,0,0,0.11), 0 4px 8px rgba(0,0,0,0.05);
  --shadow-xl:   0 20px 50px rgba(0,0,0,0.14), 0 8px 16px rgba(0,0,0,0.06);

  --shadow-brand-sm: 0 4px 16px rgba(31, 85, 53, 0.28);
  --shadow-brand-md: 0 8px 32px rgba(31, 85, 53, 0.35);
  --shadow-brand-lg: 0 16px 48px rgba(31, 85, 53, 0.45);

  --shadow-earth-sm: 0 4px 16px rgba(124, 69, 35, 0.22);
  --shadow-earth-md: 0 8px 32px rgba(124, 69, 35, 0.30);

  /* ─── Glass / Blur ─── */
  --blur-sm:  blur(8px);
  --blur-md:  blur(16px);
  --blur-lg:  blur(32px);
  --glass-filter: saturate(1.6) blur(16px);

  /* ─── Transitions ─── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  --duration-fast:   120ms;
  --duration-base:   220ms;
  --duration-slow:   380ms;
  --duration-slower: 600ms;

  --transition-fast:   var(--duration-fast) var(--ease-out);
  --transition-base:   var(--duration-base) var(--ease-out);
  --transition-slow:   var(--duration-slow) var(--ease-out);
  --transition-spring: var(--duration-slow) var(--ease-spring);

  /* ─── Borders ─── */
  --border-thin:   1px;
  --border-base:   1.5px;
  --border-thick:  2px;
}