/* ==========================================================================
   Arsh SEO — Design Tokens
   Colors, type, spacing, shadows. No layout, no content.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700&family=IBM+Plex+Mono:wght@500&family=Inter+Tight:wght@400;500&display=swap');

:root {
  /* --- Color ------------------------------------------------------------ */
  --ax-deep:      #08211F;
  --ax-deep-2:    #0E312D;
  --ax-saffron:   #FFC24B;
  --ax-mint:      #7EE3C1;
  --ax-bone:      #F6F2E9;
  --ax-muted:     #9FB3AE;

  --ax-bg:        var(--ax-deep);
  --ax-surface:   var(--ax-deep-2);
  --ax-text:      var(--ax-bone);
  --ax-text-dim:  var(--ax-muted);
  --ax-accent:    var(--ax-saffron);
  --ax-success:   var(--ax-mint);
  --ax-border:    rgba(246, 242, 233, 0.10);
  --ax-border-hi: rgba(255, 194, 75, 0.45);

  /* --- Type ------------------------------------------------------------- */
  --ax-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --ax-font-body:    'Inter Tight', system-ui, sans-serif;
  --ax-font-data:    'IBM Plex Mono', ui-monospace, monospace;

  --ax-h1:    clamp(2.25rem, 1.30rem + 4.20vw, 4.50rem);
  --ax-h2:    clamp(1.75rem, 1.20rem + 2.45vw, 3.05rem);
  --ax-h3:    clamp(1.30rem, 1.05rem + 1.10vw, 1.90rem);
  --ax-h4:    clamp(1.12rem, 1.00rem + 0.55vw, 1.40rem);
  --ax-h5:    clamp(1.02rem, 0.96rem + 0.28vw, 1.18rem);
  --ax-h6:    clamp(0.94rem, 0.90rem + 0.18vw, 1.05rem);
  --ax-body:  clamp(1.00rem, 0.95rem + 0.22vw, 1.12rem);
  --ax-small: clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem);
  --ax-stat:  clamp(2.40rem, 1.60rem + 3.60vw, 4.40rem);

  --ax-lh-tight: 1.05;
  --ax-lh-head:  1.15;
  --ax-lh-body:  1.65;
  --ax-track-head: -0.02em;
  --ax-track-eyebrow: 0.14em;

  /* --- Spacing (8px base) ------------------------------------------------ */
  --ax-s1: 0.5rem;
  --ax-s2: 1rem;
  --ax-s3: 1.5rem;
  --ax-s4: 2rem;
  --ax-s5: 3rem;
  --ax-s6: 4rem;
  --ax-s7: 6rem;
  --ax-s8: 8rem;

  /* --- Radius ----------------------------------------------------------- */
  --ax-r-sm:   8px;
  --ax-r:      14px;
  --ax-r-lg:   22px;
  --ax-r-pill: 999px;

  /* --- Elevation (teal-tinted, never grey) ------------------------------- */
  --ax-e1: 0 1px 2px rgba(4, 20, 18, 0.28), 0 2px 6px rgba(4, 20, 18, 0.18);
  --ax-e2: 0 4px 10px rgba(4, 20, 18, 0.32), 0 12px 28px rgba(4, 20, 18, 0.24);
  --ax-e3: 0 10px 24px rgba(4, 20, 18, 0.38), 0 28px 60px rgba(4, 20, 18, 0.32);
  --ax-e-accent: 0 8px 26px rgba(255, 194, 75, 0.22);

  /* --- Motion ----------------------------------------------------------- */
  --ax-dur-fast: 180ms;
  --ax-dur:      320ms;
  --ax-dur-slow: 620ms;
  --ax-ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ax-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Glass ------------------------------------------------------------ */
  --ax-glass-bg: rgba(14, 49, 45, 0.92);
}

@supports (backdrop-filter: blur(12px)) {
  :root { --ax-glass-bg: rgba(14, 49, 45, 0.62); }
  .ax-glass { backdrop-filter: blur(14px) saturate(140%); }
}

.ax-glass {
  background: var(--ax-glass-bg);
  border: 1px solid var(--ax-border);
}

/* --- Light section (bone background, dark text) --------------------------- */
.ax-light {
  --ax-bg:       var(--ax-bone);
  --ax-surface:  #FFFFFF;
  --ax-text:     var(--ax-deep);
  --ax-text-dim: #5E7570;
  --ax-border:   rgba(8, 33, 31, 0.12);
  --ax-e1: 0 1px 2px rgba(8, 33, 31, 0.06), 0 2px 6px rgba(8, 33, 31, 0.05);
  --ax-e2: 0 4px 10px rgba(8, 33, 31, 0.08), 0 12px 28px rgba(8, 33, 31, 0.07);
  --ax-e3: 0 10px 24px rgba(8, 33, 31, 0.10), 0 28px 60px rgba(8, 33, 31, 0.10);
  background: var(--ax-bg);
  color: var(--ax-text);
}

/* --- Utility classes ------------------------------------------------------ */
.ax-display  { font-family: var(--ax-font-display); font-weight: 700; line-height: var(--ax-lh-head); letter-spacing: var(--ax-track-head); }
.ax-data     { font-family: var(--ax-font-data); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ax-stat     { font-family: var(--ax-font-data); font-weight: 500; font-size: var(--ax-stat); line-height: var(--ax-lh-tight); font-variant-numeric: tabular-nums; }
.ax-eyebrow  { font-family: var(--ax-font-data); font-weight: 500; font-size: var(--ax-small); text-transform: uppercase; letter-spacing: var(--ax-track-eyebrow); color: var(--ax-accent); }
.ax-dim      { color: var(--ax-text-dim); }
.ax-accent   { color: var(--ax-accent); }

.ax-card {
  background: var(--ax-surface);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r);
  box-shadow: var(--ax-e1);
  padding: var(--ax-s4);
}

.ax-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-s1);
  border-radius: var(--ax-r-pill);
  border: 1px solid var(--ax-border-hi);
  padding: 0.4em 1em;
  font-family: var(--ax-font-data);
  font-size: var(--ax-small);
  color: var(--ax-accent);
}

/* --- Focus (accessibility floor) ------------------------------------------ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ax-saffron);
  outline-offset: 3px;
  border-radius: var(--ax-r-sm);
}