/* AMIX Pro design tokens.
   Canonical source: planning/02-DESIGN-SYSTEM.md. Mirrored as WP presets in theme.json.
   Hand-written. Safe to edit. Never generated. */

:root {
  /* ---- Base: textured near-black from the flyer ---- */
  --ax-black-950: #070707;   /* page background darkest */
  --ax-black-900: #0D0D0D;   /* primary page background */
  --ax-black-800: #141414;   /* raised surfaces, cards */
  --ax-black-700: #1C1C1C;   /* higher surfaces, hover */
  --ax-black-600: #262626;   /* subtle borders on dark */

  /* ---- Gold: primary accent, from the logo gradient ---- */
  --ax-gold-700: #8A5E0A;
  --ax-gold-600: #B8860B;
  --ax-gold-500: #D4A017;    /* PRIMARY: buttons, links, icon strokes */
  --ax-gold-400: #F5C542;    /* hovers, heading accents */
  --ax-gold-300: #FFE47E;    /* highlight, gradient centre */
  --ax-gold-grad: linear-gradient(135deg, #8A5E0A 0%, #D4A017 35%, #FFE47E 50%, #D4A017 65%, #8A5E0A 100%);
  /* Vertical variant used by buttons in the approved designs. */
  --ax-gold-btn: linear-gradient(180deg, #F5C542 0%, #D4A017 55%, #8A5E0A 100%);
  /* Hairline rule that fades out at both ends, the flyer's section divider. */
  --ax-gold-rule: linear-gradient(90deg, transparent 0%, rgba(212,160,23,.55) 50%, transparent 100%);

  /* ---- Silver: secondary metallic, from the wordmark ---- */
  --ax-silver-500: #9A9A9E;
  --ax-silver-400: #C0C0C4;  /* secondary headings, eyebrow text */
  --ax-silver-300: #E8E8EA;
  --ax-silver-grad: linear-gradient(180deg, #F5F5F7 0%, #C0C0C4 45%, #8E8E93 55%, #DADADE 100%);

  /* ---- Text ---- */
  --ax-text:      #F5F2EA;   /* body, warm off-white */
  --ax-text-dim:  #B9B4A8;   /* secondary */
  --ax-text-mute: #7E7A70;   /* captions */

  /* ---- Status ---- */
  --ax-success: #7BC47F;
  --ax-error:   #E5484D;

  /* ---- Type ---- */
  --ax-font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --ax-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fixed sizes, not a fluid clamp: the designs specify a discrete value per
     page and per breakpoint, and a clamp cannot reproduce that. Home is 58px;
     the other pages override --ax-h1 in the media block at the bottom. */
  --ax-h1: 58px;
  --ax-h2: 34px;
  --ax-h2-cta: 38px;
  --ax-body: 16px;
  --ax-small: 13.5px;

  /* ---- Shape and spacing ---- */
  --ax-radius-sm: 8px;
  --ax-radius-md: 12px;
  --ax-radius-lg: 18px;
  --ax-radius-pill: 999px;

  --ax-container: 1180px;   /* section content */
  --ax-container-wide: 1280px;  /* header and footer bars */
  --ax-pad: 32px;
  --ax-header-h: 76px;

  /* ---- Motion ---- */
  --ax-ease: cubic-bezier(.22, .61, .36, 1);
  --ax-dur: 240ms;

  /* ---- Elevation: glows on dark, not drop shadows ---- */
  --ax-glow-gold: 0 0 24px rgba(212,160,23,.25);
  --ax-glow-gold-strong: 0 0 28px rgba(212,160,23,.5);
  --ax-shadow-card: 0 8px 30px rgba(0,0,0,.45);
}

/* The approved designs use exactly TWO breakpoints, 1119 and 659, and keep the
   header at 76px and the gutter at 32px until the small one. Matching them
   exactly rather than inventing a third step. */
@media (max-width: 1119px) {
  :root { --ax-h1: 38px; }
}
@media (max-width: 659px) {
  :root { --ax-h1: 27px; --ax-pad: 20px; }
}

/* Each page's hero headline has its own size in the designs. Only the desktop
   value differs; below 1120 they all collapse to the same 38px then 27px. */
@media (min-width: 1120px) {
  body.ax-page-about            { --ax-h1: 48px; }
  body.ax-page-insights         { --ax-h1: 46px; }
  body.ax-page-contact          { --ax-h1: 44px; }
  body.ax-page-individual-taxes { --ax-h1: 42px; }
  body.ax-page-business-taxes   { --ax-h1: 40px; }
  body.ax-page-article          { --ax-h1: 36px; }
}

/* ---------- Base reset scoped to the front end ---------- */

/* WordPress does not set this globally, and without it any element given
   width:100% adds its padding on top. That pushed the full-width mobile
   buttons (34px of padding each side) past the viewport and gave the whole
   document a horizontal scrollbar at 390px. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ax-black-900);
  color: var(--ax-text);
  font-family: var(--ax-font-body);
  font-size: 16px;
  line-height: 1.65;
  /* WordPress' global styles apply a slight negative tracking AND drop body
     copy to weight 300. The designs use normal tracking at weight 400. Left
     alone, every paragraph on the site renders a shade too light and too
     narrow, which even changes where the text wraps. */
  letter-spacing: normal;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The flyer's sandpaper black. A fixed, non-interactive noise layer over the
   whole page. Never a flat pure black background. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Everything real sits above the grain. */
.wp-site-blocks { position: relative; z-index: 2; }

a { color: var(--ax-gold-500); text-decoration: none; transition: color var(--ax-dur) var(--ax-ease); }
a:hover { color: var(--ax-gold-400); }

::selection { background: rgba(212,160,23,.3); }

img { max-width: 100%; height: auto; }

/* Gold focus ring, visible on every dark surface. Keyboard only. */
:focus-visible {
  outline: 2px solid var(--ax-gold-400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Playbook gotcha G1: any element toggled by the [hidden] attribute needs this
   guard, or an author display rule beats the UA rule and it never hides. */
[hidden] { display: none !important; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}