/* Rising Stars Music School — Design Tokens
 * Warm, slightly 70s-inspired modernism.
 * Colors lifted from the logo + Tailwind config in the scheduler codebase:
 *   dark-brown  #65301a  (primary text + primary buttons)
 *   warm-orange #e48051  (accent, CTAs, time chips)
 *   sage-green  #cfd8c3  (secondary, gradient base)
 *   cream       #f5f2ed  (gradient end, page bg)
 */

:root {
  /* ---------- Brand palette ---------- */
  --rs-dark-brown: #65301a;
  --rs-dark-brown-ink: #3d1c0f;       /* deeper shadow / pressed */
  --rs-warm-orange: #e48051;
  --rs-warm-orange-light: #f19b75;    /* selected/hover chip */
  --rs-warm-orange-deep: #c2653a;     /* press */
  --rs-sage: #cfd8c3;
  --rs-sage-deep: #a8b89a;            /* borders, subdued */
  --rs-cream: #f5f2ed;
  --rs-cream-soft: #fbf8f3;           /* card bg on cream page */
  --rs-linen: #f3ece0;                /* logo background */
  --rs-white: #ffffff;
  --rs-black: #1a120c;

  /* ---------- Semantic fg / bg ---------- */
  --rs-fg-1: var(--rs-dark-brown);            /* primary text */
  --rs-fg-2: #6b4a3a;                          /* secondary text */
  --rs-fg-3: #8a6f5e;                          /* muted */
  --rs-fg-on-brown: var(--rs-cream);
  --rs-fg-on-orange: #ffffff;

  --rs-bg-page: var(--rs-cream);
  --rs-bg-surface: var(--rs-white);
  --rs-bg-sunken: #efe9df;
  --rs-bg-sage-wash: #e7ece0;

  /* Signature gradient — used on page backgrounds, hero sections */
  --rs-gradient-warm: linear-gradient(135deg, var(--rs-sage) 0%, var(--rs-cream) 100%);
  --rs-gradient-header: linear-gradient(to right, rgba(207, 216, 195, 0.2), rgba(245, 242, 237, 0.5));
  --rs-gradient-card-top: linear-gradient(to bottom, rgba(207, 216, 195, 0.2), transparent);

  /* ---------- Status colors ---------- */
  --rs-success: #4f7a4a;
  --rs-success-bg: #e3ecdf;
  --rs-danger: #b4452e;
  --rs-danger-bg: #f5dbd0;
  --rs-warning: #c68a2e;

  /* ---------- Borders ---------- */
  --rs-border-hairline: rgba(101, 48, 26, 0.12);
  --rs-border-soft: rgba(168, 184, 154, 0.55);      /* sage 30% */
  --rs-border-strong: var(--rs-dark-brown);

  /* ---------- Radii ---------- */
  --rs-radius-xs: 4px;
  --rs-radius-sm: 6px;
  --rs-radius-md: 8px;      /* default, matches Tailwind --radius 0.5rem */
  --rs-radius-lg: 12px;
  --rs-radius-xl: 20px;
  --rs-radius-pill: 999px;

  /* ---------- Shadow system ---------- */
  /* Subtle, warm-tinted — never neutral gray. */
  --rs-shadow-xs: 0 1px 2px rgba(101, 48, 26, 0.06);
  --rs-shadow-sm: 0 2px 6px rgba(101, 48, 26, 0.08);
  --rs-shadow-md: 0 6px 16px rgba(101, 48, 26, 0.10);
  --rs-shadow-lg: 0 14px 32px rgba(101, 48, 26, 0.14);
  /* The 70s signature: hard offset drop-shadow in brand colors */
  --rs-shadow-retro-orange: 6px 6px 0 var(--rs-warm-orange);
  --rs-shadow-retro-brown: 4px 4px 0 var(--rs-dark-brown);

  /* ---------- Spacing (4px base) ---------- */
  --rs-space-1: 4px;
  --rs-space-2: 8px;
  --rs-space-3: 12px;
  --rs-space-4: 16px;
  --rs-space-5: 20px;
  --rs-space-6: 24px;
  --rs-space-8: 32px;
  --rs-space-10: 40px;
  --rs-space-12: 48px;
  --rs-space-16: 64px;
  --rs-space-20: 80px;

  /* ---------- Motion ---------- */
  --rs-ease: cubic-bezier(0.22, 1, 0.36, 1); /* gentle out */
  --rs-ease-in: cubic-bezier(0.6, 0, 0.8, 0.4);
  --rs-dur-fast: 140ms;
  --rs-dur: 220ms;
  --rs-dur-slow: 360ms;

  /* ---------- Type families ----------
   * The Rising Stars logo is custom 70s hand-lettering — inline double-stroke,
   * flat terminals, square counters. Monoton is the closest living match on
   * Google Fonts: a display face built from parallel lines, direct descendant
   * of Rudolf Koch's 1931 "Prisma". Use it ONLY at hero sizes (48px+, caps-only).
   *
   * For headings below hero-size, use Alfa Slab One — warm, rounded, 70s slab,
   * pairs naturally with the logo without competing.
   *
   * UI + body: Nunito (rounded geometric sans, 70s soft warmth).
   *   @import url('https://fonts.googleapis.com/css2?family=Monoton&family=Alfa+Slab+One&family=Nunito:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
   */
  --rs-font-logo: "Monoton", "Alfa Slab One", "Impact", sans-serif;   /* HERO ONLY, caps */
  --rs-font-display: "Alfa Slab One", "Cooper Std", Georgia, serif;   /* H1–H3 */
  --rs-font-ui: "Nunito", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rs-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* ---------- Type scale ---------- */
  --rs-text-xs: 12px;
  --rs-text-sm: 14px;
  --rs-text-base: 16px;
  --rs-text-md: 18px;
  --rs-text-lg: 20px;
  --rs-text-xl: 24px;
  --rs-text-2xl: 30px;
  --rs-text-3xl: 36px;
  --rs-text-4xl: 48px;
  --rs-text-5xl: 64px;
  --rs-text-6xl: 88px;

  --rs-lh-tight: 1.05;
  --rs-lh-snug: 1.2;
  --rs-lh-normal: 1.5;
  --rs-lh-loose: 1.65;

  --rs-tracking-tight: -0.02em;
  --rs-tracking-normal: 0;
  --rs-tracking-wide: 0.08em;
  --rs-tracking-xwide: 0.18em;
}

