/*
 * HearPeers Community — Design System CSS
 * =========================================
 * Project:  MED-EL HearPeers Community
 * Version:  1.0.0  (2026-03-13)
 * Author:   Faber-Ludens Pro / Gonçalo Baptista Ferraz
 *
 * Sources:
 *   - Live site CSS bundles (entry.B0r3Danv.css, Vuetify)
 *   - Logo SVG
 *   - Existing presentation deliverables (connections-rbac-cross-analysis.html)
 *   - Brand materials (med-el-presentation-template)
 *
 * Usage:
 *   <link rel="stylesheet" href="../shared/hearpeers-community-design-system.css">
 *   (Adjust relative path as needed from your deliverable.)
 *
 *   All tokens are CSS custom properties on :root.
 *   Utility classes are prefixed `.hp-` to avoid collisions.
 *   Presentation-mode overrides are scoped to `.presentation`.
 */

/* ══════════════════════════════════════════════════════════════
   1. FONTS
══════════════════════════════════════════════════════════════ */

/*
 * GreycliffCF — commercial font loaded by the Vue app from their CDN.
 * The @font-face below mirrors the URL pattern observed from the live site.
 * If the CDN is unavailable (offline work), the system stack takes over.
 */
@font-face {
  font-family: 'GreycliffCF';
  src: url('https://www.hearpeers.com/fonts/GreycliffCF-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GreycliffCF';
  src: url('https://www.hearpeers.com/fonts/GreycliffCF-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GreycliffCF';
  src: url('https://www.hearpeers.com/fonts/GreycliffCF-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GreycliffCF';
  src: url('https://www.hearpeers.com/fonts/GreycliffCF-DemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GreycliffCF';
  src: url('https://www.hearpeers.com/fonts/GreycliffCF-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GreycliffCF';
  src: url('https://www.hearpeers.com/fonts/GreycliffCF-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GreycliffCF';
  src: url('https://www.hearpeers.com/fonts/GreycliffCF-Heavy.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Material Icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');


/* ══════════════════════════════════════════════════════════════
   2. DESIGN TOKENS
══════════════════════════════════════════════════════════════ */

:root {

  /* ── Brand Colors ── */
  --hp-red:        #C60C30;   /* Primary brand — logo, primary actions */
  --hp-red-dark:   #B01C2E;   /* High-contrast text/headings on red bg */
  --hp-red-pale:   #fdf2f3;   /* Tinted backgrounds, error surfaces */

  --hp-blue:       #1867c0;   /* Vuetify primary — UI actions, info */
  --hp-blue-pale:  #eff6ff;   /* Info surface */

  --hp-teal:       #48a9a6;   /* Secondary actions */
  --hp-teal-dark:  #007A6E;   /* High-contrast teal */

  --hp-green:      #00ae82;   /* Success / positive — site scrollbar accent */
  --hp-green-alt:  #2a7a3a;   /* Alternate green (darker, used in tables) */
  --hp-green-pale: #f0fdf4;   /* Success surface */

  --hp-lime:       #8DC63F;   /* Hook/arc decorative element — Community identity */

  --hp-magenta:    #b00057;   /* Accent */

  /* ── Neutral ── */
  --hp-dark:    #1a1a1a;
  --hp-mid:     #555555;
  --hp-light:   #888888;
  --hp-border:  #e8e8e8;
  --hp-bg:      #f4f4f4;
  --hp-white:   #ffffff;

  /* ── Typography ── */
  --hp-font: 'GreycliffCF', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --hp-font-size-base: 16px;

  /* ── Type scale ── */
  --hp-text-xs:  12px;
  --hp-text-sm:  14px;
  --hp-text-md:  16px;
  --hp-text-lg:  18px;
  --hp-text-xl:  20px;
  --hp-text-2xl: 24px;
  --hp-text-3xl: 28px;
  --hp-text-4xl: 32px;
  --hp-text-h3:  2rem;    /* 32px */
  --hp-text-h2:  2.4rem;  /* ~38px */
  --hp-text-h1:  2.8rem;  /* ~45px */

  /* ── Spacing (4px base unit) ── */
  --hp-space-1:  4px;
  --hp-space-2:  8px;
  --hp-space-3:  12px;
  --hp-space-4:  16px;
  --hp-space-5:  20px;
  --hp-space-6:  24px;
  --hp-space-8:  32px;
  --hp-space-10: 40px;
  --hp-space-12: 48px;
  --hp-space-16: 64px;

  /* ── Border Radius ── */
  --hp-radius-sm:     8px;
  --hp-radius-md:     16px;
  --hp-radius-lg:     20px;
  --hp-radius-pill:   100px;
  --hp-radius-circle: 50%;

  /* ── Shadows ── */
  --hp-shadow-sm:       0 0 10px 0 rgba(0,0,0,0.102);
  --hp-shadow-md:       0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px rgba(0,0,0,0.14), 0 1px 10px rgba(0,0,0,0.12);
  --hp-shadow-dropdown: 0 2px 10px rgba(0,0,0,0.1);
  --hp-shadow-elev1:    0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.14), 0 1px 3px rgba(0,0,0,0.12);

  /* ── Opacity states ── */
  --hp-opacity-high:     0.87;
  --hp-opacity-mid:      0.60;
  --hp-opacity-disabled: 0.38;

  /* ── Container widths ── */
  --hp-container-xl: 1520px;
  --hp-container-lg: 1200px;
  --hp-container-md: 950px;
}


/* ══════════════════════════════════════════════════════════════
   3. SEMANTIC COLOR ALIASES
   (mirrors Vuetify v-theme conventions)
══════════════════════════════════════════════════════════════ */

:root {
  --hp-color-primary:   var(--hp-red);
  --hp-color-secondary: var(--hp-teal);
  --hp-color-accent:    var(--hp-magenta);
  --hp-color-error:     var(--hp-red);
  --hp-color-warning:   #F59E0B;
  --hp-color-info:      var(--hp-blue);
  --hp-color-success:   var(--hp-green);
  --hp-color-surface:   var(--hp-white);
  --hp-color-background: var(--hp-bg);
  --hp-color-on-primary: var(--hp-white);
}


/* ══════════════════════════════════════════════════════════════
   4. BASE RESET / BODY
══════════════════════════════════════════════════════════════ */

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

body {
  font-family: var(--hp-font);
  font-size: var(--hp-font-size-base);
  color: var(--hp-dark);
  background: var(--hp-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ══════════════════════════════════════════════════════════════
   5. TYPOGRAPHY HELPERS
══════════════════════════════════════════════════════════════ */

.hp-h1 {
  font-size: var(--hp-text-h1);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--hp-dark);
}

.hp-h2 {
  font-size: var(--hp-text-h2);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--hp-dark);
}

.hp-h3 {
  font-size: var(--hp-text-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--hp-dark);
}

.hp-h4 {
  font-size: var(--hp-text-4xl);
  font-weight: 700;
  line-height: 1.25;
  color: var(--hp-dark);
}

.hp-h5 {
  font-size: var(--hp-text-2xl);
  font-weight: 700;
  line-height: 1.3;
  color: var(--hp-dark);
}

.hp-h6 {
  font-size: var(--hp-text-xl);
  font-weight: 700;
  line-height: 1.4;
  color: var(--hp-dark);
}

.hp-eyebrow {
  font-size: var(--hp-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--hp-red);
}

.hp-label {
  font-size: var(--hp-text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hp-mid);
}

.hp-body {
  font-size: var(--hp-text-md);
  font-weight: 400;
  line-height: 1.6;
  color: var(--hp-dark);
}

.hp-caption {
  font-size: var(--hp-text-xs);
  color: var(--hp-light);
  line-height: 1.4;
}

.hp-muted {
  color: var(--hp-light);
}


/* ══════════════════════════════════════════════════════════════
   6. COLOR UTILITIES
══════════════════════════════════════════════════════════════ */

/* Text colors */
.hp-text-red     { color: var(--hp-red); }
.hp-text-red-dark { color: var(--hp-red-dark); }
.hp-text-blue    { color: var(--hp-blue); }
.hp-text-teal    { color: var(--hp-teal); }
.hp-text-green   { color: var(--hp-green); }
.hp-text-lime    { color: var(--hp-lime); }
.hp-text-magenta { color: var(--hp-magenta); }
.hp-text-dark    { color: var(--hp-dark); }
.hp-text-mid     { color: var(--hp-mid); }
.hp-text-light   { color: var(--hp-light); }
.hp-text-white   { color: var(--hp-white); }

/* Background colors */
.hp-bg-red       { background-color: var(--hp-red); }
.hp-bg-red-pale  { background-color: var(--hp-red-pale); }
.hp-bg-blue      { background-color: var(--hp-blue); }
.hp-bg-blue-pale { background-color: var(--hp-blue-pale); }
.hp-bg-teal      { background-color: var(--hp-teal); }
.hp-bg-green     { background-color: var(--hp-green); }
.hp-bg-green-pale { background-color: var(--hp-green-pale); }
.hp-bg-lime      { background-color: var(--hp-lime); }
.hp-bg-dark      { background-color: var(--hp-dark); }
.hp-bg-white     { background-color: var(--hp-white); }
.hp-bg-surface   { background-color: var(--hp-bg); }


/* ══════════════════════════════════════════════════════════════
   7. COMPONENTS
══════════════════════════════════════════════════════════════ */

/* ── Buttons ── */

.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hp-space-2);
  padding: var(--hp-space-3) var(--hp-space-6);
  border-radius: var(--hp-radius-pill);
  border: none;
  background: var(--hp-red);
  color: var(--hp-white);
  font-family: var(--hp-font);
  font-size: var(--hp-text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, opacity 0.15s ease;
  line-height: 1;
}

.hp-btn:hover {
  background: var(--hp-red-dark);
}

.hp-btn:disabled,
.hp-btn[disabled] {
  opacity: var(--hp-opacity-disabled);
  cursor: not-allowed;
}

.hp-btn-outline {
  background: transparent;
  border: 2px solid var(--hp-red);
  color: var(--hp-red);
}

.hp-btn-outline:hover {
  background: var(--hp-red-pale);
}

.hp-btn-ghost {
  background: transparent;
  border: none;
  color: var(--hp-red);
}

.hp-btn-ghost:hover {
  background: var(--hp-red-pale);
}

.hp-btn-teal {
  background: var(--hp-teal);
}

.hp-btn-teal:hover {
  background: var(--hp-teal-dark);
}


/* ── Cards ── */

.hp-card {
  background: var(--hp-white);
  border-radius: var(--hp-radius-md);
  box-shadow: var(--hp-shadow-sm);
  padding: var(--hp-space-6);
}

.hp-card--elevated {
  box-shadow: var(--hp-shadow-md);
}

.hp-card--bordered {
  border: 1px solid var(--hp-border);
  box-shadow: none;
}


/* ── Role badges / Pills ── */

.hp-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--hp-space-1);
  padding: var(--hp-space-1) var(--hp-space-3);
  border-radius: var(--hp-radius-pill);
  font-size: var(--hp-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  line-height: 1.6;
}

/* Member — neutral blue */
.hp-pill--member {
  background: var(--hp-blue-pale);
  color: var(--hp-blue);
}

/* Mentor — teal */
.hp-pill--mentor {
  background: #e6f4f4;
  color: var(--hp-teal-dark);
}

/* MED-EL staff */
.hp-pill--medel {
  background: var(--hp-red-pale);
  color: var(--hp-red-dark);
}

/* Admin */
.hp-pill--admin {
  background: #fdf4ff;
  color: var(--hp-magenta);
}

/* MED-EL User (CI user, pre-activation) */
.hp-pill--medel-user {
  background: var(--hp-bg);
  color: var(--hp-mid);
  border: 1px solid var(--hp-border);
}

/* Guest / anonymous */
.hp-pill--guest {
  background: var(--hp-bg);
  color: var(--hp-light);
  border: 1px dashed var(--hp-border);
}


/* ── Tag labels (UX annotation tags) ── */

.hp-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--hp-space-2);
  border-radius: var(--hp-radius-sm);
  font-size: var(--hp-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.6;
  border-left: 3px solid currentColor;
}

.hp-tag--correction {
  background: var(--hp-red-pale);
  color: var(--hp-red-dark);
}

.hp-tag--recommendation {
  background: var(--hp-blue-pale);
  color: var(--hp-blue);
}

.hp-tag--fix {
  background: var(--hp-green-pale);
  color: var(--hp-green-alt);
}

.hp-tag--suggestion {
  background: #fffbeb;
  color: #92400e;
}


/* ── Note / Callout boxes ── */

.hp-note {
  display: flex;
  gap: var(--hp-space-3);
  padding: var(--hp-space-4) var(--hp-space-5);
  border-radius: var(--hp-radius-sm);
  border-left: 4px solid var(--hp-border);
  background: var(--hp-bg);
  font-size: var(--hp-text-sm);
  line-height: 1.6;
  color: var(--hp-dark);
}

.hp-note--info {
  border-left-color: var(--hp-blue);
  background: var(--hp-blue-pale);
  color: #1e3a5f;
}

.hp-note--warn {
  border-left-color: #F59E0B;
  background: #fffbeb;
  color: #78350f;
}

.hp-note--success {
  border-left-color: var(--hp-green);
  background: var(--hp-green-pale);
  color: var(--hp-green-alt);
}

.hp-note--error {
  border-left-color: var(--hp-red);
  background: var(--hp-red-pale);
  color: var(--hp-red-dark);
}

.hp-note--neutral {
  border-left-color: var(--hp-mid);
  background: var(--hp-bg);
  color: var(--hp-mid);
}


/* ── Tables ── */

.hp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--hp-text-sm);
  background: var(--hp-white);
  border-radius: var(--hp-radius-md);
  overflow: hidden;
  box-shadow: var(--hp-shadow-sm);
}

.hp-table thead tr {
  background: var(--hp-red);
  color: var(--hp-white);
}

.hp-table th {
  padding: var(--hp-space-3) var(--hp-space-4);
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  font-size: var(--hp-text-xs);
  letter-spacing: 0.06em;
}

.hp-table td {
  padding: var(--hp-space-3) var(--hp-space-4);
  border-bottom: 1px solid var(--hp-border);
  vertical-align: top;
}

.hp-table tbody tr:last-child td {
  border-bottom: none;
}

.hp-table tbody tr:nth-child(even) {
  background: var(--hp-bg);
}

.hp-table--compact th,
.hp-table--compact td {
  padding: var(--hp-space-2) var(--hp-space-3);
  font-size: var(--hp-text-xs);
}


/* ── Brand decorative hook (lime green arc) ── */

.hp-hook {
  display: block;
  width: 60px;
  height: 60px;
  border: 6px solid var(--hp-lime);
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
}

/* Larger variant for slide headers */
.hp-hook--lg {
  width: 120px;
  height: 120px;
  border-width: 10px;
}

/* Positioned decorative variant */
.hp-hook-deco {
  position: absolute;
  pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════
   8. LAYOUT HELPERS
══════════════════════════════════════════════════════════════ */

.hp-container {
  width: 100%;
  max-width: var(--hp-container-lg);
  margin-inline: auto;
  padding-inline: var(--hp-space-6);
}

.hp-container--xl { max-width: var(--hp-container-xl); }
.hp-container--md { max-width: var(--hp-container-md); }

.hp-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hp-space-6);
}

