/* -------------------------------------------------------------------------
   Cluena design system — authoritative tokens and shared primitives

   Phase 1 promotes the approved Dashboard values into a reusable foundation.
   Page CSS may control page-specific layout, but shared visual decisions live
   here. Legacy compatibility tokens remain until the later cleanup phase.
   ------------------------------------------------------------------------- */

:root {
  /* Brand */
  --navy: #0a1d4d;
  --navy-deep: #071638;
  --teal: #14b8a6;
  --teal-dark: #0f766e;
  --teal-tint: #e7f8f5;
  --teal-line: #99d8cf;
  --teal-bright: #7fe3d6;
  --teal-avatar: #b9eee5;
  --on-navy: #ffffff;
  --on-navy-muted: #c3cde2;
  --on-navy-nav: rgba(255, 255, 255, .68);
  --on-navy-control: rgba(255, 255, 255, .78);
  --on-navy-surface: rgba(255, 255, 255, .06);

  /* Neutral color and surface hierarchy */
  --ink: #111827;
  --muted: #64748b;
  --muted-strong: #51607a;
  --muted-soft: #94a3b8;
  --paper: #ffffff;
  --app-background: #f5f7fa;
  --canvas: var(--app-background);
  --subtle: #f8fafc;
  --sunken: #eef2f7;
  --neutral-soft: #eef2f7;
  --hover-wash: #f0fdfa;

  /* Evidence categories */
  --evidence-property: var(--teal-dark);
  --evidence-property-soft: var(--teal-tint);
  --evidence-business: #2563a8;
  --evidence-business-soft: #edf5fc;
  --evidence-institutional: #7c3aed;
  --evidence-institutional-soft: #f4effd;
  --evidence-transactions: #b45309;
  --evidence-transactions-soft: #fff6e8;

  /* Status */
  --verified: #0f766e;
  --verified-strong: #075e56;
  --verified-hover: #0b5d57;
  --verified-soft: #e7f8f5;
  --verified-line: #99d8cf;
  --attention: #a35a07;
  --attention-soft: #fdf3e4;
  --attention-line: #eccb96;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --danger-line: #f0c2bd;
  --danger-wash: #fff8f7;
  --info: #1d4ed8;
  --info-bright: #3b82f6;
  --info-soft: #eaf1ff;
  --info-line: #b8cdf7;
  --accent-violet: #8b5cf6;

  /* Typography */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --type-display: clamp(40px, 4vw, 52px);
  --type-page-title: clamp(34px, 3.1vw, 42px);
  --type-context-title: clamp(32px, 2.8vw, 38px);
  --type-metric: clamp(25px, 2.1vw, 31px);
  --type-brand: 26px;
  --type-score: 34px;
  --type-section-title: 19px;
  --type-section-title-compact: 18px;
  --type-card-title: 16px;
  --type-body-strong: 15px;
  --type-body: 14px;
  --type-control: 13px;
  --type-label: 12px;
  --type-metadata: 11px;
  --type-caption: 10px;
  --type-micro: 8px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-title: 650;
  --weight-bold: 700;
  --weight-heavy: 800;
  --leading-metric: 1.05;
  --leading-title: 1.12;
  --leading-compact: 1.25;
  --leading-label: 1.35;
  --leading-body: 1.5;
  --leading-reading: 1.55;
  --tracking-title: -.025em;
  --tracking-section: -.012em;
  --tracking-card: -.005em;
  --tracking-nav: -.006em;
  --tracking-label: .045em;

  /* Spacing */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-12: 48px;
  --space-16: 64px;

  /* Application geometry */
  --container-app: 1920px;
  --gutter-layout: clamp(16px, 3.5vw, 56px);
  --layout-inline: max(
    var(--gutter-layout),
    calc((100vw - var(--container-app)) / 2)
  );
  --gutter-page: var(--gutter-layout);
  --gutter-page-narrow: var(--gutter-layout);
  --gutter-header: var(--gutter-layout);
  --gutter-header-narrow: var(--gutter-layout);
  --page-content-padding-start: var(--space-6);
  --page-content-padding-end: var(--space-8);
  --page-stack-gap: var(--space-4);
  --page-header-inset: 2px;
  --page-header-stack-gap: var(--space-1);
  --page-header-subtitle-min-height: 20px;
  --section-stack-gap: var(--space-4);
  --surface-padding: var(--space-5);
  --surface-padding-spacious: var(--space-6);
  --control-height-compact: 36px;
  --control-height: 42px;
  --control-height-large: 46px;
  --brand-mark-size: clamp(32px, 2.5vw, 36px);
  --brand-mark-clear-space: 2px;
  --evidence-chip-size: 28px;
  --evidence-chip-size-compact: 24px;

  /* Borders */
  --line: #d9e0e8;
  --line-soft: #e4e9ef;
  --line-strong: #b8c3d1;
  --field-line: #c8d2df;
  --border-width: 1px;
  --border-default: var(--border-width) solid var(--line);
  --border-subtle: var(--border-width) solid rgba(217, 224, 232, .72);
  --border-row: var(--border-width) solid var(--line-soft);
  --border-row-soft: var(--border-width) solid var(--line-soft);
  --border-row-strong: var(--border-width) solid var(--line);
  --border-on-navy: var(--border-width) solid rgba(255, 255, 255, .24);
  --border-header-divider: rgba(255, 255, 255, .16);
  --border-header-accent: rgba(20, 184, 166, .58);
  --border-avatar: rgba(255, 255, 255, .34);

  /* Radius */
  --radius-card: 4px;
  --radius-card-balanced: 4px;
  --radius-card-compact: 4px;
  --radius-control-standard: 4px;
  --radius-control-compact: 4px;
  --radius-pill: 4px;

  /* Flat data surfaces; elevation is reserved for menus and overlays. */
  --shadow-card: none;
  --shadow-card-subtle: none;
  --shadow-card-hover: none;
  --shadow-header: none;
  --shadow-menu: 0 4px 12px rgba(7, 22, 56, .12);
  --shadow: none;
  --shadow-soft: none;
  --shadow-control: 0 8px 24px rgba(7, 22, 56, .12);

  /* Focus */
  --focus-ring-width: 2px;
  --focus-ring-color: var(--teal-dark);
  --focus-ring-on-dark: var(--teal-bright);
  --focus-ring-offset: 2px;
  --focus-ring-radius: 2px;

  /* Legacy compatibility. Remove after later page migrations. */
  --radius-shell: 2px;
  --radius-panel: 3px;
  --radius-control: 3px;
  --radius-inner: 0;
  --radius-chip: 2px;
  --radius-status: var(--radius-pill);
}

