@layer tokens, base, components, utilities;

@layer tokens {
  :root {
    color-scheme: light;

    --ax-primary: #29513F;
    --ax-primary-hover: #1F3E30;
    --ax-primary-bright: #35664F;
    --ax-primary-light: #EAF1ED;
    --ax-on-primary: #FFFFFF;
    --ax-brand-color: var(--ax-primary);
    --ax-brand-text: #FFFFFF;

    --ax-canvas: #FAFBFB;
    --ax-surface: #FFFFFF;
    --ax-surface-raised: #FFFFFF;
    --ax-surface-muted: #F4F6F5;
    --ax-border: #E8EAEE;
    --ax-border-strong: #D5D9DF;
    --ax-text: #191C21;
    --ax-text-secondary: #6B7280;
    /* Decorative, disabled, or large text only: this value fails AA for body copy. */
    --ax-text-faint: #9CA3AF;
    --ax-danger: #C92A2A;
    --ax-danger-bg: #FDEEEE;
    --ax-success: #157F3D;
    --ax-success-bg: #EBF7EF;
    --ax-warning: #B45309;
    --ax-warning-bg: #FEF7EC;
    --ax-transparent: transparent;

    --ax-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ax-font-size-xs: 0.75rem;
    --ax-font-size-sm: 0.875rem;
    --ax-font-size-md: 1rem;
    --ax-font-size-lg: 1.125rem;
    --ax-font-size-xl: 1.5rem;
    --ax-font-size-2xl: clamp(2rem, 4vw, 3.5rem);
    --ax-line-tight: 1.15;
    --ax-line-normal: 1.5;
    --ax-weight-medium: 500;
    --ax-weight-semibold: 600;
    --ax-weight-bold: 750;
    --ax-letter-wide: 0.18em;

    --ax-space-0: 0;
    --ax-space-1: 0.25rem;
    --ax-space-2: 0.5rem;
    --ax-space-3: 0.75rem;
    --ax-space-4: 1rem;
    --ax-space-5: 1.25rem;
    --ax-space-6: 1.5rem;
    --ax-space-8: 2rem;
    --ax-space-10: 2.5rem;
    --ax-space-12: 3rem;
    --ax-space-16: 4rem;
    --ax-page-gutter: clamp(1rem, 4vw, 3rem);

    --ax-radius-sm: 0.5rem;
    --ax-radius-md: 0.75rem;
    --ax-radius-lg: 1rem;
    --ax-radius-pill: 999rem;
    --ax-border-width: 0.0625rem;
    --ax-focus-width: 0.125rem;
    --ax-focus-offset: 0.125rem;
    --ax-tap-target: 2.75rem;
    --ax-content-width: 75rem;
    --ax-form-width: 28rem;
    --ax-login-brand-width: 44%;
    --ax-nav-height: 4rem;

    --ax-shadow-sm: 0 0.0625rem 0.125rem rgb(25 28 33 / 0.06);
    --ax-shadow-md: 0 0.5rem 1.5rem rgb(25 28 33 / 0.08);
    --ax-shadow-lg: 0 1.5rem 4rem rgb(25 28 33 / 0.14);
    --ax-focus-ring: var(--ax-primary-bright);

    --background-primary: var(--ax-surface);
    --background-secondary: var(--ax-canvas);
    --background-tertiary: var(--ax-surface-muted);
    --body-text-primary: var(--ax-text);
    --body-text-secondary: var(--ax-text-secondary);
    --border-color-primary: var(--ax-border);
    --border-color-secondary: var(--ax-border-strong);
    --hyperlink-color: var(--ax-primary-bright);
    --input-background-color: var(--ax-surface);
    --input-border-color: var(--ax-border-strong);
    --input-text-color: var(--ax-text);
  }

  [data-theme="dark"] {
    color-scheme: dark;
    --ax-primary: #78C49F;
    --ax-primary-hover: #93D7B4;
    --ax-primary-bright: #93D7B4;
    --ax-primary-light: #183429;
    --ax-on-primary: #102218;
    --ax-brand-text: #FFFFFF;
    --ax-canvas: #101512;
    --ax-surface: #17201B;
    --ax-surface-raised: #1D2822;
    --ax-surface-muted: #222E27;
    --ax-border: #34443B;
    --ax-border-strong: #52655A;
    --ax-text: #F2F5F3;
    --ax-text-secondary: #BCC8C1;
    --ax-text-faint: #839087;
    --ax-danger: #FF8A8A;
    --ax-danger-bg: #3B1F20;
    --ax-success: #69D790;
    --ax-success-bg: #173523;
    --ax-warning: #F6C177;
    --ax-warning-bg: #3A2B17;
    --ax-shadow-sm: 0 0.0625rem 0.125rem rgb(0 0 0 / 0.24);
    --ax-shadow-md: 0 0.5rem 1.5rem rgb(0 0 0 / 0.3);
    --ax-shadow-lg: 0 1.5rem 4rem rgb(0 0 0 / 0.4);
  }
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    background: var(--ax-canvas);
    font-family: var(--ax-font-sans);
    color: var(--ax-text);
  }

  body {
    min-height: 100vh;
    margin: var(--ax-space-0);
    background: var(--ax-canvas);
    font-size: var(--ax-font-size-md);
    line-height: var(--ax-line-normal);
  }

  h1,
  h2,
  h3,
  p {
    margin-block-start: var(--ax-space-0);
  }

  h1,
  h2,
  h3 {
    color: var(--ax-text);
    line-height: var(--ax-line-tight);
  }

  h1 {
    font-size: var(--ax-font-size-2xl);
  }

  h2 {
    font-size: var(--ax-font-size-xl);
  }

  a {
    color: var(--hyperlink-color);
    text-underline-offset: var(--ax-space-1);
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
  }

  button,
  a {
    -webkit-tap-highlight-color: var(--ax-transparent);
  }

  :focus-visible {
    outline: var(--ax-focus-width) solid var(--ax-focus-ring);
    outline-offset: var(--ax-focus-offset);
  }

  main[tabindex="-1"]:focus {
    outline: none;
  }

  [x-cloak] {
    display: none !important;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }

    a,
    button,
    input,
    textarea,
    select {
      transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
    }
  }
}

