/*
 * 986 University — Brand Design System
 * ======================================
 * Update these values when the official brand guide lands.
 * Source of truth: "986 Brand Guidelines - 2026.pdf"
 *
 * Primary: Teal #14A99E
 * Secondary: Light Gray #F1F2F2
 * Ink: #171717 (dark surfaces, text)
 * Typography: Bebas Neue (display), Open Sans (body), Georgia (serif complement)
 */

/* ── Google Fonts ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

/* ── Brand Tokens (CSS Custom Properties) ──────────────────────── */
:root {
  /* ─ Brand Colors ─ */
  --brand-teal:         #14A99E;
  --brand-teal-light:   #3DC7BD;
  --brand-teal-dark:    #0E8A81;
  --brand-teal-soft:    rgba(20, 169, 158, 0.12);
  --brand-teal-hover:   rgba(20, 169, 158, 0.18);
  --brand-gray-light:   #F1F2F2;   /* official secondary brand color */
  --brand-ink:          #171717;
  --brand-white:        #ffffff;
  --brand-black:        #000000;

  /* ─ UI Functional Colors ─ */
  --ui-gray:            #6D6D6C;   /* functional text gray */
  --ui-gray-muted:      #8a8a89;
  --ui-gray-dim:        #4a4a49;
  --ui-border:          #2d2d2d;
  --ui-border-light:    #e0e0e0;
  --ui-surface-dark:    #1a1a1a;
  --ui-surface-darker:  #111111;
  --ui-surface-light:   #f5f5f5;

  /* ─ Semantic Colors (unchanged from legacy — universal) ─ */
  --color-success:      #2ecc71;
  --color-success-soft: rgba(46, 204, 113, 0.15);
  --color-error:        #f87171;
  --color-error-soft:   rgba(248, 113, 113, 0.12);
  --color-warning:      #fbbf24;
  --color-warning-soft: rgba(251, 191, 36, 0.12);
  --color-info:         #60a5fa;
  --color-info-soft:    rgba(96, 165, 250, 0.12);
  --color-purple:       #a78bfa;
  --color-purple-soft:  rgba(139, 92, 246, 0.12);

  /* ─ Typography ─ */
  --font-display:       'Bebas Neue', 'Impact', sans-serif;
  --font-body:          'Open Sans', 'Segoe UI', system-ui, sans-serif;
  --font-serif:         'Georgia', 'Times New Roman', serif;
  --font-mono:          'SF Mono', 'Menlo', monospace;

  /* ─ Type Scale ─ */
  --text-xs:            0.62rem;
  --text-sm:            0.72rem;
  --text-base:          0.85rem;
  --text-md:            0.95rem;
  --text-lg:            1.1rem;
  --text-xl:            1.4rem;
  --text-2xl:           2rem;
  --text-3xl:           2.5rem;

  /* ─ Font Weights ─ */
  --weight-normal:      400;
  --weight-semi:        600;
  --weight-bold:        700;
  --weight-extra:       800;

  /* ─ Spacing Scale ─ */
  --space-xs:           4px;
  --space-sm:           8px;
  --space-md:           14px;
  --space-lg:           20px;
  --space-xl:           28px;
  --space-2xl:          40px;

  /* ─ Radii ─ */
  --radius-sm:          6px;
  --radius-md:          10px;
  --radius-lg:          14px;
  --radius-xl:          20px;
  --radius-full:        999px;

  /* ─ Shadows ─ */
  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md:          0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg:          0 8px 28px rgba(0, 0, 0, 0.25);

  /* ─ Z-Index Scale ─ */
  --z-base:             1;
  --z-dropdown:         10;
  --z-sticky:           40;
  --z-fixed:            50;
  --z-modal:            200;
  --z-toast:            999;
}

/* ── Base Reset with Brand Fonts ───────────────────────────────── */
body {
  font-family: var(--font-body);
}

h1, h2, h3,
.hero-name,
.page-title,
.stat-val {
  font-family: var(--font-display);
  letter-spacing: 1px;
}

/* ── Brand Button Classes ──────────────────────────────────────── */
.btn-brand {
  background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-light));
  color: var(--brand-white);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-brand:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(20, 169, 158, 0.35);
}

