/* ava-canonical.css — AVA OLO canonical design system
 * Source of truth for design tokens AND component classes across all AVA web surfaces.
 * Authored verbatim per Engineering Principle 16. Do not edit values without architecture review.
 *
 * Two layers in one file:
 *   Layer 1: design tokens (:root)
 *   Layer 2: canonical component classes (.ava-*)
 *
 * Imported by every public-facing AVA surface. Surface-specific styles consume tokens
 * and apply these component classes; they do not redefine the classes locally.
 *
 * monitoring-dashboards loads this file plus ava-canonical-override.css, which swaps
 * --ava-green for blue. Everything else inherits.
 *
 * Last revised: 2026-05-16
 */

/* ============================================================
 * LAYER 1 — TOKENS
 * ============================================================ */

:root {

  /* ---------- COLORS — 6 tokens ---------- */
  --ava-green:        #2E5E3E;
  --ava-green-hover:  #245031;
  --ava-white:        #FFFFFF;
  --ava-ink:          #1A1A1A;
  --ava-gray:         #8A8A85;
  --ava-rule:         #D4CFC0;

  /* ---------- TYPOGRAPHY ---------- */
  --ava-font-family:  'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Arial', sans-serif;

  --ava-fs-small:     14px;
  --ava-fs-body:      16px;
  --ava-fs-h2:        24px;
  --ava-fs-h1:        36px;

  --ava-fw-regular:   400;
  --ava-fw-medium:    500;
  --ava-fw-bold:      700;

  --ava-lh-tight:     1.2;
  --ava-lh-normal:    1.5;
  --ava-lh-relaxed:   1.65;

  /* ---------- SHAPE ---------- */
  --ava-radius-sm:    8px;
  --ava-radius-md:    16px;
  --ava-radius-lg:    24px;
  --ava-radius-pill:  9999px;

  /* ---------- SPACING ---------- */
  --ava-space-sm:     8px;
  --ava-space-md:     16px;
  --ava-space-lg:     24px;
  --ava-space-xl:     40px;
  --ava-space-2xl:    64px;

  /* ---------- SHADOW ---------- */
  --ava-shadow:       0 4px 12px rgba(0, 0, 0, 0.10);

  /* ---------- MOTION ---------- */
  --ava-transition:       200ms ease;
  --ava-transition-slow:  400ms ease;
}


/* ============================================================
 * LAYER 2 — COMPONENT CLASSES
 *
 * Universal patterns. Every surface uses these classes for the
 * shapes they describe. Surface-specific CSS handles layout
 * (where these elements sit, how they're arranged) but never
 * redefines what the elements look like.
 * ============================================================ */


/* ---------- CARDS ---------- */

/* Base card. Plain square. 2px uniform border. White background.
 * Brand presence comes from the green title inside, not from the border.
 * Border weight: 2px for external boundaries (cards, buttons, inputs,
 * pills); 1px reserved for internal dividers (modal sections, table rows). */
.ava-card {
  background: var(--ava-white);
  border: 2px solid var(--ava-rule);
  border-radius: var(--ava-radius-sm);
  padding: var(--ava-space-lg);
  /* TS-FIX-ADVISORY-LANDING-CAROUSEL-AND-VISUAL-V1-01 §6.1 —
   * when an <a> wraps the card, kill default link styling so the
   * card's own typography wins. */
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Primary container card — auth main card, future onboarding shells.
 * Larger radius, more interior padding, soft elevation. */
.ava-card--main {
  border-radius: var(--ava-radius-md);
  padding: var(--ava-space-xl);
  box-shadow: var(--ava-shadow);
}

/* Interactive card — clickable, hover signals selection.
 * Border-color shift to green is the only state change. */
.ava-card--interactive {
  transition: border-color var(--ava-transition);
  cursor: pointer;
}
.ava-card--interactive:hover {
  border-color: var(--ava-green);
}


/* ---------- BUTTONS ---------- */

/* Base button — solid primary. Green background, white text. */
.ava-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ava-green);
  color: var(--ava-white);
  border: 2px solid var(--ava-green);
  border-radius: var(--ava-radius-sm);
  padding: 12px var(--ava-space-lg);
  font-family: var(--ava-font-family);
  font-size: var(--ava-fs-body);
  font-weight: var(--ava-fw-medium);
  line-height: var(--ava-lh-tight);
  min-height: 48px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ava-transition), border-color var(--ava-transition);
}
.ava-button:hover {
  background: var(--ava-green-hover);
  border-color: var(--ava-green-hover);
}

