/*
 * Aetherion Funding Intelligence | Interface specification v1.0
 * Canonical numeric tokens. Read ../README.md before making changes.
 * No fonts are downloaded by this file. Configure the project font loader.
 * Usage: <html lang="pt-BR" data-theme="light"> with .ae-scope on the app root.
 * .ae-inverse opts a section (sidebar or marketing hero) into the dark palette.
 * These utility classes do not replace accessible application components.
 */

:root {
  /* Existing brand references retained from the supplied kit. */
  --ae-brand-ink: #141313;
  --ae-brand-gold: #CFA26E;
  --ae-brand-champagne: #FCDFBF;
  --ae-brand-sand: #E3D2C1;
  --ae-brand-white: #FFFFFF;

  /* Proposed product extensions. */
  --ae-brand-warm: #F8F7F4;
  --ae-brand-petroleum: #0F5C63;
  --ae-brand-bronze: #8A5F2E;
  --ae-brand-gray: #62686F;

  /* Fonts: these are family declarations, NOT font file imports. */
  --ae-font-ui: "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ae-font-editorial: "Source Serif 4", Georgia, serif;
  --ae-font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

  --ae-weight-regular: 400;
  --ae-weight-medium: 500;
  --ae-weight-semibold: 600;
  --ae-weight-bold: 700;
  --ae-text-xs: 0.75rem;
  --ae-text-sm: 0.875rem;
  --ae-text-base: 1rem;
  --ae-text-lg: 1.25rem;
  --ae-text-xl: 1.5rem;
  --ae-text-2xl: 1.75rem;
  --ae-display-size: clamp(2rem, 1.35rem + 3vw, 3.5rem);
  --ae-leading-body: 1.5;
  --ae-leading-title: 1.25;
  --ae-leading-display: 1.12;
  --ae-tracking-display: -0.02em;
  --ae-tracking-label: 0.08em;

  /* Four-pixel spacing scale, expressed in rem. */
  --ae-space-1: 0.25rem;
  --ae-space-2: 0.5rem;
  --ae-space-3: 0.75rem;
  --ae-space-4: 1rem;
  --ae-space-6: 1.5rem;
  --ae-space-8: 2rem;
  --ae-space-12: 3rem;
  --ae-space-16: 4rem;
  --ae-radius-control: 0.5rem;
  --ae-radius-card: 0.75rem;
  --ae-radius-dialog: 1rem;
  --ae-radius-pill: 999px;
  --ae-control-min: 2.75rem;
  --ae-border-width: 1px;
  --ae-focus-width: 3px;
  --ae-focus-offset: 3px;
  --ae-sidebar-width: 16rem;
  --ae-header-min: 4.5rem;
  --ae-reading-width: 70ch;
  --ae-page-width: 90rem;
  --ae-marketing-width: 75rem;
  /* Product layout extensions: kept here so components do not duplicate values. */
  --ae-login-width: 26rem;
  --ae-process-width: 12rem;
  --ae-icon-stroke: 1.7;
  --ae-motion-fast: 120ms;
  --ae-motion-normal: 180ms;
  --ae-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Light theme: use semantic tokens in components, never raw brand colors. */
  --ae-color-canvas: var(--ae-brand-warm);
  --ae-color-surface: var(--ae-brand-white);
  --ae-color-surface-muted: #F1EEE8;
  --ae-color-surface-hover: #EDF4F3;
  --ae-color-text: var(--ae-brand-ink);
  --ae-color-muted: var(--ae-brand-gray);
  --ae-color-placeholder: var(--ae-brand-gray);
  --ae-color-border-subtle: #DED8D0;
  --ae-color-border-control: #7C8287;
  --ae-color-action: var(--ae-brand-petroleum);
  --ae-color-action-hover: #0B4A50;
  --ae-color-action-active: #083A3F;
  --ae-color-on-action: #FFFFFF;
  --ae-color-link: var(--ae-brand-petroleum);
  --ae-color-focus: var(--ae-brand-petroleum);
  --ae-color-brand-text: var(--ae-brand-bronze);
  --ae-color-success: #1B664B;
  --ae-color-success-bg: #E9F4EE;
  --ae-color-warning: #825100;
  --ae-color-warning-bg: #FFF3D6;
  --ae-color-danger: #A52D35;
  --ae-color-danger-bg: #FCECEF;
  --ae-color-info: #245B7A;
  --ae-color-info-bg: #EBF3F8;
  --ae-color-chart-1: #0F5C63;
  --ae-color-chart-2: #8A5F2E;
  --ae-color-chart-3: #56667A;
  --ae-color-chart-4: #84526C;
  --ae-shadow-card: 0 1px 3px rgb(20 19 19 / 0.05);
  --ae-shadow-overlay: 0 16px 40px rgb(20 19 19 / 0.16);
}

