/* ==========================================================================
   Story Time Builders — Web Design Tokens
   Single source of truth, extracted from the Flutter app's theme.
   Mirrors the app's "warm, playful, premium" language: Poppins type,
   purple->pink signature gradient, soft rounded corners, flat surfaces
   with 1px borders and whisper shadows.
   Components must consume these tokens — do not hardcode hex values.
   ========================================================================== */

:root {
  /* --- Brand / Primary (signature purple) --- */
  --color-primary: #980FFA;
  --color-primary-light: #B44AFF;
  --color-primary-dark: #7A0CD9;
  /* RGB channels for building rgba() tints from the brand color */
  --color-primary-rgb: 152, 15, 250;

  /* --- Secondary (pink) --- */
  --color-secondary: #EC4899;
  --color-secondary-light: #F472B6;
  --color-secondary-bg: #FAF5FF;
  --color-secondary-rgb: 236, 72, 153;

  /* --- Accents --- */
  --color-green: #10B981;
  --color-green-light: #34D399;
  --color-blue: #3B82F6;
  --color-blue-light: #60A5FA;
  --color-orange: #F97316;

  /* --- Neutrals: backgrounds & surfaces --- */
  --color-background: #FFFFFF;
  --color-surface: #F8FAFC;
  --color-surface-alt: #F1F5F9;
  --color-paper: #FAF7F2;

  /* --- Text --- */
  --color-text-primary: #1E293B;
  --color-text-secondary: #64748B;
  --color-text-tertiary: #94A3B8;

  /* --- Borders --- */
  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E1;

  /* --- Accessible accent variants (meet WCAG AA where the base fails) --- */
  --color-amber-accessible: #B45309;  /* amber-700: 5.0:1 on white (amber-500/600 fail) */
  --color-on-dark-muted: #CBD5E1;     /* slate-300: ~9:1 on dark footers/heroes */

  /* --- Status --- */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;

  /* --- Gradients (135deg, top-left -> bottom-right) --- */
  --gradient-primary: linear-gradient(135deg, #980FFA 0%, #B44AFF 100%);
  --gradient-secondary: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
  --gradient-mixed: linear-gradient(135deg, #980FFA 0%, #EC4899 100%);
  --gradient-warm-wash: linear-gradient(135deg, #F4E8FF 0%, #FFEDDA 100%);
  --gradient-success: linear-gradient(135deg, #10B981 0%, #34D399 100%);

  /* --- Typography --- */
  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale (rem @ base 16px) — role: size / weight / letter-spacing */
  --text-display-lg: 2rem;       /* 32px */
  --text-display-md: 1.75rem;    /* 28px */
  --text-display-sm: 1.5rem;     /* 24px */
  --text-headline-lg: 1.375rem;  /* 22px */
  --text-headline-md: 1.25rem;   /* 20px */
  --text-headline-sm: 1.125rem;  /* 18px */
  --text-title-lg: 1rem;         /* 16px */
  --text-body-lg: 1rem;          /* 16px */
  --text-body-md: 0.875rem;      /* 14px */
  --text-body-sm: 0.75rem;       /* 12px */
  --text-label-lg: 0.875rem;     /* 14px */
  --text-label-sm: 0.625rem;     /* 10px */

  --tracking-display-lg: -0.5px;
  --tracking-display-md: -0.25px;
  --tracking-tight: -0.25px;
  --tracking-normal: 0;
  --tracking-wide: 0.15px;
  --tracking-body: 0.5px;
  --tracking-label: 0.1px;

  --leading-body: 1.6;           /* long-form / story body */

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* --- Shape / radius --- */
  --radius-sm: 8px;    /* text buttons, small elements */
  --radius-md: 12px;   /* buttons & inputs */
  --radius-lg: 16px;   /* cards */
  --radius-pill: 20px; /* chips / pills */
  --radius-full: 9999px;

  /* --- Elevation (whisper only — the app favors borders over shadows) --- */
  --shadow-none: none;
  --shadow-whisper: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.06);

  /* --- Spacing rhythm (4px base) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* --- Component paddings --- */
  --btn-padding: 1rem 1.5rem;    /* ~16px vertical, 24px horizontal */
  --input-padding: 1rem;         /* 16px all around */
}

/* ==========================================================================
   Base typography — Poppins applied globally, slate text on light surfaces.
   ========================================================================== */
.stb-base,
body.stb-base {
  font-family: var(--font-family);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings use Poppins too (app applies Poppins globally). */
.font-display { font-family: var(--font-display); }

/* ==========================================================================
   Reusable component classes matching the app's Material components.
   ========================================================================== */

/* --- Buttons --- */
.stb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-family);
  font-size: var(--text-label-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  line-height: 1;
  border-radius: var(--radius-md);
  padding: var(--btn-padding);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
}
.stb-btn:active { transform: translateY(1px); }

.stb-btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-none);
}
.stb-btn-primary:hover { background: var(--color-primary-light); color: #fff; }
.stb-btn-primary:active { background: var(--color-primary-dark); }

/* Hero CTA — signature purple->pink gradient */
.stb-btn-gradient {
  background: var(--gradient-mixed);
  color: #fff;
}
.stb-btn-gradient:hover { filter: brightness(1.05); color: #fff; }

.stb-btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.stb-btn-outline:hover { background: rgba(var(--color-primary-rgb), 0.06); }

.stb-btn-text {
  background: transparent;
  color: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
}
.stb-btn-text:hover { background: rgba(var(--color-primary-rgb), 0.08); }

/* --- Card --- */
.stb-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-whisper);
}

/* --- Input --- */
.stb-input {
  width: 100%;
  font-family: var(--font-family);
  font-size: var(--text-body-lg);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--input-padding);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Placeholder uses secondary (tertiary #94A3B8 fails AA on the surface fill). */
.stb-input::placeholder { color: var(--color-text-secondary); opacity: 1; }
.stb-input:focus {
  outline: none;
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
  padding: calc(var(--input-padding) - 1px);
}
.stb-input.is-error { border: 1.5px solid var(--color-error); }

/* --- Chip / tag --- */
.stb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-family);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  padding: 0.375rem 0.875rem;
  border: 1px solid transparent;
}
.stb-chip.is-selected {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary-dark);
}

