/* ==========================================================================
   OBSY v2.0 DESIGN TOKENS
   Target: Adult Pedagogical Workspace
   All production text pairings certified under WCAG 2.2 Level AAA (>= 7.0:1)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap');

:root {
  /* Surface Foundations */
  --obsy-canvas-base: #FAF9F5;       /* Warm paper background */
  --obsy-canvas-card: #F4F0EA;       /* Soft container card */
  --obsy-canvas-elevated: #EDE7DE;   /* Active states, tab rails, dropdowns */

  /* Ink & Typography */
  --obsy-ink-primary: #1F2421;      /* Deep charcoal ink (14.28:1 contrast on base) */
  --obsy-ink-secondary: #47524C;    /* Muted charcoal body (7.15:1 contrast on base) */
  --obsy-ink-tertiary: #6E7972;     /* Non-text structural labels */

  /* Structural Borders */
  --obsy-border-subtle: #E2DBD0;    /* Structural divider lines */
  --obsy-border-strong: #C4B9AA;    /* Active card boundaries and input fields */

  /* Primary Accent: Terracotta (Capture, Audio, Primary Actions) */
  --obsy-terracotta: #E06D53;        /* Base visual accent, audio pulse, record cues */
  --obsy-terracotta-dark: #8E2B16;   /* Accessible text terracotta (7.02:1 on base) */
  --obsy-terracotta-soft: #F9EBE7;   /* Subdued badge and selection fills */

  /* Secondary Accent: Muted Sage (Status, Governance, Statutory Indicators) */
  --obsy-sage: #4A6B5D;              /* Badge surfaces and statutory indicators */
  --obsy-sage-dark: #274035;         /* Accessible text sage (7.84:1 on base) */
  --obsy-sage-soft: #EBF0ED;         /* Subdued badge and status fills */

  /* Typography Scales */
  --obsy-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --obsy-font-editorial: 'Newsreader', Georgia, Cambria, 'Times New Roman', serif;
  --obsy-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Base Document Settings */
html {
  font-family: var(--obsy-font-sans);
  background-color: var(--obsy-canvas-base);
  color: var(--obsy-ink-primary);
  scroll-behavior: smooth;
}

body {
  background-color: var(--obsy-canvas-base);
  color: var(--obsy-ink-primary);
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   UTILITY CLASSES: SURFACES & CONTAINERS
   ========================================================================== */

.obsy-canvas {
  background-color: var(--obsy-canvas-base);
  color: var(--obsy-ink-primary);
}

.obsy-card {
  background-color: var(--obsy-canvas-card);
  border: 1px solid var(--obsy-border-subtle);
  border-radius: 8px;
}

.obsy-card-elevated {
  background-color: var(--obsy-canvas-elevated);
  border: 1px solid var(--obsy-border-strong);
  border-radius: 8px;
}

.obsy-divider {
  border-color: var(--obsy-border-subtle);
}

/* ==========================================================================
   UTILITY CLASSES: TYPOGRAPHY & LABELS
   ========================================================================== */

.obsy-editorial-quote {
  font-family: var(--obsy-font-editorial);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--obsy-ink-primary);
}

.obsy-label-subtle {
  font-family: var(--obsy-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--obsy-ink-secondary);
}

.obsy-code-meta {
  font-family: var(--obsy-font-mono);
  font-size: 0.75rem;
  color: var(--obsy-ink-secondary);
}

/* ==========================================================================
   UTILITY CLASSES: BADGES & INDICATORS
   ========================================================================== */

.obsy-badge-terracotta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background-color: var(--obsy-terracotta-soft);
  border: 1px solid var(--obsy-terracotta);
  color: var(--obsy-terracotta-dark);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
}

.obsy-badge-sage {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background-color: var(--obsy-sage-soft);
  border: 1px solid var(--obsy-sage);
  color: var(--obsy-sage-dark);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
}

/* ==========================================================================
   UTILITY CLASSES: BUTTONS & INTERACTION
   ========================================================================== */

.obsy-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--obsy-ink-primary);
  color: var(--obsy-canvas-base);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1.125rem;
  border-radius: 6px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.obsy-btn-primary:hover {
  background-color: var(--obsy-ink-secondary);
}

.obsy-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--obsy-canvas-card);
  color: var(--obsy-ink-primary);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1.125rem;
  border-radius: 6px;
  border: 1px solid var(--obsy-border-strong);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.obsy-btn-secondary:hover {
  background-color: var(--obsy-canvas-elevated);
}

.obsy-btn-terracotta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--obsy-terracotta);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1.125rem;
  border-radius: 6px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.obsy-btn-terracotta:hover {
  opacity: 0.92;
}