.btn-brand-outline {
  background: var(--brand-teal-soft);
  border: 1px solid rgba(20, 169, 158, 0.3);
  color: var(--brand-teal);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-brand-outline:hover {
  background: var(--brand-teal-hover);
}

.btn-brand-ghost {
  background: transparent;
  border: 1px solid var(--ui-border);
  color: var(--ui-gray);
  font-family: var(--font-body);
  font-weight: var(--weight-semi);
  font-size: var(--text-sm);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-brand-ghost:hover {
  border-color: var(--brand-teal);
  color: var(--brand-teal);
}

/* ── Brand Card Classes ────────────────────────────────────────── */
.card-brand {
  background: var(--ui-surface-dark);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: all 0.18s;
}
.card-brand:hover {
  border-color: var(--brand-teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card-brand-accent {
  background: var(--ui-surface-dark);
  border: 1px solid var(--ui-border);
  border-top: 3px solid var(--brand-teal);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

/* ── Brand Badge Classes ───────────────────────────────────────── */
.badge-brand {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-teal {
  background: var(--brand-teal-soft);
  border: 1px solid rgba(20, 169, 158, 0.3);
  color: var(--brand-teal);
}
.badge-success {
  background: var(--color-success-soft);
  border: 1px solid rgba(46, 204, 113, 0.3);
  color: var(--color-success);
}
.badge-error {
  background: var(--color-error-soft);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: var(--color-error);
}
.badge-warning {
  background: var(--color-warning-soft);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: var(--color-warning);
}

/* ── Brand Heading Classes ─────────────────────────────────────── */
.heading-display {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-white);
}

.heading-section {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brand-teal);
}

/* ── Brand Input Classes ───────────────────────────────────────── */
.input-brand {
  font-family: var(--font-body);
  background: var(--ui-surface-dark);
  border: 1px solid var(--ui-border);
  color: #e2e8f0;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  outline: none;
  transition: border-color 0.2s;
}
.input-brand:focus {
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 3px rgba(20, 169, 158, 0.1);
}

/* ── Brand Progress Bar ────────────────────────────────────────── */
.progress-brand {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-brand-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-teal), var(--brand-teal-light));
  border-radius: var(--radius-full);
  transition: width 0.6s ease;
}

/* ── Utility: brand accent text ────────────────────────────────── */
.text-brand { color: var(--brand-teal); }
.text-brand-light { color: var(--brand-teal-light); }
.text-muted { color: var(--ui-gray); }
.text-dim { color: var(--ui-gray-muted); }
.bg-brand-soft { background: var(--brand-teal-soft); }

/* ── Brand display typeface ──────────────────────────────────────────
   The 986 brand guide pairs Bebas Neue (display) with Open Sans (body).
   Applied best-effort to top-level headings. */
h1 {
  font-family: 'Bebas Neue', 'Open Sans', system-ui, sans-serif;
  letter-spacing: 0.5px;
}

/* ── Light-mode panel fixes (986 branding) ───────────────────────────
   The dashboard hero + "Ask 986" panels and the orientation role cards
   were authored dark-only; theme.js recolors their text for light mode
   but not their backgrounds, leaving low-contrast dark-on-dark. These
   rules make them clean light cards in light mode. Dark mode untouched
   (every selector is scoped to [data-theme="light"]). */
[data-theme="light"] .hero,
[data-theme="light"] #ask986-widget > div,
[data-theme="light"] .orient-card {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .hero-name,
[data-theme="light"] .ring-pct,
[data-theme="light"] .orient-card .name { color: #171717 !important; }
[data-theme="light"] .hero-role,
[data-theme="light"] .orient-card .meta { color: #6d6d6c !important; }
[data-theme="light"] .ring-bg { stroke: rgba(0,0,0,0.08) !important; }
[data-theme="light"] #ask986-widget [style*="color:white"] { color: #171717 !important; }
[data-theme="light"] #ask986-widget [style*="255,255,255,0.5"] { color: #6d6d6c !important; }
[data-theme="light"] #ask986-input {
  background: #ffffff !important; color: #171717 !important; border-color: #d0d0d0 !important;
}
[data-theme="light"] #ask986-answer { color: #171717 !important; }