/* ═══════════════════════════════════════════════════════════════
   Alsteni Medical — Design System Tokens (Single Source of Truth)
   Every page imports this file. No page may override these values.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── BACKGROUNDS ─── */
  --bg-primary:        #0D1B2A;    /* Page canvas / body */
  --bg-surface:        #1B263B;    /* Dark sections: hero, how it works, team, contact */
  --bg-card:           #243042;    /* Cards, elevated containers */
  --bg-elevated:       #2D3A4F;    /* Modals, popovers, dropdowns */
  --bg-evidence:       #EDF1F7;    /* Light sections: research, clinical data, regulatory */
  --bg-input:          #09111A;    /* Form inputs on dark backgrounds */

  /* ─── ACCENT: CYAN ─── */
  --accent:            #00BCD4;    /* Primary brand cyan */
  --accent-hover:      #00ACC1;    /* Button hover */
  --accent-bright:     #00E5FF;    /* Sparingly — stat numbers, key highlights only */
  --accent-dim:        rgba(0,188,212,0.12);   /* Tinted card backgrounds */
  --accent-glow:       rgba(0,188,212,0.08);   /* Subtle glow effects */
  --accent-subtle:     rgba(0,188,212,0.05);   /* Faintest tint */
  --accent-border:     rgba(0,188,212,0.15);   /* Section dividers, card borders */

  /* ─── ACCENT: GOLD ─── */
  --gold:              #D4AF37;    /* Secondary accent — badges, awards, milestones */
  --gold-dim:          rgba(212,175,55,0.10);  /* Gold tinted backgrounds */
  --gold-d:            rgba(212,175,55,0.12); /* Gold tinted (admin variant) */

  /* ─── TEXT ON DARK BACKGROUNDS ─── */
  --text-primary:      #E8EAED;    /* Body text on dark */
  --text-secondary:    #d1d5db;    /* Supporting text, descriptions on dark */
  --text-tertiary:     #8899AA;    /* Muted labels, captions on dark */
  --text-accent:       #00BCD4;    /* Cyan text sparingly — links, labels */

  /* ─── TEXT ON LIGHT BACKGROUNDS (--bg-evidence sections) ─── */
  --text-on-light:     #1B263B;    /* Body text on evidence sections */
  --text-on-light-secondary: #415A77;  /* Supporting text on evidence sections */
  --text-on-light-muted: #6B7B8F;     /* Captions on evidence sections */

  /* ─── TEXT ON ACCENT BACKGROUNDS ─── */
  --text-on-accent:    #0D1B2A;    /* Dark text on cyan buttons/badges */

  /* ─── BUTTONS ─── */
  --btn-primary-bg:    #00BCD4;    /* Cyan fill */
  --btn-primary-text:  #0D1B2A;    /* Dark text on cyan buttons */
  --btn-primary-hover: #00ACC1;    /* Hover state */
  --btn-outline-border: #00BCD4;   /* Outline button border */
  --btn-outline-text:  #00BCD4;    /* Outline button text */
  --btn-outline-hover-bg: rgba(0,188,212,0.08); /* Outline hover fill */

  /* ─── BORDERS ─── */
  --border-subtle:     rgba(255,255,255,0.06); /* Default on dark */
  --border-medium:     rgba(255,255,255,0.10); /* Visible on dark */
  --border-on-light:   rgba(27,38,59,0.10);   /* Borders on evidence sections */

  /* ─── STATUS ─── */
  --error:             #CF6679;
  --error-dim:         rgba(207,102,121,0.06);
  --error-border:      rgba(207,102,121,0.18);
  --success:           #4CAF50;

  /* ─── SHADOWS ─── */
  --shadow-card:       0 4px 24px rgba(0,0,0,0.2);
  --shadow-elevated:   0 8px 32px rgba(0,0,0,0.3);

  /* ─── LAYOUT ─── */
  --max-width:         1200px;
  --max-width-narrow:  780px;

  /* ─── SPACING ─── */
  --section-padding:   80px;       /* Vertical padding between sections */
  --section-transition: 80px;      /* Padding at dark/light transitions */

  /* ─── RADIUS ─── */
  --radius-sm:         8px;
  --radius-md:         16px;
  --radius-lg:         24px;
  --radius-pill:       100px;

  /* ─── NAVBAR ─── */
  --nav-bg:            rgba(13, 27, 42, 0.88);
  --nav-bg-scroll:     rgba(13, 27, 42, 0.97);
  --nav-border:        rgba(180, 197, 228, 0.06);
  --nav-text:          rgba(220, 225, 234, 0.58);
  --nav-text-active:   rgba(240, 243, 248, 0.95);
  --nav-height:        76px;
  --nav-height-scroll: 64px;

  /* ─── FONTS ─── */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono:  'Courier New', Courier, monospace;

  /* ─── TYPE SCALE ─── */
  --type-xs:    11px;
  --type-sm:    13px;
  --type-md:    15px;
  --type-lg:    18px;

  /* ─── EASING ─── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);

  /* ─── NEWS CATEGORY COLORS ─── */
  --cat-regulatory:    #00BCD4;
  --cat-clinical:      #4DD0E1;
  --cat-company:       #C9A96E;
  --cat-manufacturing: #8B9DC3;
  --cat-publication:   #A78BFA;
  --cat-ip:            #f59e0b;
}

