/* ============================================================
 * ALEETH · Brand Identity System v1.0
 * Source: ALEETH_Branding_Kit (PDF, locked 2026-05-25)
 * INTELLIGENCE. INSTITUTIONAL. INEVITABLE.
 * ============================================================ */

/* ---------- TOKENS ---------- */

:root {
  /* Core · Structural */
  --aleeth-obsidian:       #0A0A0B;   /* Primary background */
  --aleeth-vault:          #14161A;   /* Surface · cards, panels */
  --aleeth-sterling:       #2A2E35;   /* Borders, dividers */
  --aleeth-ash:            #B8BCC4;   /* Secondary text */
  --aleeth-cathedral:      #F4F4F2;   /* Primary text */

  /* Accent · Signal */
  --aleeth-gold:           #C9A961;   /* Brand mark · trust */
  --aleeth-bronze:         #8C6A2E;   /* Depth · hover */
  --aleeth-cyan:           #4FB3C9;   /* Data · proof */

  /* State (used only when true state warrants) */
  --aleeth-signal:         #6B8E5C;   /* live / compliant / pass */
  --aleeth-alarm:          #B85A4C;   /* critical / non-compliant / halt */

  /* Type */
  --aleeth-font-display:   'Bodoni Moda', 'Bodoni 72', 'Didot', Georgia, serif;
  --aleeth-font-sans:      'Inter', system-ui, -apple-system, sans-serif;
  --aleeth-font-mono:      'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Tracking */
  --aleeth-tracking-eyebrow: 0.22em;
  --aleeth-tracking-display: 0.04em;
  --aleeth-tracking-tight:  -0.01em;
}

/* ---------- WORDMARK ---------- */

.aleeth-wordmark {
  font-family: var(--aleeth-font-display);
  font-weight: 500;
  color: var(--aleeth-gold);
  letter-spacing: var(--aleeth-tracking-display);
  line-height: 1;
  text-transform: uppercase;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.aleeth-wordmark::after {
  content: '';
  display: block;
  width: 60%;
  height: 1px;
  background: var(--aleeth-gold);
  opacity: 0.85;
}

.aleeth-wordmark-sm  { font-size: 18px; }
.aleeth-wordmark-md  { font-size: 28px; }
.aleeth-wordmark-lg  { font-size: 56px; }
.aleeth-wordmark-xl  { font-size: 120px; }

/* Inline wordmark (no underline · for nav/header) */
.aleeth-wordmark-inline {
  font-family: var(--aleeth-font-display);
  font-weight: 500;
  color: var(--aleeth-gold);
  letter-spacing: var(--aleeth-tracking-display);
  text-transform: uppercase;
}

/* ---------- TAGLINE / SLOGAN ---------- */

.aleeth-tagline {
  font-family: var(--aleeth-font-sans);
  font-weight: 400;
  color: var(--aleeth-cathedral);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 14px;
}

.aleeth-tagline-lg { font-size: 18px; }

.aleeth-descriptor {
  font-family: var(--aleeth-font-sans);
  font-weight: 300;
  color: var(--aleeth-ash);
  font-size: 16px;
  letter-spacing: 0.02em;
}

/* ---------- EYEBROW (small caps label · mono) ---------- */

.aleeth-eyebrow {
  font-family: var(--aleeth-font-mono);
  font-size: 10px;
  letter-spacing: var(--aleeth-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--aleeth-gold);
}

.aleeth-eyebrow-ash {
  font-family: var(--aleeth-font-mono);
  font-size: 10px;
  letter-spacing: var(--aleeth-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--aleeth-ash);
}

/* ---------- CTA ---------- */

.aleeth-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  font-family: var(--aleeth-font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aleeth-gold);
  background: transparent;
  border: 1px solid var(--aleeth-gold);
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.aleeth-cta:hover {
  background: var(--aleeth-gold);
  color: var(--aleeth-obsidian);
}

.aleeth-cta-solid {
  background: var(--aleeth-gold);
  color: var(--aleeth-obsidian);
}

.aleeth-cta-solid:hover {
  background: var(--aleeth-bronze);
  color: var(--aleeth-cathedral);
}

/* ---------- CORNER BRACKETS (architectural frame) ---------- */

.aleeth-frame {
  position: relative;
  padding: 48px;
}

.aleeth-frame::before,
.aleeth-frame::after,
.aleeth-frame > .aleeth-frame-tr,
.aleeth-frame > .aleeth-frame-bl {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--aleeth-gold);
  border-style: solid;
  border-width: 0;
}

