/**
 * Leadership Architecture — Design Tokens
 * Canonical source of truth for all CSS custom properties.
 *
 * Brand: Leadership Architecture (leadershiparch.com)
 * Product: Leadership Architecture OS (SaaS platform)
 *
 * Typography: Newsreader (serif) + Inter (sans). NO ITALICS.
 * Philosophy: Quiet Authority. No-Line Rule. Ambient Tonalism. Editorial Margin.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Newsreader:wght@400;500;600;700&display=swap');

:root {
  /* ── Font Families ───────────────────────────────────────────────── */
  --font-serif:  'Newsreader', Georgia, serif;
  --font-sans:   'Inter', system-ui, sans-serif;

  /* ── Brand Colors — "Quiet Authority" ───────────────────────────── */

  /* Deepest text / obsidian gradient end */
  --color-primary:            #000000;
  /* Primary container — CTAs, nav, dark sections (Indigo-Navy) */
  --color-primary-container:  #131b2e;
  /* Action Teal — submit buttons, accent bars, highlights */
  --color-action:             #006a61;
  /* Text on teal */
  --color-on-action:          #ffffff;

  /* Light teal variant — used in platform OS for states/gauges */
  --color-action-light:       #0D9488;

  /* ── Surface Colors — tonal layering ────────────────────────────── */
  --color-surface:            #f7f9fb;   /* Page base */
  --color-surface-low:        #f2f4f6;   /* Section backgrounds, alternating blocks */
  --color-surface-container:  #e6e8ea;   /* Muted containers */
  --color-white:              #ffffff;   /* Cards, inputs, highest-priority surfaces */

  /* ── Text Colors ────────────────────────────────────────────────── */
  --color-on-surface:         #191C1E;   /* Primary body text */
  --color-on-muted:           #45464D;   /* Metadata, labels, helper */
  --color-on-inverse:         #E2E8F0;   /* Text on dark (navy) surfaces */
  --color-on-inverse-muted:   #8A9BB8;   /* Muted text on dark surfaces */

  /* ── Semantic Colors ────────────────────────────────────────────── */
  --color-success:            #059669;
  --color-alert:              #DC2626;
  --color-info:               #2563EB;

  /* ── Outline ────────────────────────────────────────────────────── */
  --color-outline:            #76777D;
  /* Ghost border — used at 15% opacity only. "Felt, not seen." */
  --color-outline-subtle:     #C6C6CD;

  /* ── Score Band Colors ──────────────────────────────────────────── */
  --color-band-l1:            #DC2626;   /* Weak */
  --color-band-l2:            #F59E0B;   /* Moderate */
  --color-band-l3:            #2563EB;   /* Strong */
  --color-band-l4:            #059669;   /* Very Strong */
  --color-band-l5:            #006a61;   /* Top — same as action */

  /* Fit Matrix states */
  --color-fit-founder:        #f59e0b;
  --color-fit-simplicity:     #059669;
  --color-fit-stress:         #3b82f6;
  --color-fit-chaos:          #dc2626;
  --color-fit-scalable:       #006a61;

  /* ── Shadows — Ambient Tonalism ─────────────────────────────────── */
  /* Shadow color: #3f465c (on-primary-fixed-variant) at 6/8/10% opacity */
  --shadow-executive:         0 8px 32px rgba(63, 70, 92, 0.06);
  --shadow-executive-md:      0 8px 32px rgba(63, 70, 92, 0.08);
  --shadow-executive-lg:      0 16px 48px rgba(63, 70, 92, 0.10);

  /* ── Border Radius ──────────────────────────────────────────────── */
  --radius-card:              0.75rem;   /* 12px — md, for cards */
  --radius-card-lg:           1rem;      /* 16px — lg */
  --radius-element:           0.5rem;    /* 8px  — buttons, inputs */
  --radius-pill:              9999px;    /* badges */

  /* ── Spacing Scale ──────────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;

  /* ── Typography Scale ───────────────────────────────────────────── */
  --text-display-lg:   3.75rem;   /* 60px */
  --text-display:      3rem;      /* 48px */
  --text-h1:           1.875rem;  /* 30px */
  --text-h2:           1.5rem;    /* 24px */
  --text-h3:           1.125rem;  /* 18px */
  --text-body-md:      1rem;      /* 16px */
  --text-body:         0.875rem;  /* 14px */
  --text-label-md:     0.875rem;  /* 14px */
  --text-label:        0.75rem;   /* 12px */
  --text-eyebrow:      0.625rem;  /* 10px */

  --leading-display:  1.1;
  --leading-heading:  1.25;
  --leading-body:     1.6;
  --tracking-eyebrow: 0.05em;    /* Labels: ALL-CAPS, 0.05em per brief */
  --tracking-label:   0.05em;
  --tracking-tight:  -0.01em;

  /* ── Layout ─────────────────────────────────────────────────────── */
  --sidebar-width:      18rem;
  --content-max-w:      80rem;
  --diagnostic-max-w:  40rem;

  /* ── Z-Index ────────────────────────────────────────────────────── */
  --z-raised:   10;
  --z-overlay:  100;
  --z-modal:    200;
}

