/* ============================================================
   site.css — shared global stylesheet for elton-app & jules-app

   Keep the copies in elton-app/static/css and jules-app/static/css
   identical. This file is the single place for viewport rules
   (media queries) and the site's design tokens. Tweak a token in
   :root and breakpoints below to rescale the whole site.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Fonts */
  --font-sans: 'Outfit', sans-serif;
  --font-serif: 'Playfair Display', serif;

  /* Gold palette (mirrors tailwind.config) */
  --gold-50: #fefcf3;
  --gold-100: #fbf5e6;
  --gold-200: #f4e5c0;
  --gold-300: #ecd59b;
  --gold-400: #dfb550;
  --gold-500: #d49b2c;
  --gold-600: #bd7f22;
  --gold-700: #9d611c;
  --gold-800: #7e4919;
  --gold-900: #643916;

  /* Charcoal palette (mirrors tailwind.config) */
  --charcoal-50: #f6f6f6;
  --charcoal-100: #e7e7e7;
  --charcoal-200: #d1d1d1;
  --charcoal-300: #b0b0b0;
  --charcoal-400: #888888;
  --charcoal-500: #6d6d6d;
  --charcoal-600: #5d5d5d;
  --charcoal-700: #4f4f4f;
  --charcoal-800: #454545;
  --charcoal-950: #121212;

  /* Page background */
  --page-bg: #0b0b0b;
  --page-glow-color: rgba(212, 155, 44, 0.08);

  /* ---- Type scale ---- */
  --fs-3xs: 0.5625rem;   /* 9px  — badges, markers */
  --fs-2xs: 0.625rem;    /* 10px — meta labels, table heads */
  --fs-xs: 0.75rem;      /* 12px */
  --fs-sm: 0.875rem;     /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-lg: 1.125rem;     /* 18px */
  --fs-xl: 1.25rem;      /* 20px */
  --fs-2xl: 1.5rem;      /* 24px */
  --fs-3xl: 1.875rem;    /* 30px */
  --fs-4xl: 2.25rem;     /* 36px */
  --fs-5xl: 3rem;        /* 48px */
  --fs-6xl: 3.75rem;     /* 60px */

  /* ---- Navigation (mobile-first, see lg breakpoint) ---- */
  --nav-link-fs: 0.8125rem;   /* 13px */
  --nav-link-ls: 0.025em;     /* tracking-wide */
  --nav-tagline-fs: 0.5625rem;/* 9px */
  --nav-tagline-ls: 0.25em;
  --nav-lang-fs: 0.6875rem;   /* 11px */

  /* ---- Eyebrow / kicker label ---- */
  --eyebrow-fs: 0.75rem;      /* 12px */
  --eyebrow-ls: 0.4em;

  /* ---- Top bar ---- */
  --topbar-fs: 0.625rem;      /* 10px */
}

/* ---------- Base ---------- */
body {
  background-color: var(--page-bg);
  background-image: radial-gradient(circle at top right, var(--page-glow-color) 0%, transparent 60%);
  font-family: var(--font-sans);
}

/* ---------- Type tokens as utility classes ---------- */
.text-3xs { font-size: var(--fs-3xs); }
.text-2xs { font-size: var(--fs-2xs); }

/* ---------- Glow helpers ---------- */
.text-glow {
  text-shadow: 0 0 10px rgba(212, 155, 44, 0.4);
}

/* ---------- Navigation ---------- */
.nav-link {
  font-size: var(--nav-link-fs);
  letter-spacing: var(--nav-link-ls);
  transition: all 0.3s ease;
}
.nav-link:hover {
  color: var(--gold-500);
  text-shadow: 0 0 8px rgba(212, 155, 44, 0.5);
}

.nav-tagline {
  font-size: var(--nav-tagline-fs);
  letter-spacing: var(--nav-tagline-ls);
}

.lang-toggle {
  font-size: var(--nav-lang-fs);
}

/* ---------- Eyebrow / kicker label ---------- */
.eyebrow {
  font-size: var(--eyebrow-fs);
  letter-spacing: var(--eyebrow-ls);
}

/* ---------- Top bar ---------- */
.topbar-label {
  font-size: var(--topbar-fs);
  letter-spacing: 0.05em;
}

/* ---------- Legal content (shared by all legals pages) ---------- */
.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.875rem;
}
.legal-content th,
.legal-content td {
  border: 1px solid #262626;
  padding: 0.75rem 1rem;
  text-align: left;
}
.legal-content td p {
  margin: 0 !important;
}
.legal-content tr:nth-child(even) {
  background-color: rgba(23, 23, 23, 0.4);
}
.legal-content a {
  color: #f59e0b;
  text-decoration: underline;
  transition: color 0.2s;
}
.legal-content a:hover {
  color: #d97706;
}
.legal-content h2,
.legal-content h3,
.legal-content h4 {
  color: #ffffff;
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}
.legal-content h2 {
  font-size: 1.5rem;
  border-bottom: 1px solid #262626;
  padding-bottom: 0.5rem;
}
.legal-content h3 {
  font-size: 1.25rem;
}
.legal-content h4 {
  font-size: 1.1rem;
}
.legal-content ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin: 1rem 0;
}
.legal-content li {
  margin-bottom: 0.5rem;
}
.legal-content p {
  margin-bottom: 1rem;
}

/* ---------- Holiday (xmas) theme ---------- */
.holiday-theme {
  background-color: #12581c !important;
  color: #ffffff !important;
  font-family: "Berkshire Swash", serif;
}
.holiday-heading {
  color: #7a1010;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ---------- Audio player card ---------- */
.player-glow {
  box-shadow: 0 -4px 20px rgba(212, 155, 44, 0.15);
}

/* ============================================================
   Viewport rules
   ============================================================ */

/* sm  (640px)  */
@media (min-width: 640px) {
  :root {
  }
}

/* md  (768px)  */
@media (min-width: 768px) {
  :root {
  }
}

/* lg  (1024px) */
@media (min-width: 1024px) {
  :root {
    /* Nav grows to text-sm (14px), tighter letter-spacing */
    --nav-link-fs: var(--fs-sm);
    --nav-link-ls: 0.025em;
    /* Lang toggle grows to text-xs (12px) */
    --nav-lang-fs: var(--fs-xs);
  }
}

/* xl  (1280px) */
@media (min-width: 1280px) {
  :root {
  }
}

/* 2xl (1536px) */
@media (min-width: 1536px) {
  :root {
  }
}