/* GA-Coach Design System — Foundations
   Use this file as the single source of truth for colors + type.
   Inspired by VDI 3814 systematic thinking: clear hierarchy, modular blocks.
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- Brand Colors ---------- */
  --ga-primary:        #2F58A4;   /* RGB 47/88/164  — primary brand blue (PANTONE) */
  --ga-primary-700:    #244786;   /* darker hover/press */
  --ga-primary-900:    #16294f;   /* deep navy for backgrounds (from artworks) */
  --ga-primary-050:    #eaf0fa;   /* tinted surface */

  --ga-secondary:      #90BAE5;   /* light brand blue for cards / hover surfaces */
  --ga-secondary-200:  #c4dbf0;   /* even lighter, for chips / inactive states */
  --ga-secondary-700:  #5c8cc1;

  /* Accents lifted from marketing artwork (used sparingly) */
  --ga-accent-amber:   #F5A524;   /* Werkstatt orange — for warnings / highlights */
  --ga-accent-yellow:  #FFD83D;   /* CTA flag color */
  --ga-accent-cyan:    #4FC3D9;   /* circuit-line glow */

  /* ---------- Neutrals ---------- */
  --ga-white:          #FFFFFF;
  --ga-bg:             #FFFFFF;   /* preferred main background */
  --ga-section:        #F5F7FA;   /* alternating section background */
  --ga-line:           #E2E8F0;   /* hairlines / borders */
  --ga-line-strong:    #C9D3DF;
  --ga-muted:          #6B7280;   /* secondary text */
  --ga-text:           #1A1A1A;   /* primary text */
  --ga-text-soft:      #2c2f36;

  /* Semantic */
  --ga-fg-1:           var(--ga-text);
  --ga-fg-2:           var(--ga-muted);
  --ga-fg-on-primary:  #FFFFFF;
  --ga-bg-1:           var(--ga-bg);
  --ga-bg-2:           var(--ga-section);
  --ga-bg-dark:        var(--ga-primary-900);

  --ga-success:        #10B981;
  --ga-warning:        #F5A524;
  --ga-danger:         #DC2626;
  --ga-info:           var(--ga-primary);

  /* ---------- Type ---------- */
  --ga-font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --ga-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — modular, slightly tighter than default */
  --ga-fs-display: 56px;   /* hero */
  --ga-fs-h1:      40px;
  --ga-fs-h2:      30px;
  --ga-fs-h3:      22px;
  --ga-fs-h4:      18px;
  --ga-fs-body:    16px;
  --ga-fs-small:   14px;
  --ga-fs-caption: 12px;

  --ga-lh-tight:   1.15;
  --ga-lh-snug:    1.3;
  --ga-lh-body:    1.55;
  --ga-lh-relaxed: 1.7;

  --ga-fw-regular: 400;
  --ga-fw-medium:  500;
  --ga-fw-semi:    600;
  --ga-fw-bold:    700;
  --ga-fw-black:   800;

  /* tracking */
  --ga-tracking-tight: -0.01em;
  --ga-tracking-normal: 0;
  --ga-tracking-wide: 0.04em;
  --ga-tracking-caps: 0.08em;

  /* ---------- Spacing (8px grid) ---------- */
  --ga-space-1:  4px;
  --ga-space-2:  8px;
  --ga-space-3:  12px;
  --ga-space-4:  16px;
  --ga-space-5:  24px;
  --ga-space-6:  32px;
  --ga-space-7:  48px;
  --ga-space-8:  64px;
  --ga-space-9:  96px;

  /* ---------- Radii ---------- */
  --ga-r-sm:  6px;
  --ga-r-md:  10px;
  --ga-r-lg:  16px;
  --ga-r-xl:  24px;
  --ga-r-pill: 999px;

  /* ---------- Shadows / Elevation ---------- */
  --ga-shadow-1: 0 1px 2px rgba(22, 41, 79, 0.06), 0 1px 1px rgba(22, 41, 79, 0.04);
  --ga-shadow-2: 0 4px 12px rgba(22, 41, 79, 0.08), 0 1px 3px rgba(22, 41, 79, 0.06);
  --ga-shadow-3: 0 12px 32px rgba(22, 41, 79, 0.12), 0 4px 8px rgba(22, 41, 79, 0.06);
  --ga-shadow-focus: 0 0 0 3px rgba(47, 88, 164, 0.25);

  /* Borders */
  --ga-border-1: 1px solid var(--ga-line);
  --ga-border-2: 1px solid var(--ga-line-strong);
  --ga-border-primary: 1px solid var(--ga-primary);

  /* Layout */
  --ga-container: 1200px;
  --ga-gutter: 24px;
}

/* ---------- Base ---------- */
html, body {
  font-family: var(--ga-font-sans);
  font-size: var(--ga-fs-body);
  line-height: var(--ga-lh-body);
  color: var(--ga-fg-1);
  background: var(--ga-bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Semantic type roles ---------- */
.ga-display, h1.ga-display {
  font-size: var(--ga-fs-display);
  font-weight: var(--ga-fw-black);
  line-height: var(--ga-lh-tight);
  letter-spacing: var(--ga-tracking-tight);
  color: var(--ga-primary);
}
.ga-h1, h1 {
  font-size: var(--ga-fs-h1);
  font-weight: var(--ga-fw-bold);
  line-height: var(--ga-lh-tight);
  letter-spacing: var(--ga-tracking-tight);
  color: var(--ga-primary);
}
.ga-h2, h2 {
  font-size: var(--ga-fs-h2);
  font-weight: var(--ga-fw-bold);
  line-height: var(--ga-lh-snug);
  color: var(--ga-fg-1);
}
.ga-h3, h3 {
  font-size: var(--ga-fs-h3);
  font-weight: var(--ga-fw-semi);
  line-height: var(--ga-lh-snug);
  color: var(--ga-fg-1);
}
.ga-h4, h4 {
  font-size: var(--ga-fs-h4);
  font-weight: var(--ga-fw-semi);
  line-height: var(--ga-lh-snug);
  color: var(--ga-fg-1);
}
.ga-body, p {
  font-size: var(--ga-fs-body);
  font-weight: var(--ga-fw-regular);
  line-height: var(--ga-lh-body);
  color: var(--ga-fg-1);
}
.ga-small  { font-size: var(--ga-fs-small); color: var(--ga-fg-2); }
.ga-caption{ font-size: var(--ga-fs-caption); color: var(--ga-fg-2); letter-spacing: var(--ga-tracking-wide); }
.ga-eyebrow{
  font-size: var(--ga-fs-caption);
  font-weight: var(--ga-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ga-tracking-caps);
  color: var(--ga-primary);
}
.ga-mono   { font-family: var(--ga-font-mono); }