@layer components {
  .ax-page {
    width: min(100%, var(--ax-content-width));
    min-height: calc(100vh - var(--ax-nav-height));
    margin-inline: auto;
    padding: var(--ax-space-10) var(--ax-page-gutter) var(--ax-space-16);
  }

  /* AEP pages own their application shell and responsive gutters. Constraining
     them to Aeris's first-party 75rem reading width makes the same app render
     materially narrower than it does on Communifire. */
  .ax-page--app {
    width: 100%;
    margin-inline: 0;
    padding: 0;
  }

  .ax-rte {
    overflow: hidden;
    border: var(--ax-border-width) solid var(--ax-border);
    border-radius: var(--ax-radius-md);
    background: var(--ax-surface);
    color: var(--ax-text);
  }

  .ax-rte:focus-within {
    border-color: var(--ax-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ax-primary) 18%, transparent);
  }

  .ax-rte__toolbar {
    display: flex;
    min-height: var(--ax-tap-target);
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ax-space-1);
    padding: var(--ax-space-2);
    border-block-end: var(--ax-border-width) solid var(--ax-border);
    background: var(--ax-surface-muted);
  }

  .ax-rte__button {
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: var(--ax-space-1) var(--ax-space-2);
    border: 0;
    border-radius: var(--ax-radius-sm);
    background: transparent;
    color: var(--ax-text);
    cursor: pointer;
    font: inherit;
    font-weight: var(--ax-weight-semibold);
  }

  .ax-rte__button:hover {
    background: var(--ax-primary-light);
  }

  .ax-rte__body {
    overflow: auto;
    padding: var(--ax-space-4);
    outline: none;
    white-space: normal;
  }

  .ax-rte__body:empty::before {
    color: var(--ax-text-secondary);
    content: "Start writing…";
    pointer-events: none;
  }

  .ax-skip-link {
    position: fixed;
    z-index: 100;
    inset-block-start: var(--ax-space-3);
    inset-inline-start: var(--ax-space-3);
    padding: var(--ax-space-2) var(--ax-space-4);
    border-radius: var(--ax-radius-sm);
    background: var(--ax-primary);
    color: var(--ax-on-primary);
    font-weight: var(--ax-weight-semibold);
    transform: translateY(-200%);
  }

  .ax-skip-link:focus {
    transform: translateY(0);
  }

  .ax-btn {
    display: inline-flex;
    min-height: var(--ax-tap-target);
    align-items: center;
    justify-content: center;
    gap: var(--ax-space-2);
    border: var(--ax-border-width) solid var(--ax-transparent);
    border-radius: var(--ax-radius-md);
    cursor: pointer;
    font-weight: var(--ax-weight-semibold);
    line-height: var(--ax-line-tight);
    text-decoration: none;
  }

  .ax-btn:disabled {
    cursor: not-allowed;
    opacity: 0.62;
  }

  .ax-btn--sm {
    padding: var(--ax-space-2) var(--ax-space-3);
    font-size: var(--ax-font-size-sm);
  }

  .ax-btn--md {
    padding: var(--ax-space-3) var(--ax-space-5);
    font-size: var(--ax-font-size-md);
  }

  .ax-btn--primary {
    background: var(--ax-primary);
    color: var(--ax-on-primary);
  }

  .ax-btn--primary:hover {
    background: var(--ax-primary-hover);
  }

  .ax-btn--ghost {
    border-color: var(--ax-border);
    background: var(--ax-surface);
    color: var(--ax-text);
  }

  .ax-btn--ghost:hover {
    background: var(--ax-surface-muted);
  }

  .ax-btn--danger {
    background: var(--ax-danger);
    color: var(--ax-on-primary);
  }

  .ax-card {
    border: var(--ax-border-width) solid var(--ax-border);
    border-radius: var(--ax-radius-lg);
    background: var(--ax-surface-raised);
    box-shadow: var(--ax-shadow-md);
    padding: var(--ax-space-6);
  }

  .ax-field {
    display: grid;
    gap: var(--ax-space-2);
  }

  .ax-label {
    color: var(--ax-text);
    font-size: var(--ax-font-size-sm);
    font-weight: var(--ax-weight-semibold);
  }

  .ax-input {
    width: 100%;
    min-height: var(--ax-tap-target);
    border: var(--ax-border-width) solid var(--input-border-color);
    border-radius: var(--ax-radius-md);
    background: var(--input-background-color);
    color: var(--input-text-color);
    padding: var(--ax-space-3) var(--ax-space-4);
  }

  .ax-input::placeholder {
    color: var(--ax-text-secondary);
  }

  .ax-input[aria-invalid="true"] {
    border-color: var(--ax-danger);
  }

  .ax-alert {
    border: var(--ax-border-width) solid var(--ax-border);
    border-radius: var(--ax-radius-md);
    padding: var(--ax-space-3) var(--ax-space-4);
    font-size: var(--ax-font-size-sm);
  }

  .ax-alert--danger {
    border-color: var(--ax-danger);
    background: var(--ax-danger-bg);
    color: var(--ax-danger);
  }

  .ax-alert--success {
    border-color: var(--ax-success);
    background: var(--ax-success-bg);
    color: var(--ax-success);
  }

  .ax-alert--warning {
    border-color: var(--ax-warning);
    background: var(--ax-warning-bg);
    color: var(--ax-warning);
  }

  .ax-badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--ax-radius-pill);
    background: var(--ax-primary-light);
    color: var(--ax-primary);
    padding: var(--ax-space-1) var(--ax-space-3);
    font-size: var(--ax-font-size-xs);
    font-weight: var(--ax-weight-semibold);
  }

  .ax-table-wrap {
    overflow-x: auto;
  }

  .ax-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
  }

  .ax-table th,
  .ax-table td {
    border-block-end: var(--ax-border-width) solid var(--ax-border);
    padding: var(--ax-space-3) var(--ax-space-4);
    vertical-align: top;
  }

  .ax-table th {
    color: var(--ax-text-secondary);
    font-size: var(--ax-font-size-xs);
    font-weight: var(--ax-weight-semibold);
    letter-spacing: var(--ax-letter-wide);
    text-transform: uppercase;
  }

  .ax-avatar {
    display: inline-grid;
    width: var(--ax-tap-target);
    height: var(--ax-tap-target);
    place-items: center;
    overflow: hidden;
    border-radius: var(--ax-radius-pill);
    background: var(--ax-primary-light);
    color: var(--ax-primary);
    font-weight: var(--ax-weight-semibold);
  }

  .ax-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ax-nav {
    min-height: var(--ax-nav-height);
    border-block-end: var(--ax-border-width) solid var(--ax-border);
    background: var(--ax-surface);
    box-shadow: var(--ax-shadow-sm);
  }

  .ax-nav__inner {
    display: flex;
    width: min(100%, var(--ax-content-width));
    min-height: var(--ax-nav-height);
    align-items: center;
    gap: var(--ax-space-6);
    margin-inline: auto;
    padding-inline: var(--ax-page-gutter);
  }

  .ax-nav__brand {
    color: var(--ax-text);
    font-weight: var(--ax-weight-bold);
    text-decoration: none;
  }

  .ax-nav__links,
  .ax-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--ax-space-2);
  }

  .ax-nav__actions {
    margin-inline-start: auto;
  }

  .ax-nav__link {
    display: inline-flex;
    min-height: var(--ax-tap-target);
    align-items: center;
    border-radius: var(--ax-radius-sm);
    color: var(--ax-text-secondary);
    padding-inline: var(--ax-space-3);
    font-size: var(--ax-font-size-sm);
    font-weight: var(--ax-weight-medium);
    text-decoration: none;
  }

  .ax-nav__link:hover,
  .ax-nav__link[aria-current="page"] {
    background: var(--ax-primary-light);
    color: var(--ax-primary);
  }

  .ax-login {
    display: grid;
    min-height: 100vh;
    grid-template-columns: var(--ax-login-brand-width) 1fr;
  }

  .ax-login__brand {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: space-between;
    background: var(--ax-brand-color);
    color: var(--ax-brand-text);
    padding: var(--ax-space-12);
  }

  .ax-login__wordmark {
    color: var(--ax-brand-text);
    font-size: var(--ax-font-size-sm);
    font-weight: var(--ax-weight-bold);
    letter-spacing: var(--ax-letter-wide);
  }

  .ax-login__statement {
    max-width: 10ch;
    margin-block-end: var(--ax-space-0);
    color: var(--ax-brand-text);
    font-size: var(--ax-font-size-2xl);
  }

  .ax-login__panel {
    display: grid;
    min-width: var(--ax-space-0);
    place-items: center;
    padding: var(--ax-page-gutter);
  }

  .ax-login__card {
    width: min(100%, var(--ax-form-width));
    padding: var(--ax-space-8);
    box-shadow: var(--ax-shadow-lg);
  }

  .ax-eyebrow {
    margin-block-end: var(--ax-space-2);
    color: var(--ax-primary);
    font-size: var(--ax-font-size-xs);
    font-weight: var(--ax-weight-bold);
    letter-spacing: var(--ax-letter-wide);
    text-transform: uppercase;
  }

  @media (max-width: 48rem) {
    .ax-login {
      grid-template-columns: 1fr;
    }

    .ax-login__brand {
      min-height: auto;
      gap: var(--ax-space-6);
      padding: var(--ax-space-6) var(--ax-page-gutter);
    }

    .ax-login__statement {
      max-width: 18ch;
      font-size: var(--ax-font-size-xl);
    }

    .ax-nav__inner {
      align-items: flex-start;
      flex-wrap: wrap;
      gap: var(--ax-space-2);
      padding-block: var(--ax-space-3);
    }

    .ax-nav__links {
      order: 3;
      width: 100%;
      overflow-x: auto;
    }
  }
}

