/* ============================================================
   AG DESIGN TOKENS
   Single source of truth for all design decisions.
   Import this file first in every context.
   ============================================================ */

/* ------------------------------------------------------------
   BRAND FONT — Inter (variable, locally hosted)
   Supplied by the brand. Do not swap for Google Fonts CDN.
------------------------------------------------------------ */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("../fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
  font-variation-settings: "opsz" 16;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("../fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype");
  font-variation-settings: "opsz" 16;
}

:root {

  /* ----------------------------------------------------------
     BRAND COLORS
  ---------------------------------------------------------- */
  --ag-brand-1:      #35376D;   /* deep navy */
  --ag-brand-2:      #3F4BA3;   /* mid blue */
  --ag-brand-3:      #4C67C9;   /* bright blue */
  --ag-accent:       #F4EDDC;   /* warm cream */

  /* ----------------------------------------------------------
     GRADIENTS
  ---------------------------------------------------------- */
  --ag-gradient:         linear-gradient(135deg, var(--ag-brand-1) 0%, var(--ag-brand-2) 45%, var(--ag-brand-3) 100%);
  --ag-gradient-soft:    hsla(230, 70%, 60%, 0.10);
  --ag-gradient-text:    linear-gradient(135deg, var(--ag-brand-1) 0%, var(--ag-brand-2) 45%, var(--ag-brand-3) 100%); /* kept for bg use only — text accent is now cream underline via .ag-gradient-text */

  /* ----------------------------------------------------------
     SEMANTIC COLOR ROLES
  ---------------------------------------------------------- */
  --ag-color-text:        hsl(222 28% 14%);
  --ag-color-text-muted:  hsl(220 12% 40%);  /* Darkened: was 46% → ~4.3:1 on white, now ~5.7:1 — WCAG AA */
  --ag-color-heading:     hsl(222 28% 18%);
  --ag-color-link:        var(--ag-brand-2);

  --ag-color-bg:          #ffffff;
  --ag-color-bg-alt:      hsl(220 15% 96%);
  --ag-color-bg-dark:     hsl(220 30% 10%);

  --ag-color-surface:     #ffffff;
  --ag-color-surface-soft: hsl(220 20% 97%);
  --ag-color-surface-icon: hsla(230, 70%, 60%, 0.10);

  --ag-color-border:      hsl(220 14% 88% / 0.9);
  --ag-color-border-dark: hsl(0 0% 100% / 0.12);

  /* ----------------------------------------------------------
     TYPOGRAPHY
  ---------------------------------------------------------- */
  --ag-font-heading:   "Inter", system-ui, -apple-system, sans-serif;
  --ag-font-body:      "Inter", system-ui, -apple-system, sans-serif;

  --ag-text-xs:    0.75rem;    /* 12px */
  --ag-text-sm:    0.875rem;   /* 14px */
  --ag-text-base:  1rem;       /* 16px */
  --ag-text-md:    1.0625rem;  /* 17px */
  --ag-text-lg:    1.125rem;   /* 18px */
  --ag-text-xl:    1.25rem;    /* 20px */
  --ag-text-2xl:   1.5rem;     /* 24px */
  --ag-text-3xl:   1.875rem;   /* 30px */
  --ag-text-4xl:   2.25rem;    /* 36px */

  --ag-leading-tight:   1.15;
  --ag-leading-snug:    1.35;
  --ag-leading-normal:  1.6;
  --ag-leading-relaxed: 1.75;

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

  /* ----------------------------------------------------------
     SPACING SCALE
  ---------------------------------------------------------- */
  --ag-space-1:   0.25rem;   /* 4px  */
  --ag-space-2:   0.5rem;    /* 8px  */
  --ag-space-3:   0.75rem;   /* 12px */
  --ag-space-4:   1rem;      /* 16px */
  --ag-space-5:   1.25rem;   /* 20px */
  --ag-space-6:   1.5rem;    /* 24px */
  --ag-space-8:   2rem;      /* 32px */
  --ag-space-10:  2.5rem;    /* 40px */
  --ag-space-12:  3rem;      /* 48px */
  --ag-space-16:  4rem;      /* 64px */
  --ag-space-20:  5rem;      /* 80px */
  --ag-space-24:  6rem;      /* 96px */
  --ag-space-32:  8rem;      /* 128px */

  /* Section padding */
  --ag-section-py:      6rem;    /* default top/bottom */
  --ag-section-py-sm:   4rem;    /* mobile */
  --ag-section-py-lg:   8rem;    /* hero / feature sections */

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */
  --ag-container:       1120px;
  --ag-container-wide:  1280px;
  --ag-container-narrow: 760px;
  --ag-gutter:          1.5rem;   /* 24px */

  /* ----------------------------------------------------------
     BORDER RADIUS
  ---------------------------------------------------------- */
  --ag-radius-sm:   0.5rem;    /* 8px  */
  --ag-radius-md:   0.75rem;   /* 12px */
  --ag-radius-lg:   1rem;      /* 16px */
  --ag-radius-xl:   1.25rem;   /* 20px */
  --ag-radius-2xl:  1.5rem;    /* 24px */
  --ag-radius-full: 9999px;

  /* ----------------------------------------------------------
     SHADOWS
  ---------------------------------------------------------- */
  --ag-shadow-xs:  0 1px 3px rgba(26,27,46,.05), 0 2px 8px rgba(26,27,46,.04);
  --ag-shadow-sm:  0 2px 6px rgba(26,27,46,.05), 0 10px 28px rgba(26,27,46,.09);
  --ag-shadow-md:  0 4px 12px rgba(26,27,46,.07), 0 18px 48px rgba(26,27,46,.11);
  --ag-shadow-lg:  0 8px 24px rgba(26,27,46,.09), 0 28px 64px rgba(26,27,46,.14);
  --ag-shadow-xl:  0 16px 40px rgba(26,27,46,.12), 0 40px 90px rgba(26,27,46,.18);

  /* ----------------------------------------------------------
     TRANSITIONS
  ---------------------------------------------------------- */
  --ag-transition-fast:   0.15s ease;
  --ag-transition-base:   0.25s ease;
  --ag-transition-slow:   0.4s ease;
  --ag-transition-spring: 0.65s cubic-bezier(0.16, 1, 0.3, 1);

  /* ----------------------------------------------------------
     Z-INDEX SCALE
  ---------------------------------------------------------- */
  --ag-z-base:    0;
  --ag-z-raised:  10;
  --ag-z-overlay: 100;
  --ag-z-modal:   500;
  --ag-z-header:  900;   /* sticky nav header */
  --ag-z-drawer:  1000;  /* mobile off-canvas drawer */

  /* ----------------------------------------------------------
     ICON SIZES
  ---------------------------------------------------------- */
  --ag-icon-xs:   1rem;      /* 16px */
  --ag-icon-sm:   1.25rem;   /* 20px */
  --ag-icon-md:   1.5rem;    /* 24px */
  --ag-icon-lg:   1.75rem;   /* 28px */
  --ag-icon-xl:   2rem;      /* 32px */

}