/* ---------- Semantic element styles ---------- */
html, body {
  background: var(--rs-bg-page);
  color: var(--rs-fg-1);
  font-family: var(--rs-font-ui);
  font-size: var(--rs-text-base);
  line-height: var(--rs-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* .rs-logo — brand wordmark style. Caps only, Monoton, orange offset shadow. */
.rs-logo {
  font-family: var(--rs-font-logo);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
  color: var(--rs-sage);
  text-shadow:
    2px 2px 0 var(--rs-dark-brown),
    6px 6px 0 var(--rs-warm-orange);
}

.rs-display {
  font-family: var(--rs-font-display);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: var(--rs-lh-tight);
  color: var(--rs-fg-1);
}

h1, .rs-h1 {
  font-family: var(--rs-font-display);
  font-weight: 400;
  font-size: var(--rs-text-5xl);
  line-height: var(--rs-lh-tight);
  letter-spacing: -0.01em;
  color: var(--rs-fg-1);
}
h2, .rs-h2 {
  font-family: var(--rs-font-display);
  font-weight: 400;
  font-size: var(--rs-text-4xl);
  line-height: var(--rs-lh-tight);
  letter-spacing: -0.01em;
  color: var(--rs-fg-1);
}
h3, .rs-h3 {
  font-family: var(--rs-font-display);
  font-weight: 400;
  font-size: var(--rs-text-2xl);
  line-height: var(--rs-lh-snug);
  color: var(--rs-fg-1);
}
h4, .rs-h4 {
  font-family: var(--rs-font-ui);
  font-weight: 800;
  font-size: var(--rs-text-lg);
  line-height: var(--rs-lh-snug);
  color: var(--rs-fg-1);
  letter-spacing: 0;
}
p, .rs-body {
  font-family: var(--rs-font-ui);
  font-weight: 400;
  font-size: var(--rs-text-base);
  line-height: var(--rs-lh-loose);
  color: var(--rs-fg-2);
}
.rs-lead {
  font-family: var(--rs-font-ui);
  font-size: var(--rs-text-md);
  line-height: var(--rs-lh-normal);
  color: var(--rs-fg-1);
}
.rs-eyebrow {
  font-family: var(--rs-font-ui);
  font-weight: 700;
  font-size: var(--rs-text-xs);
  letter-spacing: var(--rs-tracking-xwide);
  text-transform: uppercase;
  color: var(--rs-warm-orange);
}
small, .rs-small {
  font-size: var(--rs-text-sm);
  color: var(--rs-fg-3);
}
code, .rs-code {
  font-family: var(--rs-font-mono);
  font-size: 0.92em;
  background: var(--rs-bg-sunken);
  color: var(--rs-dark-brown-ink);
  padding: 0.1em 0.35em;
  border-radius: var(--rs-radius-xs);
}