/* Ploggworld color system.
   Source of truth: Plogg-Stylesheet_Step_04.pdf + brand logo (cyan variant).
   Primary teal #005f79, cool neutral #cfd8e0, warm accent #f1893c,
   plus the bright cyan "smile" accent #2bbed1 from the brand mark. */

:root {
  /* ---- Teal (primary brand) ---- */
  --teal-900: #04303d;
  --teal-800: #084a5e;
  --teal-700: #005f79; /* brand primary — from stylesheet */
  --teal-600: #0d7591;
  --teal-500: #2b93ad;
  --teal-400: #62b1c5;
  --teal-300: #9fccda;
  --teal-200: #cbe4ec;
  --teal-100: #e7f3f7;

  /* ---- Cyan (energetic accent — logo smile) ---- */
  --cyan-700: #178a9b;
  --cyan-600: #1ea3b5;
  --cyan-500: #2bbed1; /* brand cyan */
  --cyan-400: #58ccdb;
  --cyan-300: #8fdde8;
  --cyan-100: #dff5f8;

  /* ---- Orange (warm accent) ---- */
  --orange-700: #cc6524;
  --orange-600: #e0722a;
  --orange-500: #f1893c; /* stylesheet accent */
  --orange-400: #f6a366;
  --orange-300: #f9c199;
  --orange-100: #fdecdd;

  /* ---- Neutrals (cool grey-blue, anchored to #cfd8e0) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f5f7f9;
  --neutral-100: #eaeef2;
  --neutral-200: #cfd8e0; /* stylesheet light neutral */
  --neutral-300: #b3c0cc;
  --neutral-400: #8b9baa;
  --neutral-500: #64778a;
  --neutral-600: #4a5b6b;
  --neutral-700: #33414e;
  --neutral-800: #1f2932;
  --neutral-900: #0f171d;

  /* ---- Feedback ---- */
  --green-500:  #2fa36b;
  --green-100:  #dff2e8;
  --red-500:    #d8503f;
  --red-100:    #fbe4e0;
  --amber-500:  #f1893c; /* reuse brand orange for warnings */
  --amber-100:  #fdecdd;

  /* ================= Semantic aliases ================= */
  --color-primary:        var(--teal-700);
  --color-primary-hover:  var(--teal-800);
  --color-primary-active: var(--teal-900);
  --color-primary-soft:   var(--teal-100);

  --color-accent:         var(--cyan-500);
  --color-accent-hover:   var(--cyan-600);
  --color-accent-soft:    var(--cyan-100);

  --color-warm:           var(--orange-500);
  --color-warm-hover:     var(--orange-600);
  --color-warm-soft:      var(--orange-100);

  --text-strong:   var(--neutral-900);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-on-primary: #ffffff;
  --text-on-accent:  var(--teal-900);
  --text-link:     var(--teal-700);
  --text-link-hover: var(--cyan-600);

  --surface-page:    #ffffff;
  --surface-subtle:  var(--neutral-50);
  --surface-card:    #ffffff;
  --surface-sunken:  var(--neutral-100);
  --surface-invert:  var(--teal-700);
  --surface-invert-deep: var(--teal-900);

  --border-subtle:  var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-focus:   var(--cyan-500);

  --success-fg: var(--green-500);
  --success-bg: var(--green-100);
  --danger-fg:  var(--red-500);
  --danger-bg:  var(--red-100);
  --warning-fg: var(--orange-600);
  --warning-bg: var(--orange-100);
}