/* ─── Section Transitions (dark ↔ light) ───
   22-stop ramp from --bg-primary (#0D1B2A) to --bg-evidence (#EDF1F7).
   All stops share hue ~212° at decreasing saturation toward the light end.
   No cyan/teal pull — pure desaturated navy-to-slate-to-silver ramp.
   Starts at exact body color to eliminate any visible seam. */
.section-transition-dark-to-light {
  height: 300px;
  pointer-events: none;
  background: linear-gradient(180deg,
    #0D1B2A 0%,
    #0D1B2A 3%,
    #101E2E 7%,
    #142334 12%,
    #19293C 17%,
    #1E3044 22%,
    #24384E 28%,
    #2C4158 34%,
    #364C64 40%,
    #425871 46%,
    #506576 51%,
    #5E7383 56%,
    #6E8291 61%,
    #7F919E 66%,
    #90A0AB 71%,
    #A0AEB8 76%,
    #B0BCC5 80%,
    #BFC9D1 84%,
    #CDD5DC 88%,
    #DAE0E7 92%,
    #E4E9EF 95%,
    #EDF1F7 98%,
    #EDF1F7 100%
  );
}
.section-transition-light-to-dark {
  height: 300px;
  pointer-events: none;
  background: linear-gradient(180deg,
    #EDF1F7 0%,
    #EDF1F7 2%,
    #E4E9EF 5%,
    #DAE0E7 8%,
    #CDD5DC 12%,
    #BFC9D1 16%,
    #B0BCC5 20%,
    #A0AEB8 24%,
    #90A0AB 29%,
    #7F919E 34%,
    #6E8291 39%,
    #5E7383 44%,
    #506576 49%,
    #425871 54%,
    #364C64 60%,
    #2C4158 66%,
    #24384E 72%,
    #1E3044 78%,
    #19293C 83%,
    #142334 88%,
    #101E2E 93%,
    #0D1B2A 97%,
    #0D1B2A 100%
  );
}

/* ═══════════════════════════════════════════════════════════════
   UNIVERSAL POLISH — applies site-wide via variables.css import
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Custom text selection — brand cyan tint ─── */
::selection {
  background: rgba(0, 188, 212, 0.28);
  color: var(--text-primary);
  text-shadow: none;
}
::-moz-selection {
  background: rgba(0, 188, 212, 0.28);
  color: var(--text-primary);
  text-shadow: none;
}

/* ─── 2. Custom scrollbar (desktop) — thin cyan on dark track ─── */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 188, 212, 0.3) rgba(13, 27, 42, 0.2);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(13, 27, 42, 0.2);
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 188, 212, 0.3);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 188, 212, 0.5);
  background-clip: padding-box;
}

/* ─── 3. Universal button active/pressed feedback ─── */
button:active:not(:disabled),
.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled),
a.btn-primary:active,
a.btn-secondary:active,
[role="button"]:active:not([aria-disabled="true"]) {
  transform: scale(0.97);
  transition: transform 0.08s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Respect reduced motion — no scale on :active */
@media (prefers-reduced-motion: reduce) {
  button:active,
  .btn-primary:active,
  .btn-secondary:active,
  a.btn-primary:active,
  a.btn-secondary:active,
  [role="button"]:active {
    transform: none !important;
  }
}

/* ─── 4. Scroll progress indicator (top of page) ─── */
.al-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: transparent;
  z-index: 1002;
  pointer-events: none;
}
.al-scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
    var(--accent) 0%,
    var(--accent-bright) 100%);
  box-shadow: 0 0 8px rgba(0, 188, 212, 0.5);
  transition: width 0.08s linear;
  transform-origin: left center;
  will-change: width;
}
@media (prefers-reduced-motion: reduce) {
  .al-scroll-progress-bar { transition: none; }
}