/* Explicit dark mode, also usable for a local inverse surface. */
[data-theme="dark"],
.ae-inverse {
  color-scheme: dark;
  --ae-color-canvas: #141313;
  --ae-color-surface: #1C2124;
  --ae-color-surface-muted: #252D31;
  --ae-color-surface-hover: #2D393E;
  --ae-color-text: #F8F7F4;
  --ae-color-muted: #B6C0C8;
  --ae-color-placeholder: #B6C0C8;
  --ae-color-border-subtle: #39474E;
  --ae-color-border-control: #7C8C92;
  --ae-color-action: #6BC6CB;
  --ae-color-action-hover: #88D8DC;
  --ae-color-action-active: #A2E3E6;
  --ae-color-on-action: #102326;
  --ae-color-link: #88D8DC;
  --ae-color-focus: #88D8DC;
  --ae-color-brand-text: #CFA26E;
  --ae-color-success: #8DDDAD;
  --ae-color-success-bg: #152D24;
  --ae-color-warning: #F2C96D;
  --ae-color-warning-bg: #332914;
  --ae-color-danger: #FFADB5;
  --ae-color-danger-bg: #361D24;
  --ae-color-info: #9ECDFA;
  --ae-color-info-bg: #192B39;
  --ae-color-chart-1: #88D8DC;
  --ae-color-chart-2: #CFA26E;
  --ae-color-chart-3: #B6C0C8;
  --ae-color-chart-4: #D9A9C1;
  --ae-shadow-card: 0 1px 3px rgb(0 0 0 / 0.2);
  --ae-shadow-overlay: 0 16px 40px rgb(0 0 0 / 0.35);
}

:root:not([data-theme="dark"]) {
  color-scheme: light;
}

/* Scope the design system to avoid resetting unrelated pages. */
.ae-scope {
  min-inline-size: 0;
  font-family: var(--ae-font-ui);
  font-size: var(--ae-text-base);
  font-weight: var(--ae-weight-regular);
  line-height: var(--ae-leading-body);
  font-optical-sizing: auto;
  color: var(--ae-color-text);
  background: var(--ae-color-canvas);
}

body.ae-scope {
  margin: 0;
  min-block-size: 100dvh;
}

.ae-scope,
.ae-scope *,
.ae-scope *::before,
.ae-scope *::after {
  box-sizing: border-box;
}

.ae-inverse {
  color: var(--ae-color-text);
  background: var(--ae-color-canvas);
}

