/* ==========================================================================
   Mad Genius Consulting — theme.css
   Design-system foundation: tokens + base reset.
   Values are concrete here because spec 02A8 defines palette/type DIRECTION
   only (no hex/px/fonts). Colors are anchored to the brand logo:
   navy #0D1B2A (monogram "M") + accent blue #2563EB (monogram "G").
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --mg-navy:        #0D1B2A;  /* primary dark / headings on light           */
  --mg-navy-800:    #0A1622;  /* deepest — hero gradient base               */
  --mg-navy-700:    #13243A;  /* raised dark surface                        */
  --mg-navy-600:    #1D3352;  /* borders / dividers on dark                 */

  --mg-accent:      #2563EB;  /* accent blue (logo "G")                     */
  --mg-accent-600:  #1E4FD6;  /* accent hover                               */
  --mg-accent-300:  #6EA0FF;  /* accent on dark backgrounds                 */

  --mg-charcoal:    #1F2937;  /* primary body text on light                 */
  --mg-gray-600:    #4B5563;  /* secondary text                            */
  --mg-gray-500:    #6B7280;  /* muted text / captions                     */
  --mg-gray-400:    #9CA3AF;  /* subtle text on dark                       */

  --mg-white:       #FFFFFF;
  --mg-silver:      #F5F7FA;  /* light section background                   */
  --mg-silver-200:  #E6ECF3;  /* hairline borders on light                 */

  --mg-emerald:     #059669;  /* positive / success                        */
  --mg-amber:       #D97706;  /* notification                              */
  --mg-red:         #DC2626;  /* error                                     */

  /* ---- Semantic aliases ------------------------------------------------- */
  --color-bg:            var(--mg-white);
  --color-bg-alt:        var(--mg-silver);
  --color-bg-dark:       var(--mg-navy);
  --color-surface:       var(--mg-white);
  --color-text:          var(--mg-charcoal);
  --color-text-muted:    var(--mg-gray-500);
  --color-heading:       var(--mg-navy);
  --color-accent:        var(--mg-accent);
  --color-accent-hover:  var(--mg-accent-600);
  --color-border:        var(--mg-silver-200);
  --color-on-dark:       #DCE4EF;
  --color-heading-dark:  var(--mg-white);

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI Variable Text", "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --fs-100: 0.75rem;   /* 12px — eyebrow / meta            */
  --fs-200: 0.875rem;  /* 14px — small / captions         */
  --fs-300: 1rem;      /* 16px — body (base)              */
  --fs-400: 1.125rem;  /* 18px — lead body                */
  --fs-500: 1.25rem;   /* 20px — h4                       */
  --fs-600: clamp(1.35rem, 1.15rem + 0.9vw, 1.6rem);   /* h3 */
  --fs-700: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);   /* h2 */
  --fs-800: clamp(2.25rem, 1.55rem + 3vw, 3.5rem);     /* h1 */

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --tracking-wide:  0.02em;
  --tracking-wider: 0.14em;  /* uppercase eyebrows / wordmark feel */

  /* ---- Spacing scale (4px base) ---------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---- Layout ----------------------------------------------------------- */
  --container:        1200px;
  --container-narrow: 820px;
  --gutter:           clamp(1.25rem, 4vw, 2.5rem);
  --header-h:         72px;

  /* ---- Radius & elevation ---------------------------------------------- */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.06);
  --shadow:    0 6px 20px rgba(13, 27, 42, 0.08);
  --shadow-lg: 0 20px 45px rgba(13, 27, 42, 0.14);

  /* ---- Motion ----------------------------------------------------------- */
  --transition: 180ms ease;

  /* Reference breakpoints (used literally in main.css media queries):
     mobile <640px · tablet 640–1024px · desktop >1024px */
}

/* ==========================================================================
   Base reset
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keep in-page anchor targets clear of the sticky header (JS + no-JS paths) */
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-4);
  color: var(--color-heading);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-800); line-height: 1.08; letter-spacing: -0.022em; }
h2 { font-size: var(--fs-700); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-600); }
h4 { font-size: var(--fs-500); font-weight: var(--fw-semibold); letter-spacing: -0.005em; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

img, svg { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; }

button { font: inherit; cursor: pointer; }

/* Visible focus for keyboard users (WCAG 2.2 AA) */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Programmatic scroll targets (main / sections focused via JS) show no box */
main:focus,
section:focus { outline: none; }

/* Respect reduced-motion preference globally */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Accessible skip link */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background: var(--mg-navy);
  color: var(--mg-white);
  border-radius: var(--radius-sm);
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-4); color: var(--mg-white); text-decoration: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}