/* ============================================================
   ALPNEXA DESIGN TOKENS — CSS custom properties
   v2.1 · Source of truth: 260703_Alpnexa_Design_Tokens.json
   Import once at :root of any Alpnexa-branded surface.
   Rules: never introduce a 4th brand color; teal is an accent,
   never dominant; links on white use --ax-color-teal-readable.
   ============================================================ */

:root {
  /* ---- Brand colors ---- */
  --ax-color-navy:            #004C7F;  /* primary brand surface */
  --ax-color-navy-dark:       #133E5D;  /* dark surfaces, inner fills, headings on light */
  --ax-color-teal:            #00B6C9;  /* accent — buttons, links, focus, indicators */
  --ax-color-teal-hover:      #00D4E8;  /* hover ONLY */
  --ax-color-teal-pressed:    #009BAA;  /* active / visited */
  --ax-color-teal-alt:        #1297AB;  /* subdued accent on light bg (logo dark variant) */
  --ax-color-teal-readable:   #00899A;  /* link text on white (WCAG) */

  /* ---- Neutrals ---- */
  --ax-color-white:           #FFFFFF;
  --ax-color-bg-light:        #F7F9FB;
  --ax-color-bg-medium:       #EEF3F8;
  --ax-color-border:          #E4E8EC;

  /* ---- Text ---- */
  --ax-color-text:            #1A2A3A;
  --ax-color-heading:         #133E5D;  /* on light backgrounds */
  --ax-color-hint:            #A0AAB4;
  --ax-color-annotation:      #8892A0;

  /* ---- Semantic aliases (map these to app CSS vars) ---- */
  --ax-primary:               var(--ax-color-teal);
  --ax-primary-hover:         var(--ax-color-teal-hover);
  --ax-primary-active:        var(--ax-color-teal-pressed);
  --ax-surface-brand:         var(--ax-color-navy);
  --ax-link:                  var(--ax-color-teal-readable);
  --ax-link-hover:            var(--ax-color-teal-hover);
  --ax-link-visited:          var(--ax-color-teal-pressed);

  /* ---- Typography ---- */
  --ax-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ax-font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  --ax-weight-regular: 400;
  --ax-weight-semibold: 600;
  --ax-weight-bold: 700;

  /* ---- Radius ---- */
  --ax-radius-button:  8px;
  --ax-radius-input:   8px;
  --ax-radius-card:    12px;
  --ax-radius-modal:   12px;
  --ax-radius-login:   16px;
  --ax-radius-tooltip: 6px;
  --ax-radius-pill:    9999px;

  /* ---- Spacing (8px base) ---- */
  --ax-space-1:  4px;
  --ax-space-2:  8px;
  --ax-space-3:  12px;
  --ax-space-4:  16px;
  --ax-space-6:  24px;
  --ax-space-8:  32px;
  --ax-space-12: 48px;
  --ax-space-16: 64px;

  /* ---- Elevation ---- */
  --ax-shadow-1:          0 2px 8px rgba(0,0,0,0.08);
  --ax-shadow-2:          0 4px 16px rgba(0,0,0,0.1);
  --ax-shadow-3:          0 8px 24px rgba(0,0,0,0.12);
  --ax-shadow-4:          0 16px 48px rgba(0,0,0,0.2);
  --ax-shadow-header:     0 2px 12px rgba(0,76,127,0.3);
  --ax-shadow-teal:       0 4px 12px rgba(0,182,201,0.35);
  --ax-shadow-teal-strong:0 6px 20px rgba(0,182,201,0.4);
  --ax-shadow-card-hover: 0 8px 24px rgba(0,182,201,0.15);
  --ax-focus-ring:        0 0 0 2px rgba(0,182,201,0.2);

  /* ---- Motion ---- */
  --ax-transition:      all 0.2s ease;
  --ax-transition-card: all 0.25s ease;
  --ax-transition-link: color 0.15s ease;
}

/* Baseline element styling (opt-in via .ax-base on <body>) */
.ax-base {
  font-family: var(--ax-font-sans);
  color: var(--ax-color-text);
  background: var(--ax-color-bg-light);
  line-height: 1.6;
}
.ax-base h1, .ax-base h2 { color: var(--ax-color-heading); font-weight: 700; }
.ax-base h3, .ax-base h4 { color: var(--ax-color-heading); font-weight: 600; }
.ax-base a { color: var(--ax-link); transition: var(--ax-transition-link); }
.ax-base a:hover { color: var(--ax-link-hover); }
.ax-base a:visited { color: var(--ax-link-visited); }
.ax-base ::selection { background: rgba(0,182,201,0.25); }

/* Primary button */
.ax-btn {
  display: inline-block;
  background: var(--ax-color-teal);
  border: 1px solid var(--ax-color-teal);
  color: #FFFFFF;
  font-weight: 600;
  border-radius: var(--ax-radius-button);
  min-height: 40px;
  padding: 0 var(--ax-space-4);
  cursor: pointer;
  transition: var(--ax-transition);
}
.ax-btn:hover  { background: var(--ax-color-teal-hover); box-shadow: var(--ax-shadow-teal); }
.ax-btn:active { background: var(--ax-color-teal-pressed); }
.ax-btn:focus-visible { box-shadow: var(--ax-focus-ring); outline: none; }

/* Secondary / outline button */
.ax-btn--outline {
  background: transparent;
  color: var(--ax-color-teal);
}
.ax-btn--outline:hover  { background: rgba(0,182,201,0.06); border-color: var(--ax-color-teal-hover); box-shadow: none; }
.ax-btn--outline:active { background: rgba(0,182,201,0.12); }

/* Card */
.ax-card {
  background: #FFFFFF;
  border: 1px solid var(--ax-color-border);
  border-radius: var(--ax-radius-card);
  transition: var(--ax-transition-card);
}
.ax-card:hover {
  border-color: var(--ax-color-teal);
  box-shadow: var(--ax-shadow-card-hover);
  transform: translateY(-2px);
}

/* Input */
.ax-input {
  border: 1px solid var(--ax-color-border);
  border-radius: var(--ax-radius-input);
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-family: var(--ax-font-sans);
}
.ax-input:focus {
  border-color: var(--ax-color-teal);
  box-shadow: var(--ax-focus-ring);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .ax-base *, .ax-btn, .ax-card, .ax-input { transition: none !important; }
  .ax-card:hover { transform: none; }
}

/* ---- v2.2 Monochrome document style (print/documents) ----
   Corporate documents are black/white/gray with discrete black logos
   (260703_Alpnexa_Logo_*_Black.svg). Navy/teal stays on digital surfaces. */
:root {
  --ax-mono-ink:        #000000;  /* document titles, rules, logo */
  --ax-mono-text:       #1A1A1A;  /* document body */
  --ax-mono-gray:       #86868B;  /* annotations, captions, accent slope */
  --ax-mono-gray-light: #D2D2D7;  /* hairlines, borders */
  --ax-mono-paper-tint: #F5F5F7;  /* callouts, code blocks */
}