/* ==========================================================================
   PEA-Designer — Design Kit tokens (Phase 1)
   Source of truth for the landing page. Derived from the PEA-Designer logo
   (navy #002454 / cyan #00b3cc) and the product UI's slate neutral scale.
   ========================================================================== */

:root {
  /* --- Brand core ------------------------------------------------------- */
  --pea-navy:        #002454;  /* logo stripes, "Designer" wordmark, primary actions */
  --pea-cyan:        #00b3cc;  /* logo chevron, "PEA" wordmark, accents on light */
  --pea-cyan-bright: #10b9cd;  /* cyan on dark grounds (from Logo_negativ.svg) */

  /* --- Navy ramp --------------------------------------------------------- */
  --navy-950: #001330;  /* dark-theme ground, footer */
  --navy-900: #002454;  /* = --pea-navy */
  --navy-800: #0a3568;  /* primary button hover */
  --navy-700: #14477c;  /* pressed / active */
  --navy-100: #d6e0ee;  /* subtle navy wash */
  --navy-050: #eef2f8;  /* hero tint, alternating sections */

  /* --- Cyan ramp ---------------------------------------------------------
     #00b3cc on white is ~2.5:1 — decorative and large display use only.
     Use --cyan-700 for cyan-colored text and links on light grounds. */
  --cyan-700: #007a8c;  /* "cyan ink" — text-safe cyan on white */
  --cyan-500: #00b3cc;  /* = --pea-cyan */
  --cyan-400: #10b9cd;  /* = --pea-cyan-bright */
  --cyan-100: #c5edf3;  /* chip fills, icon washes */
  --cyan-050: #e8f8fa;  /* section tint */

  /* --- Neutrals (identical to product UI slate scale) -------------------- */
  --slate-050: #f9fafb;
  --slate-100: #f3f4f6;
  --slate-200: #e5e7eb;
  --slate-300: #d1d5db;
  --slate-400: #9ca3af;
  --slate-500: #6b7280;
  --slate-700: #374151;
  --slate-900: #111827;

  /* --- Semantic ----------------------------------------------------------- */
  --success: #16a34a;
  --warning: #d97706;
  --danger:  #ef4444;  /* matches product UI error accent */

  /* --- Typography ---------------------------------------------------------
     Montserrat  — display; echoes the geometric wordmark. Weights 600/700.
     IBM Plex Sans — body & UI. Weights 400/500/600.
     IBM Plex Mono — data, IDs, version numbers, eyebrow labels. 400/500. */
  --font-display: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", monospace;

  /* Type scale (rem @ 16px base) */
  --text-xs:  0.8125rem;  /* 13 — eyebrows, captions */
  --text-sm:  0.875rem;   /* 14 — secondary text, table body */
  --text-md:  1rem;       /* 16 — body */
  --text-lg:  1.125rem;   /* 18 — lead paragraph */
  --text-xl:  1.3125rem;  /* 21 — card titles */
  --text-2xl: 1.625rem;   /* 26 — subsection headings */
  --text-3xl: 2.0625rem;  /* 33 — section headings */
  --text-4xl: 2.625rem;   /* 42 — page headings */
  --text-5xl: 3.5rem;     /* 56 — hero display */

  --leading-tight: 1.15;  /* display */
  --leading-snug:  1.35;  /* headings */
  --leading-body:  1.6;   /* running text */

  --tracking-eyebrow: 0.08em;  /* uppercase mono eyebrows */

  /* --- Layout -------------------------------------------------------------- */
  --container: 1140px;
  --space-1: 0.5rem;   /*  8 */
  --space-2: 1rem;     /* 16 */
  --space-3: 1.5rem;   /* 24 */
  --space-4: 2rem;     /* 32 */
  --space-6: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-12: 6rem;    /* 96 — between landing sections */

  --radius-card: 10px;    /* matches product UI cards */
  --radius-btn:  8px;
  --radius-pill: 999px;

  --border: 1px solid var(--slate-200);
  --shadow-card: 0 1px 2px rgb(0 19 48 / 0.06), 0 1px 3px rgb(0 19 48 / 0.10);
  --shadow-pop:  0 4px 6px rgb(0 19 48 / 0.07), 0 10px 24px rgb(0 19 48 / 0.10);

  /* --- Signature motif ------------------------------------------------------
     The logo's "flow stripes": three parallelograms slanted 30° from vertical,
     pointing right. Used for section eyebrows and hero decoration. */
  --stripe-skew: -30deg;
}