/* ============================================================
   Biodiversiteettiyhdistys Design System — Colors & Typography Tokens
   Source: Biodiversiteettiyhdistys brand specification
   ============================================================ */

/* ─── Base Color Tokens ──────────────────────────────────── */
:root {
  /* Brand */
  --ph-orange: #41431b;
  /* Forest Olive — hover accent */
  --ph-fern: #8a9b5a;
  /* Fern — links, secondary accent */
  --ph-sage-green: #aeb784;
  /* Sage Green */
  --ph-amber: #6b7040;
  /* Moss — replaces amber */
  --ph-gold-border: #8a9b5a;
  /* Fern — replaces gold border */
  --ph-focus-blue: #3b82f6;

  /* Dark CTAs */
  --ph-near-black: #2e3012;
  /* Forest Olive Near-Black */
  --ph-dark-text: #111827;

  /* Text / Olive family */
  --ph-deep-olive: #23251d;
  --ph-olive-ink: #4d4f46;
  --ph-muted-olive: #65675e;
  --ph-sage-placeholder: #9ea096;

  /* Surfaces */
  --ph-warm-parchment: #fdfdf8;
  --ph-sage-cream: #eeefe9;
  --ph-light-sage: #e5e7e0;
  --ph-warm-tan: #d4c9b8;
  --ph-hover-white: #f4f4f4;

  /* Borders */
  --ph-sage-border: #bfc1b7;
  --ph-light-border: #b6b7af;

  /* Semantic aliases */
  --ph-bg: var(--ph-warm-parchment);
  --ph-bg-secondary: var(--ph-sage-cream);
  --ph-bg-tertiary: var(--ph-light-sage);
  --ph-text: var(--ph-olive-ink);
  --ph-text-strong: var(--ph-deep-olive);
  --ph-text-muted: var(--ph-muted-olive);
  --ph-text-placeholder: var(--ph-sage-placeholder);
  --ph-border: var(--ph-sage-border);
  --ph-border-secondary: var(--ph-light-border);
  --ph-accent-hover: var(--ph-fern);
  --ph-cta-bg: var(--ph-near-black);

  /* ─── Elevation / Shadow ────────────────────────────────── */
  --ph-shadow-none: none;
  --ph-shadow-elevated: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* ─── Border Radius ─────────────────────────────────────── */
  --ph-radius-xs: 2px;
  --ph-radius-sm: 4px;
  --ph-radius-md: 6px;
  --ph-radius-pill: 9999px;

  /* ─── Spacing Scale (base 8px) ──────────────────────────── */
  --ph-space-1: 2px;
  --ph-space-2: 4px;
  --ph-space-3: 6px;
  --ph-space-4: 8px;
  --ph-space-5: 10px;
  --ph-space-6: 12px;
  --ph-space-8: 16px;
  --ph-space-9: 18px;
  --ph-space-10: 24px;
  --ph-space-12: 32px;
  --ph-space-13: 34px;
  --ph-space-16: 48px;
  --ph-space-20: 64px;

  /* ─── Typography — Font Families ───────────────────────── */
  --ph-font-sans: 'IBM Plex Sans', -apple-system, system-ui, 'Avenir Next', Avenir,
    'Segoe UI', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
  --ph-font-mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* ─── Typography — Semantic Roles ──────────────────────── */

  /* Display Hero: 30px / 800 / lh 1.20 / ls -0.75px */
  --ph-type-display-size: 30px;
  --ph-type-display-weight: 800;
  --ph-type-display-lh: 1.20;
  --ph-type-display-ls: -0.75px;

  /* Section Heading: 36px / 700 / lh 1.50 */
  --ph-type-h1-size: 36px;
  --ph-type-h1-weight: 700;
  --ph-type-h1-lh: 1.50;
  --ph-type-h1-ls: 0px;

  /* Feature Heading: 24px / 700 / lh 1.33 */
  --ph-type-h2-size: 24px;
  --ph-type-h2-weight: 700;
  --ph-type-h2-lh: 1.33;
  --ph-type-h2-ls: 0px;

  /* Card Heading: 21.4px / 700 / lh 1.40 / ls -0.54px */
  --ph-type-h3-size: 21.4px;
  --ph-type-h3-weight: 700;
  --ph-type-h3-lh: 1.40;
  --ph-type-h3-ls: -0.54px;

  /* Sub-heading: 20px / 700 / lh 1.40 / ls -0.5px */
  --ph-type-h4-size: 20px;
  --ph-type-h4-weight: 700;
  --ph-type-h4-lh: 1.40;
  --ph-type-h4-ls: -0.5px;

  /* Body Emphasis: 19.3px / 600 / lh 1.56 / ls -0.48px */
  --ph-type-body-em-size: 19.3px;
  --ph-type-body-em-weight: 600;
  --ph-type-body-em-lh: 1.56;
  --ph-type-body-em-ls: -0.48px;

  /* Label Uppercase: 18px / 700 / lh 1.50 / uppercase */
  --ph-type-label-size: 18px;
  --ph-type-label-weight: 700;
  --ph-type-label-lh: 1.50;

  /* Body Semi: 18px / 600 / lh 1.56 */
  --ph-type-body-semi-size: 18px;
  --ph-type-body-semi-weight: 600;
  --ph-type-body-semi-lh: 1.56;

  /* Body: 16px / 400 / lh 1.50 */
  --ph-type-body-size: 16px;
  --ph-type-body-weight: 400;
  --ph-type-body-lh: 1.50;

  /* Body Medium: 16px / 500 */
  --ph-type-body-md-weight: 500;

  /* Body Relaxed: 15px / 400 / lh 1.71 */
  --ph-type-body-relaxed-size: 15px;
  --ph-type-body-relaxed-lh: 1.71;

  /* Nav/UI: 15px / 600 / lh 1.50 */
  --ph-type-nav-size: 15px;
  --ph-type-nav-weight: 600;
  --ph-type-nav-lh: 1.50;

  /* Caption: 14px / 400–700 / lh 1.43 */
  --ph-type-caption-size: 14px;
  --ph-type-caption-lh: 1.43;

  /* Small Label: 13px / 500–700 */
  --ph-type-small-size: 13px;
  --ph-type-small-lh: 1.50;

  /* Micro: 12px / 400–700 / lh 1.33 */
  --ph-type-micro-size: 12px;
  --ph-type-micro-lh: 1.33;

  /* Code: 14px / 500 / mono / lh 1.43 */
  --ph-type-code-size: 14px;
  --ph-type-code-weight: 500;
  --ph-type-code-lh: 1.43;
}