.aleeth-frame::before {
  top: 0; left: 0;
  border-top-width: 1px;
  border-left-width: 1px;
}

.aleeth-frame::after {
  bottom: 0; right: 0;
  border-bottom-width: 1px;
  border-right-width: 1px;
}

.aleeth-frame > .aleeth-frame-tr {
  top: 0; right: 0;
  border-top-width: 1px;
  border-right-width: 1px;
}

.aleeth-frame > .aleeth-frame-bl {
  bottom: 0; left: 0;
  border-bottom-width: 1px;
  border-left-width: 1px;
}

/* ---------- SYSTEM ONLINE FOOTER ---------- */

.aleeth-system-online {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--aleeth-font-mono);
  font-size: 10px;
  letter-spacing: var(--aleeth-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--aleeth-gold);
}

.aleeth-system-online::before,
.aleeth-system-online::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--aleeth-gold);
  box-shadow: 0 0 8px rgba(201, 169, 97, 0.6);
}

/* ---------- TILE / CARD ---------- */

.aleeth-tile {
  background: var(--aleeth-vault);
  border: 1px solid var(--aleeth-sterling);
  padding: 24px;
  transition: border-color 200ms ease;
}

.aleeth-tile:hover {
  border-color: var(--aleeth-gold);
}

.aleeth-tile-flat {
  background: transparent;
  border: 1px solid var(--aleeth-sterling);
  padding: 24px;
}

.aleeth-tile-label {
  font-family: var(--aleeth-font-mono);
  font-size: 10px;
  letter-spacing: var(--aleeth-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--aleeth-ash);
  margin-bottom: 12px;
}

.aleeth-tile-value {
  font-family: var(--aleeth-font-mono);
  font-size: 28px;
  font-weight: 500;
  color: var(--aleeth-cathedral);
  line-height: 1;
}

.aleeth-tile-value-gold {
  color: var(--aleeth-gold);
}

/* ---------- STATUS PILLS (used sparingly per usage ratio) ---------- */

.aleeth-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-family: var(--aleeth-font-mono);
  font-size: 10px;
  letter-spacing: var(--aleeth-tracking-eyebrow);
  text-transform: uppercase;
  border: 1px solid var(--aleeth-gold);
  color: var(--aleeth-gold);
}

.aleeth-pill-signal {
  border-color: var(--aleeth-signal);
  color: var(--aleeth-signal);
}

.aleeth-pill-alarm {
  border-color: var(--aleeth-alarm);
  color: var(--aleeth-alarm);
}

.aleeth-pill-cyan {
  border-color: var(--aleeth-cyan);
  color: var(--aleeth-cyan);
}

/* ---------- HAIRLINE RULES ---------- */

.aleeth-rule {
  width: 100%;
  height: 1px;
  background: var(--aleeth-sterling);
  border: 0;
  margin: 0;
}

.aleeth-rule-gold {
  background: var(--aleeth-gold);
}

/* ---------- DATA MONO (for receipt IDs, hashes, scores) ---------- */

.aleeth-data {
  font-family: var(--aleeth-font-mono);
  font-size: 12px;
  color: var(--aleeth-cathedral);
  letter-spacing: 0.02em;
}

.aleeth-data-gold { color: var(--aleeth-gold); }
.aleeth-data-cyan { color: var(--aleeth-cyan); }
.aleeth-data-ash  { color: var(--aleeth-ash); }

/* ---------- GLOBAL · pure-black background guarantee ---------- */

.aleeth-bg-obsidian {
  background: var(--aleeth-obsidian);
  color: var(--aleeth-cathedral);
}

.aleeth-bg-vault {
  background: var(--aleeth-vault);
  color: var(--aleeth-cathedral);
}

/* ---------- LEGACY COMPATIBILITY OVERRIDES ---------- *
 * Existing TSM-ICA stylesheets reference hex literals like
 * #0a0b0d, #c9a84c, #e6e1cd, #14161c, #2a2620. We keep the
 * old surfaces working while migrating by mapping them via
 * CSS variable overrides at the :root scope.
 * --------------------------------------------------- */