/* ============================================================================
   Zoltan Gero brand system  tokens.css
   Single source of truth for color, type, spacing, radius, shadow, motion.

   How to use:
   1. Load Open Sans:
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap">
   2. Link this file on every page / template.
   3. Style everything through var(--...). Never hard-code a hex in a component.

   FINAL (2026-08-28, approved by Zoltan every element):
   - Readability rule: every button is a SOLID fill with WHITE text, min 4.5:1.
     No dark-text-on-mid-colour, no dark-on-dark.
   - Primary CTA = green #0E8542 (deep), white text (~4.7:1), green pulse.
   - Secondary button = azure #1663C6, white text (~5.8:1).
   - Brand azure #1E7CE8 = links, header, dark sections.
   - Font Open Sans, base 18px. Light is the active theme; dark tokens exist but
     Zoltan does not want the dark look shipped.
   ========================================================================== */

:root {
  /* --- Brand scale: azure (identity, links, dark sections, focus on brand) --- */
  --brand-50:  #EBF3FE;
  --brand-100: #D6E6FD;
  --brand-200: #B0CEFB;
  --brand-300: #82B0F7;
  --brand-400: #4F8DF0;
  --brand-500: #1E7CE8;   /* base brand */
  --brand-600: #1663C6;   /* brand hover, link on light */
  --brand-700: #144F9F;
  --brand-800: #163F7B;
  --brand-900: #15355F;   /* dark section background */
  --brand-950: #0E2038;   /* near-black navy: footer, CTA text, shadow tint */

  /* --- Accent scale: green (the action color: CTA, ring, progress, active).
         Anchored on #12A150, the green Zoltan picked. --- */
  --accent-50:  #E4F5EA;
  --accent-100: #BFE8CC;
  --accent-200: #8DD5A6;
  --accent-300: #56BE7B;
  --accent-400: #24A957;   /* bright green */
  --accent-500: #12A150;   /* base accent  primary CTA fill */
  --accent-600: #0E8542;   /* CTA hover */
  --accent-700: #0C6A36;   /* green that carries white text (AA) */
  --accent-800: #0C5430;
  --accent-900: #0A4228;

  /* --- Neutral scale: blue-biased grey (90% of every surface) --- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6F8FC;   /* page ground, not pure white */
  --neutral-100: #EDF1F7;   /* alt surface, rails */
  --neutral-200: #E0E6F0;   /* border */
  --neutral-300: #CAD3E1;   /* strong border, input outline */
  --neutral-400: #97A3B8;   /* placeholder, disabled text */
  --neutral-500: #6A7688;   /* secondary text */
  --neutral-600: #4C5768;   /* labels, meta */
  --neutral-700: #333D4C;
  --neutral-800: #1E2733;   /* primary body text on light (not #000) */
  --neutral-900: #131A24;

  /* --- Semantic (separate from the accent hue) --- */
  --success:    #0B7A3E;  --success-surface: #E3F3E8;  /* deeper than the accent so a green button != "success" */
  --warning:    #E5A400;  --warning-surface: #FBF2DD;
  --danger:     #E5484D;  --danger-surface:  #FCECED;
  --info:       var(--brand-600);

  /* --- Role tokens (light). Components read only these, never the scales. --- */
  --background:          var(--neutral-50);
  --foreground:          var(--neutral-800);
  --surface:             var(--neutral-0);
  --surface-foreground:  var(--neutral-800);
  --surface-alt:         var(--neutral-100);
  --muted:               var(--neutral-100);
  --muted-foreground:    var(--neutral-500);

  --primary:             var(--accent-600);   /* deep green CTA (#0E8542), white text ~4.7:1 */
  --primary-hover:       var(--accent-700);
  --primary-foreground:  var(--neutral-0);

  --secondary:           var(--brand-600);    /* deep azure (#1663C6), white text ~5.8:1 */
  --secondary-hover:     var(--brand-700);
  --secondary-foreground: var(--neutral-0);

  --link:                var(--brand-600);
  --link-hover:          var(--brand-700);

  --accent-surface:      var(--brand-50);     /* faint hover / highlight fill */
  --accent-surface-foreground: var(--brand-700);

  --border:              var(--neutral-200);
  --border-strong:       var(--neutral-300);
  --input:               var(--neutral-300);
  --ring:                var(--accent-600);   /* green focus ring, matches the CTA */

  /* --- Typography --- */
  --font-sans: "Open Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-display: "Open Sans", "Segoe UI", system-ui, sans-serif; /* optional: "Raleway" for headings only */
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* Base 18px (1.125rem on a 16px root). Scale ~1.22. */
  --text-xs:   0.8125rem;  --lh-xs:   1.125rem; --ls-xs:   0;      /* 13 */
  --text-sm:   0.9375rem;  --lh-sm:   1.375rem; --ls-sm:   0;      /* 15 */
  --text-base: 1.125rem;   --lh-base: 1.75rem;  --ls-base: 0;      /* 18 / 1.55 */
  --text-lg:   1.25rem;    --lh-lg:   1.85rem;  --ls-lg:   -0.006em; /* 20 */
  --text-xl:   1.375rem;   --lh-xl:   1.95rem;  --ls-xl:   -0.01em;  /* 22 */
  --text-2xl:  1.625rem;   --lh-2xl:  2.1rem;   --ls-2xl:  -0.012em; /* 26 */
  --text-3xl:  2rem;       --lh-3xl:  2.4rem;   --ls-3xl:  -0.016em; /* 32 */
  --text-4xl:  2.5rem;     --lh-4xl:  2.85rem;  --ls-4xl:  -0.02em;  /* 40 */
  --text-5xl:  3.125rem;   --lh-5xl:  3.35rem;  --ls-5xl:  -0.022em; /* 50 */
  --text-6xl:  3.875rem;   --lh-6xl:  4rem;     --ls-6xl:  -0.026em; /* 62 */
  --text-7xl:  4.625rem;   --lh-7xl:  4.75rem;  --ls-7xl:  -0.03em;  /* 74 */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --measure: 68ch;   /* max line length for running text */

  /* --- Spacing (4px base; only the steps we actually use) --- */
  --space-0: 0;
  --space-1: 0.125rem;   /* 2 */
  --space-2: 0.25rem;    /* 4 */
  --space-3: 0.5rem;     /* 8 */
  --space-4: 0.75rem;    /* 12 */
  --space-5: 1rem;       /* 16 */
  --space-6: 1.25rem;    /* 20 */
  --space-7: 1.5rem;     /* 24 */
  --space-8: 2rem;       /* 32 */
  --space-9: 2.5rem;     /* 40 */
  --space-10: 3rem;      /* 48 */
  --space-12: 4rem;      /* 64 */
  --space-14: 5rem;      /* 80 */
  --space-16: 6rem;      /* 96 */
  --space-20: 8rem;      /* 128 */

  --container: 1200px;
  --container-prose: 720px;
  --gutter: 1.25rem;    /* 20 desktop */
  --gutter-mobile: 1rem; /* 16 mobile */

  /* Section rhythm  mobile-first, deliberately tighter than LeadGenJay desktop.
     Use --section-y for vertical section padding; bump up at >=768px only. */
  --section-y: 2.5rem;        /* 40 mobile */
  --section-y-lg: 4rem;       /* 64 desktop */
  --block-gap: 1.25rem;       /* 20  gap between cards/blocks */

  /* --- Radius --- */
  --radius-sm: 6px;    /* badge, tag */
  --radius-md: 10px;   /* button, input */
  --radius-lg: 12px;   /* card  base --radius */
  --radius-xl: 16px;   /* panel, modal */
  --radius-2xl: 24px;  /* hero media, feature block */
  --radius-full: 9999px;
  --radius: var(--radius-lg);

  /* --- Border width --- */
  --border-width: 1px;

  /* --- Shadow (navy-tinted, never pure black) --- */
  --shadow-xs: 0 1px 2px rgba(14, 32, 56, 0.06);
  --shadow-sm: 0 1px 3px rgba(14, 32, 56, 0.08), 0 1px 2px rgba(14, 32, 56, 0.04);
  --shadow-md: 0 4px 12px rgba(14, 32, 56, 0.08);
  --shadow-lg: 0 12px 28px rgba(14, 32, 56, 0.12);
  --shadow-cta: 0 6px 20px rgba(18, 161, 80, 0.30);   /* green halo, CTA only */

  /* --- Motion --- */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Decorative background (faint, breaks flat white) --- */
  --grid-line: rgba(224, 230, 240, 0.55);
  --hero-wash: linear-gradient(180deg, var(--brand-50) 0%, var(--neutral-50) 60%);
}

