/* ThalassA Design System — 08/31/2026 palette (emerald)
   Loaded after the base token files; remaps the site's existing token names
   onto the new ramps so every surface picks the palette up. Type, scale, grid
   and spacing are unchanged (both systems: Montserrat, base 16, ratio 1.25). */
:root{
  /* Emerald ramp — source "tertiary/300" family */
  --color-primary-50:#ECFDF5;
  --color-primary-100:#D1FAE5;
  --color-primary-300:#6EE7B7;
  --color-primary-400:#34D399;
  --color-primary-500:#10B981;
  --color-primary-600:#059669;
  --color-primary-700:#047857;
  --color-primary-800:#065F46;
  --color-primary-900:#064E3B;
  --color-primary-deep:#0B6E4F;

  /* Neutral ramp — warm off-white to near-black navy */
  --color-neutral-100:#FAFAF8;
  --color-neutral-200:#F4F4F1;
  --color-neutral-300:#EAEAE5;
  --color-neutral-400:#CECFD2;
  --color-neutral-500:#9D9FA4;
  --color-neutral-600:#6C6F77;
  --color-neutral-700:#3B3F49;
  --color-neutral-800:#0A0F1C;

  /* --- Legacy palette names remapped --- */
  --teal-900:var(--color-primary-900);
  --cyan-200:var(--color-primary-300);
  --cyan-400:var(--color-primary-500);
  --cyan-500:var(--color-primary-500);
  --cyan-600:var(--color-primary-600);
  --cyan-800:var(--color-primary-700);
  --orange-500:var(--color-primary-500);
  --peach-100:var(--color-primary-100);
  --peach-300:var(--color-primary-300);
  --blue-50:var(--color-neutral-200);
  --blue-100:var(--color-neutral-300);
  --blue-300:var(--color-neutral-400);
  --blue-500:var(--color-neutral-600);
  --neutral-50:var(--color-neutral-300);
  --neutral-200:var(--color-neutral-400);
  --neutral-400:var(--color-neutral-500);
  --neutral-500:var(--color-neutral-600);
  --neutral-600:var(--color-neutral-700);
  --neutral-800:var(--color-neutral-700);
  --neutral-900:var(--color-neutral-800);
  --white:#FFFFFF;

  /* --- Semantic --- */
  --surface-page:var(--white);
  --surface-muted:var(--color-neutral-200);
  --surface-card:var(--white);
  --surface-sunken:var(--color-neutral-100);
  --surface-inverse:var(--color-primary-900);
  --surface-accent:var(--color-primary-500);
  --surface-action:var(--color-primary-500);
  --surface-hover:rgba(6,78,59,.06);
  --surface-selected:rgba(16,185,129,.14);
  --surface-scrim:rgba(10,15,28,.48);

  --text-heading:var(--color-neutral-800);
  --text-body:var(--color-neutral-700);
  --text-muted:var(--color-neutral-600);
  --text-subtle:var(--color-neutral-500);
  --text-primary:var(--color-neutral-800);
  --text-secondary:var(--color-neutral-700);
  --text-on-dark:var(--white);
  /* 03.09.2026 — die Aufschrift auf der Handlungsflaeche ist TINTE, nicht
     Weiss. Gerechnet gegen --color-primary-500 #10B981:

         Weiss   2,54:1   WCAG AA verlangt 4,5:1 fuer normalen Text
         #0A0F1C 7,54:1

     Das ist nicht knapp daneben, sondern um mehr als die Haelfte: Auf dem
     hellen Gruen war die Beschriftung des wichtigsten Knopfes der Website
     bei Tageslicht kaum zu lesen. Die FLAECHE bleibt exakt dieselbe -- am
     Farbschema aendert sich nichts, nur die Tinte darauf. */
  --text-on-accent:var(--color-neutral-800);
  --text-on-action:var(--color-neutral-800);
  --text-link:var(--color-primary-700);
  --text-link-hover:var(--color-primary-800);

  --border-subtle:var(--color-neutral-300);
  --border-default:var(--color-neutral-400);
  --border-strong:var(--color-neutral-500);
  --border-accent:var(--color-primary-500);
  --border-focus:var(--color-primary-600);

  --accent:var(--color-primary-500);
  --accent-hover:var(--color-primary-600);
  --accent-active:var(--color-primary-700);

  --status-info:var(--color-neutral-600);
  --status-info-surface:var(--color-neutral-200);
  --status-success:var(--color-primary-600);
  --status-success-surface:var(--color-primary-50);
  --status-warning:var(--color-primary-700);
  --status-warning-surface:var(--color-primary-50);
  --status-danger:var(--color-neutral-700);
  --status-danger-surface:var(--color-neutral-200);

  /* Gradients rebuilt on the emerald ramp */
  --gradient-sea:linear-gradient(160deg,#064E3B 0%,#065F46 55%,#0B6E4F 100%);
  --gradient-surf:linear-gradient(180deg,#FAFAF8 0%,#FFFFFF 100%);
  --gradient-sunset:linear-gradient(120deg,#10B981 0%,#6EE7B7 100%);
  --gradient-protection:linear-gradient(180deg,rgba(6,78,59,0) 0%,rgba(6,78,59,.78) 100%);

  /* Flat source document: shadows stay restrained and ink-tinted, not teal */
  --shadow-xs:0 1px 2px rgba(10,15,28,.06);
  --shadow-sm:0 1px 3px rgba(10,15,28,.08),0 1px 2px rgba(10,15,28,.04);
  --shadow-md:0 6px 18px rgba(10,15,28,.10);
  --shadow-lg:0 12px 32px rgba(10,15,28,.14);
  --shadow-xl:0 24px 64px rgba(10,15,28,.18);
  --shadow-inset-sunken:inset 0 1px 3px rgba(10,15,28,.08);
  --focus-ring:0 0 0 3px rgba(16,185,129,.32);
  --glass-fill:rgba(255,255,255,.72);
  --glass-fill-dark:rgba(6,78,59,.55);
}