/* Load only the font resources needed for enabled locales and document scripts. */
:where(.ae-scope):lang(ar),
:where(.ae-scope) :lang(ar) {
  --ae-font-ui: "Noto Sans Arabic", "Noto Sans", sans-serif;
  --ae-font-editorial: "Noto Sans Arabic", "Noto Sans", sans-serif;
  font-family: var(--ae-font-ui);
}
:where(.ae-scope):lang(ja),
:where(.ae-scope) :lang(ja) {
  --ae-font-ui: "InterVariable", "Inter", "Noto Sans JP", sans-serif;
  --ae-font-editorial: var(--ae-font-ui);
  font-family: var(--ae-font-ui);
}
:where(.ae-scope):lang(ko),
:where(.ae-scope) :lang(ko) {
  --ae-font-ui: "InterVariable", "Inter", "Noto Sans KR", sans-serif;
  --ae-font-editorial: var(--ae-font-ui);
  font-family: var(--ae-font-ui);
}
:where(.ae-scope):lang(zh-Hans),
:where(.ae-scope):lang(zh-CN),
:where(.ae-scope) :lang(zh-Hans),
:where(.ae-scope) :lang(zh-CN) {
  --ae-font-ui: "InterVariable", "Inter", "Noto Sans SC", sans-serif;
  --ae-font-editorial: var(--ae-font-ui);
  font-family: var(--ae-font-ui);
}
:where(.ae-scope):lang(zh-Hant),
:where(.ae-scope):lang(zh-TW),
:where(.ae-scope) :lang(zh-Hant),
:where(.ae-scope) :lang(zh-TW) {
  --ae-font-ui: "InterVariable", "Inter", "Noto Sans TC", sans-serif;
  --ae-font-editorial: var(--ae-font-ui);
  font-family: var(--ae-font-ui);
}
:where(.ae-scope):lang(hi),
:where(.ae-scope) :lang(hi) {
  --ae-font-ui: "Noto Sans Devanagari", "Noto Sans", sans-serif;
  --ae-font-editorial: var(--ae-font-ui);
  font-family: var(--ae-font-ui);
}

.ae-scope :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

.ae-scope :where(button, input, select, textarea, a, [tabindex]):focus-visible {
  outline: var(--ae-focus-width) solid var(--ae-color-focus);
  outline-offset: var(--ae-focus-offset);
  scroll-margin-block: var(--ae-space-6);
}

/* Focus must not be clipped by overflow or covered by sticky bars. */
.ae-link {
  color: var(--ae-color-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.ae-title-page {
  margin: 0;
  font-family: var(--ae-font-ui);
  font-size: var(--ae-text-2xl);
  font-weight: var(--ae-weight-semibold);
  line-height: var(--ae-leading-title);
}

.ae-title-section {
  margin: 0;
  font-family: var(--ae-font-ui);
  font-size: var(--ae-text-xl);
  font-weight: var(--ae-weight-semibold);
  line-height: var(--ae-leading-title);
}

.ae-title-card {
  margin: 0;
  font-family: var(--ae-font-ui);
  font-size: var(--ae-text-lg);
  font-weight: var(--ae-weight-semibold);
  line-height: 1.4;
}

.ae-display {
  margin: 0;
  max-inline-size: 22ch;
  font-family: var(--ae-font-editorial);
  font-size: var(--ae-display-size);
  font-weight: var(--ae-weight-medium);
  line-height: var(--ae-leading-display);
  letter-spacing: var(--ae-tracking-display);
  overflow-wrap: break-word;
}

.ae-scope :lang(ar) .ae-display,
.ae-display:lang(ar) {
  letter-spacing: normal;
  line-height: 1.5;
}

.ae-muted { color: var(--ae-color-muted); }
.ae-small { font-size: var(--ae-text-sm); }
.ae-caption { font-size: var(--ae-text-xs); }
.ae-numeric { font-variant-numeric: tabular-nums lining-nums; }
.ae-reading { max-inline-size: var(--ae-reading-width); }

.ae-page {
  inline-size: 100%;
  max-inline-size: var(--ae-page-width);
  margin-inline: auto;
  padding: var(--ae-space-6);
}

.ae-card {
  min-inline-size: 0;
  padding: var(--ae-space-6);
  color: var(--ae-color-text);
  background: var(--ae-color-surface);
  border: var(--ae-border-width) solid var(--ae-color-border-subtle);
  border-radius: var(--ae-radius-card);
  box-shadow: var(--ae-shadow-card);
}

.ae-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ae-space-2);
  min-block-size: var(--ae-control-min);
  padding: var(--ae-space-3) var(--ae-space-4);
  font-size: var(--ae-text-sm);
  font-weight: var(--ae-weight-semibold);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  border: var(--ae-border-width) solid var(--ae-color-border-control);
  border-radius: var(--ae-radius-control);
  color: var(--ae-color-text);
  background: var(--ae-color-surface);
  cursor: pointer;
  transition: background-color var(--ae-motion-normal) var(--ae-ease),
              border-color var(--ae-motion-normal) var(--ae-ease),
              color var(--ae-motion-normal) var(--ae-ease);
}