/* --- Dark theme tokens (defined, not yet activated by a toggle) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background:          var(--brand-950);
    --foreground:          #E7EDF6;
    --surface:             #122B49;
    --surface-foreground:  #E7EDF6;
    --surface-alt:         #15355F;
    --muted:               #17324F;
    --muted-foreground:    #9DB0C7;

    --primary:             var(--accent-300);   /* lighter green so it is not dark-on-dark */
    --primary-hover:       var(--accent-200);
    --primary-foreground:  var(--brand-950);

    --secondary:           var(--brand-400);
    --secondary-hover:     var(--brand-300);
    --secondary-foreground: var(--brand-950);

    --link:                var(--brand-300);
    --link-hover:          var(--brand-200);

    --accent-surface:      #17324F;
    --accent-surface-foreground: var(--brand-100);

    --border:              #24405F;
    --border-strong:       #335070;
    --input:               #2C4A6B;
    --ring:                var(--accent-400);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55);

    --grid-line: rgba(255, 255, 255, 0.05);
    --hero-wash: linear-gradient(180deg, #15355F 0%, var(--brand-950) 60%);
  }
}

:root[data-theme="dark"] {
  --background:          var(--brand-950);
  --foreground:          #E7EDF6;
  --surface:             #122B49;
  --surface-foreground:  #E7EDF6;
  --surface-alt:         #15355F;
  --muted:               #17324F;
  --muted-foreground:    #9DB0C7;
  --primary:             var(--accent-300);
  --primary-hover:       var(--accent-200);
  --primary-foreground:  var(--brand-950);
  --secondary:           var(--brand-400);
  --secondary-hover:     var(--brand-300);
  --secondary-foreground: var(--brand-950);
  --link:                var(--brand-300);
  --link-hover:          var(--brand-200);
  --accent-surface:      #17324F;
  --accent-surface-foreground: var(--brand-100);
  --border:              #24405F;
  --border-strong:       #335070;
  --input:               #2C4A6B;
  --ring:                var(--accent-400);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55);
  --grid-line: rgba(255, 255, 255, 0.05);
  --hero-wash: linear-gradient(180deg, #15355F 0%, var(--brand-950) 60%);
}

