/*
  JJW Project Solutions — Design Tokens
  Source of truth: "01 Brand Guidelines/Brand Book.pdf" + "JJW_Marken_Website_Umsetzungsdokument" v1.5, Kapitel 2 & 11.
  Do not hand-edit values here without checking both source documents first — this file mirrors them, it does not define them.
*/

:root {
  /* Primary — shared by all three brand levels */
  --jjw-navy: #1E3A5F;
  --jjw-navy-75: #566B87;
  --jjw-navy-50: #8E9CAF;
  --jjw-navy-25: #C7CED7;

  --jjw-accent-blue: #2E5F8A;
  --jjw-black: #09121E;

  /* Dachmarke (parent) only */
  --jjw-silver-grey: #C0C8D4;
  --jjw-silver-grey-75: #D0D6DF;
  --jjw-silver-grey-50: #DFE3E9;
  --jjw-silver-grey-25: #EFF1F4;
  --jjw-light-grey: #F5F5F5;

  /* Sub-brand: JJW Retail IT Project Management — Amber. Use ONLY on Retail pages. */
  --jjw-amber: #FF9932;
  --jjw-amber-75: #FFB365;
  --jjw-amber-50: #FFCC98;
  --jjw-amber-25: #FFE5CC;

  /* Sub-brand: JJW AI Training & Consulting — Mint Green. Use ONLY on AI pages. Never as text on white (fails AA). */
  --jjw-mint: #3EF7AE;
  --jjw-mint-75: #6EF9C2;
  --jjw-mint-50: #9EFBD6;
  --jjw-mint-25: #CFFDEB;

  /* Text */
  --jjw-text-body: #222222;
  --jjw-border-hairline: #e2e6eb;
  /* Alternating Section Backgrounds */
  --jjw-bg-white: #ffffff;
  --jjw-bg-alt: #f5f7f8;

  /* Type scale — Standardized across entire app. Desktop values; see @media override below for mobile. */
  --jjw-font-family: "Outfit", system-ui, "Segoe UI", sans-serif;
  --jjw-h1: 44px;
  --jjw-h2: 32px;
  --jjw-h3: 22px;
  --jjw-h4: 18px;
  --jjw-lead: 18px;
  --jjw-subline: 17px;
  --jjw-body: 16px;
  --jjw-kicker: 13px;
  --jjw-caption: 12.5px;

  /* Layout */
  --jjw-max-width: 1200px;
  --jjw-radius-card: 12px;
  --jjw-radius-control: 8px;
  --jjw-section-gap: 96px;
  --jjw-section-gap-mobile: 56px;
}

@media (max-width: 640px) {
  :root {
    --jjw-h1: 32px;
    --jjw-h2: 26px;
    --jjw-h3: 20px;
    --jjw-h4: 17px;
    --jjw-lead: 16px;
    --jjw-subline: 15.5px;
    --jjw-body: 15px;
    --jjw-kicker: 12px;
    --jjw-caption: 11.5px;
  }
}

/* Small phones (iPhone SE/mini and most Androids at 360px). One step
   down on the display sizes: at 32px a single long compound such as
   "Datenschutzerklärung" is wider than the 320px content column. */
@media (max-width: 400px) {
  :root {
    --jjw-h1: 28px;
    --jjw-h2: 23px;
  }
}

/*
  Font note: production must load the real Outfit webfont (Google Fonts, 400 + 600,
  500 optional) per Kapitel 11 / offene Entscheidung "Webfont Outfit" in Kapitel 1.
  These mockups render with the documented fallback stack (system-ui / Segoe UI)
  because the Artifact preview sandbox blocks external font requests — visual
  proportions and hierarchy are accurate, the exact letterforms are not yet.
*/