/* Pin & Plane — design tokens (single source of truth) */
:root {
  /* ── Colour palette ── */
  /* Compass Teal · primary */
  --color-primary:        #1D9E75;
  --color-primary-hover:  #178a66;
  --color-primary-light:  rgba(159, 225, 203, 0.22);
  --color-primary-muted:  rgba(29, 158, 117, 0.08);

  /* Wanderlust Amber · accent */
  --color-accent:         #FFC850;
  --color-accent-hover:   #ffb72b;
  --color-accent-light:   rgba(255, 200, 80, 0.16);
  --color-accent-deep:    #C17F3A;

  /* Horizon Blue · secondary */
  --color-secondary:      #2AB5C8;
  --color-secondary-muted: rgba(42, 181, 200, 0.10);

  /* Seafoam Mist · tint */
  --color-tint:           #9FE1CB;

  /* Deep Forest · anchor — greenish-black, complements primary teal */
  --color-anchor:         #0a2620;
  --color-anchor-soft:    #143a30;

  /* Warm Ivory · surfaces  +  faint Sage Mist for the second tone */
  --color-bg:             #FAF8F4;
  --color-bg-alt:         #EEF4EF;   /* faint mint-cream — pairs with primary teal */
  --color-bg-mint:        #EEF4EF;   /* alias for clarity when used as accent band */
  --color-bg-mint-soft:   #F4F8F4;   /* even softer mint, for tight stacked sections */
  --color-surface:        #FFFFFF;
  --color-border:         #DDE7E0;   /* slight cool tint to harmonise with mint bg */
  --color-border-strong:  #BCC9BF;

  --color-text:           #0a2620;
  --color-text-secondary: #44555a;   /* AA-pass on cream/mint surfaces */
  --color-text-muted:     #5d6f72;   /* darker than before — passes AA at 14px+ */
  --color-text-on-primary:#FFFFFF;
  --color-text-on-accent: #0d1f24;

  --color-success:        #1D9E75;
  --color-warning:        #FFC850;
  --color-danger:         #d85050;

  /* Gradients */
  --grad-hero-overlay: linear-gradient(180deg, rgba(13,31,36,0) 0%, rgba(13,31,36,0.35) 45%, rgba(13,31,36,0.85) 100%);
  --grad-card-overlay: linear-gradient(180deg, rgba(13,31,36,0) 40%, rgba(13,31,36,0.75) 100%);
  --grad-primary:      linear-gradient(135deg, #1D9E75 0%, #2AB5C8 100%);
  --grad-accent:       linear-gradient(135deg, #FFC850 0%, #C17F3A 100%);
  --grad-warm:         linear-gradient(135deg, #FAF8F4 0%, #F0EDE8 100%);

  /* ── Typography ── */
  --font-heading: "Syne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-jakarta: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --text-display:  clamp(2.5rem, 5vw, 3.75rem);
  --text-h1:       clamp(2rem, 3.5vw, 2.75rem);
  --text-h2:       clamp(1.5rem, 2.5vw, 2rem);
  --text-h3:       clamp(1.125rem, 1.8vw, 1.375rem);
  --text-h4:       1.125rem;
  --text-body:     1rem;
  --text-body-sm:  0.875rem;
  --text-caption:  0.75rem;
  --text-overline: 0.6875rem;

  /* ── Spacing (6px base) ── */
  --space-1:  4px;
  --space-2:  6px;
  --space-3:  10px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-8:  24px;
  --space-10: 32px;
  --space-12: 40px;
  --space-16: 48px;
  --space-20: 56px;
  --space-24: 72px;
  --space-32: 96px;

  /* ── Layout ── */
  --grid-gutter:    24px;
  --grid-margin:    clamp(16px, 4vw, 48px);
  --max-width:      1280px;
  --content-width:  720px;

  /* ── Radius ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 100px;

  /* ── Shadows ── */
  --shadow-card:       0 1px 3px rgba(13, 31, 36, 0.04), 0 8px 24px rgba(13, 31, 36, 0.06);
  --shadow-card-hover: 0 2px 8px rgba(13, 31, 36, 0.08), 0 16px 40px rgba(13, 31, 36, 0.10);
  --shadow-elevated:   0 4px 12px rgba(13, 31, 36, 0.08), 0 20px 48px rgba(13, 31, 36, 0.12);
  --shadow-hero:       0 8px 32px rgba(13, 31, 36, 0.12), 0 32px 80px rgba(13, 31, 36, 0.08);
  --shadow-input:      0 0 0 3px rgba(29, 158, 117, 0.15);

  /* ── Motion — Linear-style snap (fast, tight, no overshoot) ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
  --ease-quick:  cubic-bezier(0.2, 0, 0, 1);
  --duration-fast:   90ms;
  --duration-normal: 140ms;
  --duration-slow:   240ms;
}