/* --- Section washes --- */
.stb-wash-purple { background: var(--color-secondary-bg); }
.stb-wash-warm { background: var(--gradient-warm-wash); }
.stb-hero-gradient { background: var(--gradient-mixed); }

/* --- Site footer (rendered site-wide by /js/footer.js) ---
   Background lives here (not inline) so it is NOT caught by the legacy
   `footer[style*="0a1628"] a` contrast override; the footer sets its own
   AA-safe link colours via /70 utilities. */
.stb-footer { background: #0a1628; }

/* Compliance badges (used in the footer + on the homepage). */
.cbadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Accessibility layer — WCAG 2.1 AA / Section 508
   ========================================================================== */

/* --- Visually-hidden content available to assistive tech (form labels etc.) --- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Skip-to-content link (2.4.1): hidden until focused --- */
.stb-skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100000;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-family);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-md);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top 0.15s ease;
}
.stb-skip-link:focus {
  top: 1rem;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* --- Visible focus indicator for keyboard users (2.4.7).
   Applies only to keyboard focus so mouse clicks stay clean. --- */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
/* On dark/gradient surfaces a white ring reads better; opt-in via .on-dark. */
.on-dark :focus-visible,
[class*="hero"] :focus-visible,
footer :focus-visible {
  outline-color: #fff;
}
/* Never leave an interactive element with no focus indicator. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Skip target should not show a persistent outline when focused programmatically. */
[tabindex="-1"]:focus { outline: none; }

/* --- Contrast: dark text on the amber/gold CTAs (white failed AA at ~2.1:1;
   dark slate #1E293B on amber measures ~6.8:1). --- */
.btn-warm,
.btn-warm:link,
.btn-warm:visited,
.btn-warm-shimmer,
.btn-warm-shimmer:link,
.btn-warm-shimmer:visited {
  color: var(--color-text-primary) !important;
}
.btn-warm svg,
.btn-warm-shimmer svg { color: var(--color-text-primary) !important; }

/* --- Reduced motion (2.3.3) + no-JS reveal safety (1.3.1/4.1.1).
   `.reveal` starts at opacity:0 and is shown by JS; guarantee visibility
   when the user prefers reduced motion. A <noscript> block covers no-JS. --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Contrast remediation (WCAG 1.4.3 AA) — verified against axe-core.
   Fixes muted greys on dark footers/heroes, grey-400 meta on light surfaces,
   amber-600 text, and purple links on dark. Scoped so light-on-dark and
   dark-on-light uses of the same utility both stay legible.
   ========================================================================== */

/* Grey-400 meta text on light surfaces (was #94A3B8/#9CA3AF ~2.5:1).
   #5B6A7D clears AA on white, the #F8FAFC surface, and the #FAF7F2 paper wash. */
.text-gray-400, .text-slate-400 { color: #5B6A7D !important; }

/* Amber-600 label text on light (was #D97706 ~3:1). */
.text-amber-600 { color: var(--color-amber-accessible) !important; }

/* Low-opacity white text on dark hero/footer surfaces (was /30–/45, <4.5:1). */
.text-white\/30, .text-white\/35, .text-white\/40, .text-white\/45, .text-white\/50 {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Dark footers (bg-gray-900 or the #0A1628 wash) sit on near-black; their muted
   greys and links must go lighter, not darker. Scoped to the dark footers so the
   light prose/styleguide footers keep their own colours. */
footer.bg-gray-900 .text-gray-400, footer.bg-gray-900 .text-gray-500, footer.bg-gray-900 .text-gray-600,
footer.bg-gray-900 .text-slate-400, footer.bg-gray-900 .text-slate-500, footer.bg-gray-900 .text-slate-600,
footer[style*="0a1628"] .text-gray-400, footer[style*="0a1628"] .text-gray-500, footer[style*="0a1628"] .text-gray-600 {
  color: var(--color-on-dark-muted) !important;
}
footer.bg-gray-900 a, footer[style*="0a1628"] a { color: var(--color-on-dark-muted) !important; }
footer.bg-gray-900 a:hover, footer[style*="0a1628"] a:hover { color: #ffffff !important; }