/* ==========================================================
   DESIGN TOKENS — Single source of truth for the full site.
   Both the React app (via index.html) and all static pages
   load this file. Change colours here, change them everywhere.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

:root {
  /* ---- Palette ---- */
  --color-bg:            #FAF8F5;
  --color-surface:       #FFFFFF;
  --color-surface-warm:  #FDF9F5;
  --color-surface-alt:   #F5F0EB;

  --color-text:          #3D3531;
  --color-text-secondary:#6B6158;
  --color-text-light:    #8A8078;

  --color-accent:        #C2714E;
  --color-accent-hover:  #A85F3E;
  --color-accent-light:  #FAEEE8;
  --color-accent-text:   #8F5036;

  --color-dark:          #3D3531;
  --color-dark-secondary:#564E49;
  --color-dark-warm:     #6B5E56;
  --color-dark-warm-hover:#7D7068;

  --color-border:        #E5DDD6;
  --color-border-strong: #C9C0B7;

  --color-success:       #5A8A4A;
  --color-success-bg:    #EEF6E5;
  --color-success-border:#A8CFA0;

  --color-error:         #B84747;
  --color-error-bg:      #FDEEEB;
  --color-error-border:  #E0A5A5;

  --color-streak-bg:     #FAEEE8;
  --color-streak-border: #D9A78E;
  --color-record-bg:     #FDF5E6;
  --color-record-border: #C9A96E;
  --color-record-text:   #7A6530;

  /* Blog / Resources page colors */
  --color-hero-bg:       #C2714E;
  --color-hero-text:     #FFF;

  --color-cat-beginners:       #2E86AB;
  --color-cat-beginners-light: #EBF5FA;
  --color-cat-theory:          #A23B72;
  --color-cat-theory-light:    #F8EBF3;
  --color-cat-piano:           #1B998B;
  --color-cat-piano-light:     #E8F7F5;

  /* CTA: unified with main palette (was saturated orange). */
  --color-cta-bg:        #3D3531;
  --color-cta-text:      #FFF;
  --color-cta-btn-bg:    #FFF;
  --color-cta-btn-text:  #C2714E;

  --color-intro-bg:      #FFF7ED;
  --color-intro-border:  #FDDCB5;
  --color-intro-heading: #C2714E;

  /* Footer (dark surface) */
  --color-footer-bg:     #3D3531;
  --color-footer-text:   #C4BBB2;
  --color-footer-heading:#F5F0EB;
  --color-footer-hover:  #E8B49A;
  --color-footer-rule:   #564E49;

  /* ---- Typography ---- */
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;

  /* ---- Shadows (warm-tinted, tied to --color-dark 61,53,49) ---- */
  --shadow-sm:    0 1px 3px rgba(61, 53, 49, 0.06);
  --shadow-md:    0 4px 12px rgba(61, 53, 49, 0.08);
  --shadow-lg:    0 8px 24px rgba(61, 53, 49, 0.12);
  --shadow-modal: 0 12px 32px rgba(61, 53, 49, 0.24);

  /* ---- Spacing ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;

  /* ---- z-index scale ---- */
  --z-base:     1;
  --z-sticky:   50;
  --z-dropdown: 100;
  --z-modal:    1000;
  --z-grain:    10000;
}

html { scroll-behavior: smooth; }

/* ---- Subtle grain overlay ----
   Fixed, non-interactive SVG noise at ~4% opacity. Breaks digital
   flatness without touching layout. Blends multiplicatively so it
   deepens on light surfaces and dims on dark ones. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-grain);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.04;
  mix-blend-mode: multiply;
}

/* ---- Base reset ---- */
html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* ---- Buttons (shared baseline) ---- */
.btn, button, .cta-button, .back-link, .card-link {
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--radius-sm);
}

.cta-button, .back-link, .card-link {
  background: var(--color-accent);
  color: #FFF;
}
.cta-button:hover, .back-link:hover, .card-link:hover {
  background: var(--color-accent-hover);
}

/* ---- Cards & sections ---- */
.container, .resource-category, .intro,
.team-section, .mission-box, .value-card {
  border-radius: var(--radius-md);
}