/* Shared layout primitives */
.page-container {
  width: auto;
  max-width: none;
  margin-inline: var(--layout-inline);
}

.page-header {
  color: var(--navy-deep);
}

.page-header h1 {
  margin: var(--page-header-title-margin, 0);
  color: var(--page-header-title-color, var(--navy-deep));
  font-size: var(--page-header-title-size, var(--type-page-title));
  font-weight: var(--page-header-title-weight, var(--weight-title));
  letter-spacing: var(--page-header-title-tracking, var(--tracking-title));
  line-height: var(--page-header-title-leading, var(--leading-title));
}

/* Standard title/subtitle identity block for primary application pages.
   Context pages may precede their title with an eyebrow or back link, but
   the first identity element should begin on this same inset. */
.page-header-stack {
  display: grid;
  align-content: start;
  gap: var(--page-header-stack-gap);
  padding: var(--page-header-inset);
}

.page-header-stack h1 {
  --page-header-title-size: var(--type-metric);
  --page-header-title-weight: var(--weight-title);
}

.page-header-stack > p {
  min-height: var(--page-header-subtitle-min-height);
  margin: 0;
  color: var(--muted-strong);
  font-size: var(--type-body);
  line-height: var(--leading-label);
}

.section-header,
.card-header {
  display: flex;
  align-items: center;
}

.section-header h2,
.card-header h2 {
  margin: 0;
  color: var(--section-title-color, var(--navy-deep));
  font-size: var(--section-title-size, var(--type-section-title));
  font-weight: var(--section-title-weight, var(--weight-semibold));
  letter-spacing: var(--section-title-tracking, var(--tracking-section));
}