/* ── Semantic Typography Classes ─────────────────────────────────────── */

/* Display: Newsreader serif. 150% more bottom margin than top. */
.type-display-lg {
  font-family: var(--font-serif);
  font-size: var(--text-display-lg);
  font-weight: 600;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  font-style: normal;
  margin-top: 0.5em;
  margin-bottom: 1.5em;
}
.type-display {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: var(--leading-display);
  font-style: normal;
}
.type-h1 {
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  font-weight: 600;
  line-height: var(--leading-heading);
  font-style: normal;
}
.type-h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: var(--leading-heading);
  font-style: normal;
}
.type-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--leading-heading);
}
.type-body-md {
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  font-weight: 400;
  line-height: var(--leading-body);
}
.type-body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-body);
}
.type-label-md {
  font-family: var(--font-sans);
  font-size: var(--text-label-md);
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.type-label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.type-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

/* ── Semantic Component Classes ──────────────────────────────────────── */

body, .la-surface {
  background-color: var(--color-surface);
  font-family: var(--font-sans);
  color: var(--color-on-surface);
}

/* Card — surface lift, no shadow by default per brief */
.la-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
}

/* Card with ambient shadow (floating / interactive elements) */
.la-card-raised {
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-executive);
}

/* Executive Summary card — left teal accent bar, surface lift */
.la-card-accent {
  background: var(--color-white);
  border-radius: var(--radius-card);
  border-left: 4px solid var(--color-action);
}

/* CTA gradient — obsidian finish */
.la-gradient-cta {
  background: linear-gradient(160deg, var(--color-primary-container), var(--color-primary));
}

/* Glass nav — 70% opacity + 20px blur */
.la-glass {
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Buttons */
.la-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 500;
  border-radius: var(--radius-element);
  padding: 0.625rem 1.125rem;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, box-shadow 0.15s;
  text-decoration: none;
}
/* Primary action — Teal. Reserved for submit/buy final actions. */
.la-btn-action {
  background: var(--color-action);
  color: var(--color-on-action);
}
.la-btn-action:hover { opacity: 0.9; }

/* Executive primary — Indigo gradient. Standard high-level CTAs. */
.la-btn-primary {
  background: linear-gradient(160deg, var(--color-primary-container), var(--color-primary));
  color: #fff;
  box-shadow: var(--shadow-executive-md);
}
.la-btn-primary:hover { opacity: 0.92; }

/* Secondary */
.la-btn-secondary {
  background: var(--color-white);
  color: var(--color-on-surface);
  border: 1px solid rgba(198, 198, 205, 0.15); /* ghost border */
  box-shadow: var(--shadow-executive);
}
.la-btn-secondary:hover { background: var(--color-surface-low); }

/* Ghost / tertiary */
.la-btn-ghost {
  background: transparent;
  color: var(--color-on-muted);
}
.la-btn-ghost:hover { color: var(--color-on-surface); }

/* Input */
.la-input {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-on-surface);
  background: var(--color-white);
  border: 1px solid rgba(198, 198, 205, 0.15);
  border-radius: var(--radius-element);
  padding: 0.625rem 0.875rem;
  outline: none;
  transition: box-shadow 0.15s;
}
.la-input:focus {
  box-shadow: 0 0 0 3px rgba(0, 106, 97, 0.18);
}
.la-input::placeholder { color: var(--color-on-muted); }

.la-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-on-surface);
  margin-bottom: 0.375rem;
}

/* No italics — globally enforced */
em, i { font-style: normal; font-weight: 500; }

/* Focus ring — Teal */
*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-action), 0 0 0 4px rgba(0, 106, 97, 0.15);
}