/* ─── Semantic Element Defaults ──────────────────────────── */
body {
  font-family: var(--ph-font-sans);
  font-size: var(--ph-type-body-size);
  font-weight: var(--ph-type-body-weight);
  line-height: var(--ph-type-body-lh);
  color: var(--ph-text);
  background-color: var(--ph-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1 {
  font-size: var(--ph-type-h1-size);
  font-weight: var(--ph-type-h1-weight);
  line-height: var(--ph-type-h1-lh);
  letter-spacing: var(--ph-type-h1-ls);
  color: var(--ph-text-strong);
}

h2 {
  font-size: var(--ph-type-h2-size);
  font-weight: var(--ph-type-h2-weight);
  line-height: var(--ph-type-h2-lh);
  letter-spacing: var(--ph-type-h2-ls);
  color: var(--ph-text-strong);
}

h3 {
  font-size: var(--ph-type-h3-size);
  font-weight: var(--ph-type-h3-weight);
  line-height: var(--ph-type-h3-lh);
  letter-spacing: var(--ph-type-h3-ls);
  color: var(--ph-text-strong);
}

h4 {
  font-size: var(--ph-type-h4-size);
  font-weight: var(--ph-type-h4-weight);
  line-height: var(--ph-type-h4-lh);
  letter-spacing: var(--ph-type-h4-ls);
  color: var(--ph-text-strong);
}

p {
  font-size: var(--ph-type-body-size);
  font-weight: var(--ph-type-body-weight);
  line-height: var(--ph-type-body-lh);
  color: var(--ph-text);
}

code,
pre {
  font-family: var(--ph-font-mono);
  font-size: var(--ph-type-code-size);
  font-weight: var(--ph-type-code-weight);
  line-height: var(--ph-type-code-lh);
}

a {
  color: var(--ph-text-strong);
  text-decoration: underline;
  transition: color 150ms ease;
}

a:hover {
  color: var(--ph-orange);
}

/* ─── Utility Classes ────────────────────────────────────── */

/* Type scale */
.ph-display {
  font-size: var(--ph-type-display-size);
  font-weight: var(--ph-type-display-weight);
  line-height: var(--ph-type-display-lh);
  letter-spacing: var(--ph-type-display-ls);
}

.ph-h1 {
  font-size: var(--ph-type-h1-size);
  font-weight: var(--ph-type-h1-weight);
  line-height: var(--ph-type-h1-lh);
}

.ph-h2 {
  font-size: var(--ph-type-h2-size);
  font-weight: var(--ph-type-h2-weight);
  line-height: var(--ph-type-h2-lh);
}

.ph-h3 {
  font-size: var(--ph-type-h3-size);
  font-weight: var(--ph-type-h3-weight);
  line-height: var(--ph-type-h3-lh);
  letter-spacing: var(--ph-type-h3-ls);
}

.ph-h4 {
  font-size: var(--ph-type-h4-size);
  font-weight: var(--ph-type-h4-weight);
  line-height: var(--ph-type-h4-lh);
  letter-spacing: var(--ph-type-h4-ls);
}

.ph-body-em {
  font-size: var(--ph-type-body-em-size);
  font-weight: var(--ph-type-body-em-weight);
  line-height: var(--ph-type-body-em-lh);
  letter-spacing: var(--ph-type-body-em-ls);
}

.ph-label {
  font-size: var(--ph-type-label-size);
  font-weight: var(--ph-type-label-weight);
  line-height: var(--ph-type-label-lh);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ph-body-semi {
  font-size: var(--ph-type-body-semi-size);
  font-weight: var(--ph-type-body-semi-weight);
  line-height: var(--ph-type-body-semi-lh);
}

.ph-body {
  font-size: var(--ph-type-body-size);
  font-weight: var(--ph-type-body-weight);
  line-height: var(--ph-type-body-lh);
}

.ph-body-md {
  font-size: var(--ph-type-body-size);
  font-weight: var(--ph-type-body-md-weight);
  line-height: var(--ph-type-body-lh);
}

.ph-body-relaxed {
  font-size: var(--ph-type-body-relaxed-size);
  font-weight: var(--ph-type-body-weight);
  line-height: var(--ph-type-body-relaxed-lh);
}

.ph-nav {
  font-size: var(--ph-type-nav-size);
  font-weight: var(--ph-type-nav-weight);
  line-height: var(--ph-type-nav-lh);
}

.ph-caption {
  font-size: var(--ph-type-caption-size);
  line-height: var(--ph-type-caption-lh);
}

.ph-small {
  font-size: var(--ph-type-small-size);
  line-height: var(--ph-type-small-lh);
}

.ph-micro {
  font-size: var(--ph-type-micro-size);
  line-height: var(--ph-type-micro-lh);
}

.ph-code {
  font-family: var(--ph-font-mono);
  font-size: var(--ph-type-code-size);
  font-weight: var(--ph-type-code-weight);
}

/* Colors */
.ph-text-primary {
  color: var(--ph-olive-ink);
}

.ph-text-strong {
  color: var(--ph-deep-olive);
}

.ph-text-muted {
  color: var(--ph-muted-olive);
}

.ph-text-orange {
  color: var(--ph-orange);
}

/* Backgrounds */
.ph-bg-parchment {
  background-color: var(--ph-warm-parchment);
}

.ph-bg-cream {
  background-color: var(--ph-sage-cream);
}

.ph-bg-sage {
  background-color: var(--ph-light-sage);
}

.ph-bg-tan {
  background-color: var(--ph-warm-tan);
}

.ph-bg-dark {
  background-color: var(--ph-near-black);
}

/* Borders */
.ph-border {
  border: 1px solid var(--ph-sage-border);
}

.ph-border-sm {
  border: 1px solid var(--ph-light-border);
}

/* Radius */
.ph-r-xs {
  border-radius: var(--ph-radius-xs);
}

.ph-r-sm {
  border-radius: var(--ph-radius-sm);
}

.ph-r-md {
  border-radius: var(--ph-radius-md);
}

.ph-r-pill {
  border-radius: var(--ph-radius-pill);
}

/* Buttons */
.ph-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ph-font-sans);
  font-size: var(--ph-type-nav-size);
  font-weight: var(--ph-type-nav-weight);
  cursor: pointer;
  border: none;
  transition: opacity 150ms ease, color 150ms ease, background-color 150ms ease;
  text-decoration: none;
  white-space: nowrap;
}

.ph-btn-primary {
  background: var(--ph-near-black);
  color: white;
  border-radius: var(--ph-radius-md);
  padding: 10px 12px;
}

.ph-btn-primary:hover {
  opacity: 0.7;
  color: var(--ph-amber);
}

.ph-btn-primary:active {
  opacity: 0.8;
  transform: scale(0.98);
}

.ph-btn-sage {
  background: var(--ph-light-sage);
  color: var(--ph-olive-ink);
  border-radius: var(--ph-radius-sm);
  padding: 4px 10px;
}

.ph-btn-sage:hover {
  background: var(--ph-hover-white);
  color: var(--ph-orange);
}

.ph-btn-tan {
  background: var(--ph-warm-tan);
  color: var(--ph-deep-olive);
  border-radius: 0;
  padding: 10px 16px;
  border: 1px solid var(--ph-gold-border);
}

.ph-btn-tan:hover {
  color: var(--ph-orange);
}

.ph-btn-ghost {
  background: var(--ph-warm-parchment);
  color: var(--ph-olive-ink);
  border-radius: var(--ph-radius-sm);
  padding: 4px 10px;
  border: 1px solid transparent;
}

.ph-btn-ghost:hover {
  color: var(--ph-orange);
}

/* Input */
.ph-input {
  background: var(--ph-sage-cream);
  border: 1px solid var(--ph-light-border);
  border-radius: var(--ph-radius-sm);
  padding: 8px 12px;
  font-family: var(--ph-font-sans);
  font-size: var(--ph-type-body-size);
  color: #374151;
  outline: none;
  transition: box-shadow 150ms ease;
  width: 100%;
  box-sizing: border-box;
}

.ph-input::placeholder {
  color: var(--ph-sage-placeholder);
}

.ph-input:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

/* Card */
.ph-card {
  background: var(--ph-warm-parchment);
  border: 1px solid var(--ph-sage-border);
  border-radius: var(--ph-radius-md);
  padding: 16px;
}

/* Badge / Pill */
.ph-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--ph-type-small-size);
  font-weight: 600;
  line-height: 1;
  padding: 3px 8px;
  border-radius: var(--ph-radius-pill);
  background: var(--ph-light-sage);
  color: var(--ph-olive-ink);
  border: 1px solid var(--ph-sage-border);
}