.surface-card {
  background: var(--surface-background, var(--paper));
  border: var(--surface-border, var(--border-default));
  border-radius: var(--surface-radius, var(--radius-card));
  box-shadow: var(--surface-shadow, var(--shadow-card));
}

/* Shared action primitives */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--button-radius, var(--radius-control-standard));
  font: inherit;
  font-size: var(--type-control);
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

.button-primary,
.button-approve {
  color: var(--paper);
  background: var(--teal-dark);
  box-shadow: 0 4px 13px rgba(15, 118, 110, .15);
}

.button-primary:hover,
.button-approve:hover {
  color: var(--paper);
  background: var(--verified-hover);
}

.app-body .button-primary,
.app-body .button-approve {
  background: var(--navy);
  box-shadow: none;
}

.app-body .button-primary:hover,
.app-body .button-approve:hover {
  background: var(--navy-deep);
}

.button-secondary {
  color: var(--navy);
  background: var(--paper);
  border-color: var(--field-line);
}

.button-secondary:hover {
  color: var(--teal-dark);
  background: var(--verified-soft);
  border-color: var(--teal);
}

.button-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--quiet-button-padding, 4px 0);
  color: var(--quiet-button-color, var(--teal-dark));
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
}

.button-quiet:hover {
  color: var(--quiet-button-hover-color, var(--navy-deep));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.button:disabled,
.button-quiet:disabled {
  cursor: default;
}

/* Shared label primitives */
.badge,
.pill,
.status {
  display: inline-flex;
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  font-size: var(--type-label);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.pill {
  border: 1px solid transparent;
}

/* Shared P/B/I/T evidence-state primitive. Category color communicates
   identity; fill communicates presence. */
.evidence-letter-chip {
  --evidence-chip-color: var(--evidence-property);
  --evidence-chip-background: var(--evidence-property-soft);
  width: var(--evidence-chip-size);
  height: var(--evidence-chip-size);
  flex: 0 0 var(--evidence-chip-size);
  display: inline-grid;
  place-items: center;
  color: var(--muted-soft);
  background: var(--paper);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-control-standard);
  font-size: var(--type-label);
  font-style: normal;
  font-weight: var(--weight-bold);
  line-height: 1;
}

.evidence-letter-chip.is-compact {
  width: var(--evidence-chip-size-compact);
  height: var(--evidence-chip-size-compact);
  flex-basis: var(--evidence-chip-size-compact);
  border-radius: var(--radius-control-standard);
  font-size: var(--type-label);
}

.evidence-letter-chip.is-business {
  --evidence-chip-color: var(--evidence-business);
  --evidence-chip-background: var(--evidence-business-soft);
}

.evidence-letter-chip.is-institutional {
  --evidence-chip-color: var(--evidence-institutional);
  --evidence-chip-background: var(--evidence-institutional-soft);
}

.evidence-letter-chip.is-transactions {
  --evidence-chip-color: var(--evidence-transactions);
  --evidence-chip-background: var(--evidence-transactions-soft);
}

.evidence-letter-chip.is-present {
  color: var(--evidence-chip-color);
  background: var(--evidence-chip-background);
  border-color: var(--evidence-chip-color);
  border-style: solid;
}

.evidence-letter-chip.is-empty {
  color: var(--muted-soft);
  background: var(--paper);
  border-color: var(--line-strong);
  border-style: dashed;
}

/* Shared form primitives */
.form-field {
  display: grid;
  gap: var(--space-2);
}

.form-field > label,
.form-label {
  color: var(--muted-strong);
  font-size: var(--type-label);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-label);
}

.form-input,
.form-textarea,
.form-field :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--field-line);
  border-radius: var(--radius-control-standard);
  font: inherit;
  font-size: var(--type-control);
}

.form-input,
.form-field :where(input:not([type="checkbox"]):not([type="radio"]), select) {
  min-height: var(--control-height);
}

.form-textarea,
.form-field textarea {
  resize: vertical;
}

/* Shared interaction states */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--focus-ring-radius);
}

.app-header a:focus-visible,
.app-header button:focus-visible {
  outline-color: var(--focus-ring-on-dark);
}