@layer utilities {
  .ax-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-4);
  }

  .ax-stack--sm {
    gap: var(--ax-space-2);
  }

  .ax-stack--lg {
    gap: var(--ax-space-6);
  }

  .ax-row {
    display: flex;
    align-items: center;
    gap: var(--ax-space-3);
  }

  .ax-row--between {
    justify-content: space-between;
  }

  .ax-wrap {
    flex-wrap: wrap;
  }

  .ax-grid {
    display: grid;
    gap: var(--ax-space-6);
  }

  .ax-muted {
    color: var(--ax-text-secondary);
  }

  .ax-text-sm {
    font-size: var(--ax-font-size-sm);
  }

  .ax-text-center {
    text-align: center;
  }

  .ax-w-full {
    width: 100%;
  }

  .ax-m-0 {
    margin: var(--ax-space-0);
  }

  .ax-mb-2 {
    margin-block-end: var(--ax-space-2);
  }

  .ax-mb-4 {
    margin-block-end: var(--ax-space-4);
  }

  .ax-mb-8 {
    margin-block-end: var(--ax-space-8);
  }

  .ax-sr-only {
    position: absolute;
    width: var(--ax-border-width);
    height: var(--ax-border-width);
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Font Awesome Pro Light markup degrades to the vendored Free solid face. */
  .fal {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
  }
}