/* Outline modifier — secondary actions. */
.ava-button--outline {
  background: transparent;
  color: var(--ava-green);
}
.ava-button--outline:hover {
  background: var(--ava-green);
  color: var(--ava-white);
}

/* Small modifier — inline help, back-link, compact toolbars. */
.ava-button--sm {
  min-height: 32px;
  padding: 6px 14px;
  font-size: var(--ava-fs-small);
}

/* Large modifier — hero CTAs. */
.ava-button--lg {
  min-height: 56px;
  padding: 16px var(--ava-space-xl);
  font-size: var(--ava-fs-h2);
}

/* Icon modifier — square button with one icon, no text. */
.ava-button--icon {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
}


/* ---------- FORM INPUTS ---------- */

.ava-input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px var(--ava-space-md);
  background: var(--ava-white);
  color: var(--ava-ink);
  border: 2px solid var(--ava-rule);
  border-radius: var(--ava-radius-sm);
  font-family: var(--ava-font-family);
  font-size: var(--ava-fs-body);
  line-height: var(--ava-lh-normal);
  transition: border-color var(--ava-transition), box-shadow var(--ava-transition);
}
.ava-input:focus {
  outline: none;
  border-color: var(--ava-green);
  box-shadow: 0 0 0 3px rgba(46, 94, 62, 0.10);
}
.ava-input::placeholder {
  color: var(--ava-gray);
}

/* Textarea modifier — multi-line, with vertical resize. */
.ava-textarea {
  min-height: 60px;
  max-height: 240px;
  resize: vertical;
}

/* Form label — paired with .ava-input. */
.ava-label {
  display: block;
  font-family: var(--ava-font-family);
  font-size: var(--ava-fs-body);
  font-weight: var(--ava-fw-medium);
  color: var(--ava-ink);
  margin-bottom: var(--ava-space-sm);
}

/* Form group — wraps a label + input pair. */
.ava-form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--ava-space-md);
}


/* ---------- PILLS ---------- */

/* Pill — small rounded label. Default state: white background, gray border.
 * Used for language switcher, status indicators, non-interactive tags. */
.ava-pill {
  display: inline-flex;
  align-items: center;
  background: var(--ava-white);
  color: var(--ava-ink);
  border: 2px solid var(--ava-rule);
  border-radius: var(--ava-radius-pill);
  padding: 5px 14px;
  font-family: var(--ava-font-family);
  font-size: var(--ava-fs-small);
  font-weight: var(--ava-fw-medium);
  line-height: var(--ava-lh-tight);
  text-decoration: none;
  transition: background-color var(--ava-transition), border-color var(--ava-transition), color var(--ava-transition);
}

/* Interactive pill (chips, language switcher) — hover fills with green.
 * The selected/active state is identical to hover. */
.ava-pill--interactive {
  cursor: pointer;
}
.ava-pill--interactive:hover,
.ava-pill--interactive.active {
  background: var(--ava-green);
  border-color: var(--ava-green);
  color: var(--ava-white);
}


/* ---------- NAV LINKS ---------- */

/* Header nav link. Gray default. Active state has a 2px green
 * bottom-border indicating current section. */
.ava-nav-link {
  display: inline-block;
  color: var(--ava-gray);
  font-family: var(--ava-font-family);
  font-size: var(--ava-fs-small);
  font-weight: var(--ava-fw-medium);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--ava-transition), border-bottom-color var(--ava-transition);
}
.ava-nav-link:hover {
  color: var(--ava-ink);
}
.ava-nav-link.active {
  color: var(--ava-ink);
  border-bottom-color: var(--ava-green);
}