.hp-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hp-space-6);
}

.hp-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--hp-space-4);
}

.hp-flex {
  display: flex;
  align-items: center;
  gap: var(--hp-space-4);
}

.hp-flex--wrap { flex-wrap: wrap; }
.hp-flex--col  { flex-direction: column; align-items: flex-start; }
.hp-flex--between { justify-content: space-between; }
.hp-flex--center  { justify-content: center; }

.hp-divider {
  border: none;
  border-top: 1px solid var(--hp-border);
  margin-block: var(--hp-space-4);
}


/* ══════════════════════════════════════════════════════════════
   9. PRESENTATION-MODE OVERRIDES
   Scoped to .presentation — mirrors slide deck conventions.
   Canvas: 1920×1080, side margin 110px.
══════════════════════════════════════════════════════════════ */

.presentation {
  --slide-w: 1920px;
  --slide-h: 1080px;
  --mg:      110px;
  --pad:     70px;

  /* Override type scale for slide context */
  --hp-text-h1: 76px;
  --hp-text-h2: 56px;
  --hp-text-h3: 40px;
  --hp-text-4xl: 32px;
  --hp-text-xl: 26px;
  --hp-text-lg: 22px;
  --hp-text-md: 20px;
  --hp-text-sm: 18px;
  --hp-text-xs: 16px;

  font-family: var(--hp-font);
  font-size: 20px;
}

.presentation .hp-eyebrow {
  font-size: 20px;
  letter-spacing: 3px;
}

.presentation .hp-card {
  border-radius: var(--hp-radius-lg);
  padding: var(--hp-space-8);
}

.presentation .hp-table th,
.presentation .hp-table td {
  padding: var(--hp-space-4) var(--hp-space-5);
  font-size: 18px;
}

.presentation .hp-note {
  font-size: 20px;
  padding: var(--hp-space-6) var(--hp-space-8);
}

.presentation .hp-hook--lg {
  width: 200px;
  height: 200px;
  border-width: 16px;
}