/* ============================================================================
   Optional base layer. Include if the page has no reset of its own.
   ========================================================================== */
.brand-base *, .brand-base *::before, .brand-base *::after { box-sizing: border-box; }
.brand-base {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
.brand-base h1, .brand-base h2, .brand-base h3 {
  font-family: var(--font-display);
  text-wrap: balance;
  font-weight: var(--weight-bold);
}

/* ============================================================================
   Component patterns (portable  copy into any page that links this file)
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-4) var(--space-7);
  border-radius: var(--radius-md);
  border: var(--border-width) solid transparent;
  font: inherit; font-weight: var(--weight-semibold);
  line-height: 1; cursor: pointer;
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-hover); box-shadow: var(--shadow-md); }

/* Secondary = azure fill, white text. The "other" action, used sparingly. */
.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--secondary-hover); box-shadow: var(--shadow-md); }

.btn-ghost { background: var(--surface); color: var(--foreground); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-alt); border-color: var(--neutral-400); }

/* Pulsing CTA  green halo ring, does not shift layout. */
.btn-pulse { position: relative; animation: cta-halo 2.4s var(--ease-out) infinite; }
@keyframes cta-halo {
  0%   { box-shadow: 0 0 0 0 rgba(18, 161, 80, 0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(18, 161, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 161, 80, 0); }
}
/* Alternative: breathing scale, HyperFrames 2% rule */
.btn-breathe { animation: cta-breathe 3s var(--ease-inout) infinite; }
@keyframes cta-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}

.btn .arrow { transition: transform var(--duration-base) var(--ease-standard); }
.btn:hover .arrow { transform: translateX(3px); }

.card {
  background: var(--surface); color: var(--surface-foreground);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.input {
  width: 100%; min-height: 44px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--input);
  background: var(--surface); color: var(--foreground);
  font: inherit;
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.input::placeholder { color: var(--neutral-400); }
.input:focus-visible {
  outline: none; border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(18, 161, 80, 0.22);
}

.badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: 0.02em; text-transform: uppercase;
  background: var(--accent-surface); color: var(--accent-surface-foreground);
}

a.link { color: var(--link); text-decoration: none; }
a.link:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }

hr.rule { border: 0; border-top: var(--border-width) solid var(--border); margin: var(--space-8) 0; }

@media (prefers-reduced-motion: reduce) {
  .btn-pulse, .btn-breathe { animation: none; }
  * { transition-duration: 0.01ms !important; }
}