/* ==========================================================================
   AG Telecom — Phoenix | tokens.css
   Generated from specs/design-tokens.json v1.0.0 (2026-08-17).
   This file is the ONLY place raw token values may appear; every other
   stylesheet must reference var(--ag-*). Do not edit values here without
   updating specs/design-tokens.json first.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Color — Brand core
     ------------------------------------------------------------------ */
  --ag-navy: #0A192F;            /* color.brand.navy — page background */
  --ag-surface: #112240;         /* color.brand.surface — cards/elevated surfaces */
  --ag-surface-raised: #1A3055;  /* color.brand.surfaceRaised — highest elevation */
  --ag-blue: #176FC0;            /* color.brand.blue — primary interactive accent */
  --ag-lime: #94D222;            /* color.brand.lime — sustainability/CTA accent */

  /* ------------------------------------------------------------------
     Color — Interactive states
     ------------------------------------------------------------------ */
  --ag-blue-hover: #2E86DB;                  /* color.interactive.blueHover */
  --ag-blue-active: #0F579E;                 /* color.interactive.blueActive */
  --ag-blue-subtle: rgba(23, 111, 192, 0.16); /* color.interactive.blueSubtle */
  --ag-lime-hover: #A8E13C;                  /* color.interactive.limeHover */
  --ag-lime-active: #7AB31A;                 /* color.interactive.limeActive */
  --ag-lime-subtle: rgba(148, 210, 34, 0.14); /* color.interactive.limeSubtle */

  /* ------------------------------------------------------------------
     Color — Semantic
     ------------------------------------------------------------------ */
  --ag-success: #4CC38A;                    /* color.semantic.success */
  --ag-success-subtle: rgba(76, 195, 138, 0.14);
  --ag-warning: #F0B429;                    /* color.semantic.warning */
  --ag-warning-subtle: rgba(240, 180, 41, 0.14);
  --ag-error: #E5484D;                      /* color.semantic.error */
  --ag-error-subtle: rgba(229, 72, 77, 0.14);
  --ag-info: #52A8E8;                       /* color.semantic.info */
  --ag-info-subtle: rgba(82, 168, 232, 0.14);

  /* ------------------------------------------------------------------
     Color — Text
     ------------------------------------------------------------------ */
  --ag-text-primary: #E6EDF7;   /* color.text.primary */
  --ag-text-secondary: #A8B8D0; /* color.text.secondary */
  --ag-text-muted: #6B7FA0;     /* color.text.muted */
  --ag-text-inverse: #0A192F;   /* color.text.inverse — on lime/blue fills only */
  --ag-text-accent-blue: #5E9FE6; /* color.text.accentBlue */
  --ag-text-accent-lime: #B0E64A; /* color.text.accentLime */

  /* ------------------------------------------------------------------
     Color — Borders
     ------------------------------------------------------------------ */
  --ag-border: rgba(168, 184, 208, 0.16);      /* color.border.default */
  --ag-border-strong: rgba(168, 184, 208, 0.32); /* color.border.strong */
  --ag-border-blue: rgba(23, 111, 192, 0.55);  /* color.border.blue */
  --ag-border-lime: rgba(148, 210, 34, 0.55);  /* color.border.lime */

  /* ------------------------------------------------------------------
     Color — Overlays
     ------------------------------------------------------------------ */
  --ag-scrim: rgba(5, 12, 24, 0.72); /* color.overlay.scrim */
  --ag-hero-gradient: linear-gradient(180deg, rgba(10, 25, 47, 0) 0%, rgba(10, 25, 47, 0.92) 100%); /* color.overlay.heroGradient */
  --ag-surface-glass: rgba(17, 34, 64, 0.78); /* color.overlay.surfaceGlass */

  /* ------------------------------------------------------------------
     Typography — Font families
     ------------------------------------------------------------------ */
  --ag-font-display: 'Sora', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ag-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ------------------------------------------------------------------
     Typography — Scale (mobile-first; step up at md via media queries)
     ------------------------------------------------------------------ */
  --ag-text-display: 44px;   /* typography.scale.display — 72px at md */
  --ag-text-h1: 36px;        /* typography.scale.h1 — 56px at md */
  --ag-text-h2: 30px;        /* typography.scale.h2 — 40px at md */
  --ag-text-h3: 24px;        /* typography.scale.h3 — 30px at md */
  --ag-text-h4: 20px;        /* typography.scale.h4 — 24px at md */
  --ag-text-h5: 18px;        /* typography.scale.h5 — 20px at md */
  --ag-text-h6: 16px;        /* typography.scale.h6 */
  --ag-text-body-large: 18px; /* typography.scale.bodyLarge — 20px at md */
  --ag-text-body: 16px;      /* typography.scale.body */
  --ag-text-small: 14px;     /* typography.scale.small */
  --ag-text-label: 12px;     /* typography.scale.label */
  --ag-text-caption: 12px;   /* typography.scale.caption */

  /* ------------------------------------------------------------------
     Spacing (4px base)
     ------------------------------------------------------------------ */
  --ag-space-2xs: 0.25rem; /* 4px */
  --ag-space-xs: 0.5rem;   /* 8px */
  --ag-space-sm: 0.75rem;  /* 12px */
  --ag-space-md: 1rem;     /* 16px */
  --ag-space-lg: 1.5rem;   /* 24px */
  --ag-space-xl: 2rem;     /* 32px */
  --ag-space-2xl: 3rem;    /* 48px */
  --ag-space-3xl: 4rem;    /* 64px */
  --ag-space-section: 4rem; /* spacing.section — 64px mobile, 96px at md */

  /* ------------------------------------------------------------------
     Radii
     ------------------------------------------------------------------ */
  --ag-radius-sm: 0.375rem; /* 6px */
  --ag-radius-md: 0.75rem;  /* 12px */
  --ag-radius-lg: 1rem;     /* 16px */
  --ag-radius-xl: 1.5rem;   /* 24px */
  --ag-radius-full: 9999px;

  /* ------------------------------------------------------------------
     Shadows / elevation
     ------------------------------------------------------------------ */
  --ag-shadow-sm: 0 1px 2px rgba(3, 8, 18, 0.4);
  --ag-shadow-md: 0 8px 24px rgba(3, 8, 18, 0.45);
  --ag-shadow-lg: 0 16px 40px rgba(3, 8, 18, 0.55);
  --ag-shadow-glow-blue: 0 0 0 1px rgba(23, 111, 192, 0.4), 0 12px 40px -12px rgba(23, 111, 192, 0.55);
  --ag-shadow-glow-lime: 0 0 0 1px rgba(148, 210, 34, 0.4), 0 12px 40px -12px rgba(148, 210, 34, 0.45);

  /* ------------------------------------------------------------------
     Breakpoints (reference only; used in media queries below and by JS)
     ------------------------------------------------------------------ */
  --ag-bp-sm: 640px;
  --ag-bp-md: 768px;
  --ag-bp-lg: 1024px;
  --ag-bp-xl: 1280px;
  --ag-bp-2xl: 1536px;

  /* ------------------------------------------------------------------
     Z-index layers
     ------------------------------------------------------------------ */
  --ag-z-base: 0;
  --ag-z-raised: 10;
  --ag-z-dropdown: 100;
  --ag-z-sticky-nav: 500;
  --ag-z-overlay: 900;
  --ag-z-modal: 1000;
  --ag-z-toast: 1100;

  /* ------------------------------------------------------------------
     Transitions
     ------------------------------------------------------------------ */
  --ag-dur-instant: 100ms;
  --ag-dur-fast: 200ms;
  --ag-dur-base: 300ms;
  --ag-dur-slow: 500ms;
  --ag-ease-out: ease-out;
  --ag-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Step typography and section rhythm up at the md breakpoint (768px). */
@media (min-width: 768px) {
  :root {
    --ag-text-display: 72px;
    --ag-text-h1: 56px;
    --ag-text-h2: 40px;
    --ag-text-h3: 30px;
    --ag-text-h4: 24px;
    --ag-text-h5: 20px;
    --ag-text-body-large: 20px;
    --ag-space-section: 6rem; /* 96px */
  }
}

/* Reduced motion: collapse all durations and disable reveal transforms. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ag-dur-instant: 0ms;
    --ag-dur-fast: 0ms;
    --ag-dur-base: 0ms;
    --ag-dur-slow: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}