/* ---------- EYEBROW (uppercase section label) ---------- */

.ava-eyebrow {
  font-family: var(--ava-font-family);
  font-size: var(--ava-fs-small);
  font-weight: var(--ava-fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ava-green);
  line-height: var(--ava-lh-tight);
}

/* Muted eyebrow — meta lines on cards, less prominent. */
.ava-eyebrow--muted {
  color: var(--ava-gray);
  letter-spacing: 0.08em;
}

/* On-dark eyebrow — hero overlays where the background is green. */
.ava-eyebrow--on-dark {
  color: rgba(255, 255, 255, 0.75);
}


/* ---------- HERO ---------- */

/* Green banner strip. Used by advisory section landing, future content surfaces. */
.ava-hero {
  background: var(--ava-green);
  color: var(--ava-white);
  padding: var(--ava-space-2xl) var(--ava-space-lg);
  text-align: center;
}
.ava-hero-eyebrow {
  font-family: var(--ava-font-family);
  font-size: var(--ava-fs-small);
  font-weight: var(--ava-fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--ava-space-md);
}
.ava-hero-title {
  font-family: var(--ava-font-family);
  font-size: var(--ava-fs-h1);
  font-weight: var(--ava-fw-bold);
  line-height: var(--ava-lh-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--ava-space-md);
}
.ava-hero-lead {
  font-family: var(--ava-font-family);
  font-size: var(--ava-fs-body);
  line-height: var(--ava-lh-relaxed);
  color: rgba(255, 255, 255, 0.88);
  max-width: 640px;
  margin: 0 auto;
}


/* ---------- DISPLAY ----------
 * Editorial typography for the brand-voice statement on a page.
 * Used once per surface, sparingly. Pairs naturally with .ava-hero
 * or as a standalone block. Italic-emphasis variant available via
 * the .ava-display em selector — second clauses, accents, asides
 * naturally render italic. */

.ava-display {
  font-family: var(--ava-font-family);
  font-size: 44px;
  font-weight: var(--ava-fw-regular);
  line-height: var(--ava-lh-tight);
  letter-spacing: -0.01em;
  color: var(--ava-ink);
  margin: 0;
}

.ava-display em,
.ava-display i {
  font-style: italic;
}

/* On-dark variant — when display sits over a green or dark background. */
.ava-display--on-dark {
  color: var(--ava-white);
}


/* ---------- TABLE ---------- */

.ava-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ava-font-family);
  font-size: var(--ava-fs-small);
}
.ava-table caption {
  text-align: left;
  font-size: var(--ava-fs-small);
  color: var(--ava-gray);
  margin-bottom: var(--ava-space-sm);
  font-style: italic;
}
.ava-table th {
  text-align: left;
  padding: var(--ava-space-sm) var(--ava-space-md);
  background: var(--ava-white);
  color: var(--ava-green);
  font-weight: var(--ava-fw-medium);
  border-bottom: 2px solid var(--ava-green);
}
.ava-table td {
  padding: var(--ava-space-sm) var(--ava-space-md);
  color: var(--ava-ink);
  border-bottom: 1px solid var(--ava-rule);
}
.ava-table tbody tr:hover {
  background: rgba(46, 94, 62, 0.04);
}


/* ---------- MODAL ---------- */

.ava-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ava-space-md);
  z-index: 1000;
}
.ava-modal {
  background: var(--ava-white);
  border-radius: var(--ava-radius-md);
  padding: var(--ava-space-lg);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--ava-shadow);
}
.ava-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ava-space-md);
  padding-bottom: var(--ava-space-md);
  border-bottom: 1px solid var(--ava-rule);
}
.ava-modal-body {
  font-family: var(--ava-font-family);
  font-size: var(--ava-fs-body);
  line-height: var(--ava-lh-relaxed);
  color: var(--ava-ink);
}
.ava-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--ava-space-sm);
  margin-top: var(--ava-space-lg);
  padding-top: var(--ava-space-md);
  border-top: 1px solid var(--ava-rule);
}