/* ---- Focus ---- */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- Heading face + balance (applies to any page using shared.css) ---- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  text-wrap: balance;
}
h1 { letter-spacing: -0.02em; }
h2 { letter-spacing: -0.015em; }

/* ---- Hero header (static pages) ---- */
.hero-header {
  background: var(--color-dark);
  color: var(--color-footer-heading);
  padding: 2rem 0;
  text-align: center;
}
.hero-header h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: #FFF;
}

/* ---- Press feedback on interactive elements ----
   Adds a subtle scale on :active. Each element's own transition may
   override this; sites importing shared.css get it for free. */
.btn, button, .cta-button, .back-link, .card-link, a.button {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.btn:active:not(:disabled),
button:active:not(:disabled),
.cta-button:active,
.back-link:active,
.card-link:active {
  transform: scale(0.97);
  transition-duration: 60ms;
}

nav { background: var(--color-surface); }
.nav-links a:hover { color: var(--color-accent); }

/* ---- Footer baseline ---- */
footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
}

/* ==========================================================
   ARTICLE PAGES — unified palette-coherent rules.
   These are scoped more specifically (`.article-header`,
   `.article-content X`) than the bare selectors each article
   declares in its own <style> block, so they win on cascade.
   ========================================================== */

/* --- Hero header banner --- */
.article-header {
  background: var(--color-accent);
  color: #FFF;
  padding: 3rem 0 3.25rem;
  text-align: center;
}
.article-header h1 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #FFF;
  margin-bottom: 1rem;
  text-wrap: balance;
}
.article-header .subtitle,
.article-header .article-summary,
.article-header p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.15rem;
  max-width: 640px;
  margin: 0 auto;
}
.article-header .article-meta {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 1rem;
  font-variant-numeric: tabular-nums;
}

/* --- Headings inside article body --- */
.article-content h2 {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 2.75rem 0 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-accent);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.article-content h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 2rem 0 0.9rem;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.article-content h4 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 1.5rem 0 0.75rem;
}

/* --- Callout boxes (tip, highlight, exercise) --- */
.article-content .tip-box,
.article-content .highlight-box {
  background: var(--color-surface-warm);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  color: var(--color-text);
  padding: 1.5rem;
  margin: 1.75rem 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.article-content .tip-box *,
.article-content .highlight-box * {
  color: inherit;
}
.article-content .tip-box strong,
.article-content .highlight-box strong {
  color: var(--color-accent-text);
}

.article-content .exercise-box {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  color: var(--color-text);
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.article-content .exercise-title {
  font-family: var(--font-heading);
  color: var(--color-accent-text);
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
}

/* --- CTA section at end of articles --- */
.article-content .cta-section {
  background: var(--color-dark);
  color: #FFF;
  padding: 2.75rem 2rem;
  text-align: center;
  margin: 3rem 0 0;
  border-radius: var(--radius-lg);
}
.article-content .cta-section .cta-title,
.article-content .cta-section h2,
.article-content .cta-section h3 {
  color: #FFF;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  border: none;
  padding: 0;
}
.article-content .cta-section .cta-text,
.article-content .cta-section p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
  margin-bottom: 1.75rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.article-content .cta-section .cta-button {
  display: inline-block;
  background: #FFF;
  color: var(--color-accent);
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
  transition: background 0.15s ease, transform 0.12s ease;
}
.article-content .cta-section .cta-button:hover {
  background: var(--color-surface-warm);
}
.article-content .cta-section .cta-button:active {
  transform: scale(0.97);
  transition-duration: 60ms;
}

/* --- Inline emphasis colors used in various articles --- */
.article-content strong { color: var(--color-text); font-weight: 600; }
.article-content a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.article-content a:hover { color: var(--color-accent-hover); }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .resources-grid { grid-template-columns: 1fr !important; }
  .article-header { padding: 2.25rem 0 2.5rem; }
  .article-header h1 { font-size: 2rem; }
  .article-content h2 { font-size: 1.55rem; margin-top: 2.25rem; }
  .article-content h3 { font-size: 1.2rem; }
  .article-content .cta-section { padding: 2rem 1.5rem; }
  .article-content .cta-section .cta-title,
  .article-content .cta-section h2,
  .article-content .cta-section h3 { font-size: 1.4rem; }
}