/* ===== Design Tokens ===== */

:root {
  /* ===== Palette ===== */
  --navy:   #001F3D;
  --orange: #ED985F;
  --peach:  #F7B980;
  --cream:  #E8E2DB;
  --white:  #FFFFFF;

  /* ===== Semantic — Light Mode (default) ===== */
  --bg:          var(--cream);
  --bg-elev:     var(--white);
  --text:        var(--navy);
  --text-muted:  color-mix(in srgb, var(--navy) 70%, transparent);
  --accent:      var(--orange);
  --accent-soft: var(--peach);
  --border:      color-mix(in srgb, var(--navy) 12%, transparent);

  /* ===== Typography ===== */
  --font-base: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-md:  1rem;
  --text-lg:  1.125rem;
  --text-xl:  clamp(1.25rem, 2vw + 0.75rem, 1.5rem);
  --text-2xl: clamp(1.5rem, 3vw + 1rem, 2.25rem);
  --text-3xl: clamp(2rem, 5vw + 1rem, 3.5rem);

  /* ===== Spacing ===== */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;

  /* ===== Radius ===== */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-full: 999px;

  /* ===== Shadow ===== */
  --shadow: 0 4px 24px rgba(0, 31, 61, 0.08);
  --shadow-md: 0 8px 32px rgba(0, 31, 61, 0.12);

  /* ===== Transitions ===== */
  --transition: 200ms ease;
  --transition-slow: 400ms ease;

  /* ===== Layout ===== */
  --container-max: 1200px;
  --container-px:  20px;
}

/* ===== Dark Mode ===== */
[data-theme="dark"] {
  --bg:         var(--navy);
  --bg-elev:    color-mix(in srgb, var(--navy) 85%, var(--white));
  --text:       var(--cream);
  --text-muted: color-mix(in srgb, var(--cream) 70%, transparent);
  --accent:     var(--orange);
  --accent-soft: var(--peach);
  --border:     color-mix(in srgb, var(--cream) 15%, transparent);
  --shadow:     0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 8px 32px rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) {
  :root {
    --container-px: 32px;
  }
}