/* Mobile overrides */
@media (max-width: 768px) {
  :root {
    --ag-gutter:      1rem;
    --ag-section-py:  var(--ag-section-py-sm);
  }
}

/* ----------------------------------------------------------
   SMOOTH SCROLL + ANCHOR OFFSET
   Offset accounts for sticky header height
---------------------------------------------------------- */
:root { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
}

html {
  scroll-padding-top: 82px; /* sticky header: 3px accent + 68px bar + 11px breathing room */
}

/* ----------------------------------------------------------
   FLUID TYPOGRAPHY SCALE
   Headings scale fluidly between mobile and desktop.
   Use these on h1/h2/h3 directly or via utility classes.
---------------------------------------------------------- */
:root {
  --ag-fluid-h1: clamp(2.25rem, 5vw + 0.5rem, 4rem);
  --ag-fluid-h2: clamp(1.75rem, 3.5vw + 0.25rem, 2.75rem);
  --ag-fluid-h3: clamp(1.25rem, 2vw + 0.25rem, 1.75rem);
  --ag-fluid-lead: clamp(1rem, 1.5vw + 0.25rem, 1.25rem);
}

/* ----------------------------------------------------------
   CURSOR GLOW
   Radial gradient that follows mouse — shown on desktop only
---------------------------------------------------------- */
:root {
  --ag-cursor-x: 50%;
  --ag-cursor-y: 50%;
}

@media (pointer: fine) {
  .ag-cursor-glow::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: radial-gradient(
      600px circle at var(--ag-cursor-x) var(--ag-cursor-y),
      hsla(230, 70%, 65%, 0.05) 0%,
      transparent 70%
    );
    transition: background 0.1s ease;
  }
}