.ae-button:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--ae-color-surface-hover);
}

.ae-button--primary {
  color: var(--ae-color-on-action);
  background: var(--ae-color-action);
  border-color: var(--ae-color-action);
}
.ae-button--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--ae-color-action-hover);
  border-color: var(--ae-color-action-hover);
}
.ae-button--primary:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--ae-color-action-active);
  border-color: var(--ae-color-action-active);
}
.ae-button:disabled,
.ae-button[aria-disabled="true"] {
  color: var(--ae-color-muted);
  background: var(--ae-color-surface-muted);
  border-color: var(--ae-color-border-subtle);
  cursor: not-allowed;
}
/* aria-disabled only communicates state: prevent activation in application code. */
.ae-button--icon {
  min-inline-size: var(--ae-control-min);
  padding: var(--ae-space-3);
}

.ae-field {
  inline-size: 100%;
  min-block-size: var(--ae-control-min);
  padding: var(--ae-space-3);
  font-size: var(--ae-text-base);
  line-height: var(--ae-leading-body);
  color: var(--ae-color-text);
  background: var(--ae-color-surface);
  border: var(--ae-border-width) solid var(--ae-color-border-control);
  border-radius: var(--ae-radius-control);
}
.ae-field::placeholder {
  color: var(--ae-color-placeholder);
  opacity: 1;
}
.ae-field[aria-invalid="true"] { border-color: var(--ae-color-danger); }
textarea.ae-field { min-block-size: 8rem; resize: vertical; }

.ae-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ae-space-1);
  padding: var(--ae-space-1) var(--ae-space-2);
  font-size: var(--ae-text-sm);
  font-weight: var(--ae-weight-medium);
  color: var(--ae-color-text);
  background: var(--ae-color-surface-muted);
  border-radius: var(--ae-radius-pill);
}
/* Badge classes are for noninteractive labels, not undersized clickable chips. */
.ae-badge--success { color: var(--ae-color-success); background: var(--ae-color-success-bg); }
.ae-badge--warning { color: var(--ae-color-warning); background: var(--ae-color-warning-bg); }
.ae-badge--danger  { color: var(--ae-color-danger);  background: var(--ae-color-danger-bg); }
.ae-badge--info    { color: var(--ae-color-info);    background: var(--ae-color-info-bg); }

.ae-table-region {
  max-inline-size: 100%;
  overflow-x: auto;
  padding: var(--ae-space-2); /* Space for keyboard focus around edge controls. */
}
.ae-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-family: var(--ae-font-ui);
  font-size: var(--ae-text-sm);
  color: var(--ae-color-text);
  background: var(--ae-color-surface);
}
.ae-table :where(th, td) {
  padding: var(--ae-space-3) var(--ae-space-4);
  text-align: start;
  vertical-align: top;
  border-block-end: var(--ae-border-width) solid var(--ae-color-border-subtle);
}
.ae-table th {
  font-weight: var(--ae-weight-semibold);
  background: var(--ae-color-surface-muted);
}
.ae-table .ae-numeric { text-align: end; }

/* At narrow widths, collapse navigation in the application component. */
@media (max-width: 47.999rem) {
  .ae-page { padding: var(--ae-space-4); }
  .ae-card { padding: var(--ae-space-4); }
}

/* Default light, explicit dark preference; persist the user's selection in the app.
   Do not auto-invert brand assets. Do not remove focus outlines in later CSS. */
@media (prefers-reduced-motion: reduce) {
  .ae-scope,
  .ae-scope *,
  .ae-scope *::before,
  .ae-scope *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .ae-scope :where(button, input, select, textarea, a, [tabindex]):focus-visible {
    outline-color: Highlight;
  }
}