/**
 * Darsgah design tokens — single source of truth for color, type, spacing,
 * radius, shadow and motion. Templates reference these variables, never a
 * raw hex.
 *
 * v0.8 redesign note: pared back toward minimal — one real accent color
 * (the maroon, matching the logo) instead of a maroon+gold two-accent
 * system, and the background moved off a strong parchment tint toward a
 * quiet, barely-warm near-white so the page reads clean rather than
 * "themed." --dg-gold is kept as a variable (nothing else in the theme
 * changes) but re-mixed as a muted neutral taupe rather than a metallic
 * gold, so existing "gold" badges and accents go quiet instead of
 * catching the eye. Every legacy variable name still resolves.
 */

:root {
  /* ---------- Brand palette (one accent, quiet neutrals) ---------- */
  --dg-maroon: #6B1523;
  --dg-maroon-deep: #3D0C16;
  --dg-maroon-soft: #8C2E3D;          /* hover/active tint that isn't black-maroon */
  --dg-maroon-tint-10: rgba(107, 21, 35, 0.10);
  --dg-maroon-tint-06: rgba(107, 21, 35, 0.06);
  --dg-maroon-tint-03: rgba(107, 21, 35, 0.035);

  /* --dg-cream / --dg-surface-alt / --dg-surface-sunken used to be warm
     beige hexes (#FAF7F2 / #F5F2EB / #EFEAE0) — a second, unbranded hue
     living alongside maroon. They now derive from the maroon tint scale
     instead, the same move already made for .dg-panel and .dg-hero: every
     "off-white" surface in the theme reads as a pale wash of the brand
     color, never a separate beige/parchment palette. Names are kept so
     nothing that already references them needs to change. */
  --dg-cream: var(--dg-maroon-tint-03);
  --dg-surface: #FFFFFF;
  --dg-surface-alt: var(--dg-maroon-tint-06);
  --dg-surface-sunken: var(--dg-maroon-tint-10);

  --dg-gold: #8A7A63;
  --dg-gold-deep: #6B5D48;
  --dg-gold-tint-15: rgba(138, 122, 99, 0.12);
  --dg-family-arts: #7A6A54;

  --dg-ink: #201B16;
  --dg-ink-muted: #5C5347;
  --dg-ink-faint: #8B8172;            /* metadata only — never body copy */
  --dg-line: #E7E1D5;
  --dg-line-soft: #EFEAE0;            /* internal dividers, quieter than --dg-line */
  --dg-line-strong: #D6CCB9;          /* inputs + anything that must read as editable */

  --dg-success: #3E7A4E;
  --dg-success-tint: rgba(62, 122, 78, 0.10);
  --dg-warning: #B4761F;
  --dg-warning-tint: rgba(180, 118, 31, 0.12);
  --dg-danger: #A6362C;
  --dg-danger-tint: rgba(166, 54, 44, 0.10);

  /* ---------- Semantic aliases ---------- */
  --dg-primary: var(--dg-maroon);
  --dg-primary-hover: var(--dg-maroon-deep);
  --dg-secondary: var(--dg-gold);
  --dg-bg: var(--dg-surface);        /* true white page canvas — cream is now an accent-only color (hero wash, search field), never the base */
  --dg-surface-elevated: #FFFFFF;
  --dg-text: var(--dg-ink);
  --dg-text-muted: var(--dg-ink-muted);
  --dg-border: var(--dg-line);
  --dg-focus: var(--dg-maroon);
  --dg-focus-ring: 0 0 0 3px rgba(122, 30, 46, 0.22);

  /* ---------- Type ----------
   * Two families, clearly distinct: Bitter is a sturdy slab serif built
   * for screen reading — it carries page + card titles with a textbook,
   * "study desk" weight rather than a delicate marketing-serif voice.
   * Public Sans (the US government's open design-system typeface) carries
   * everything a student actually reads at length: plain, legible, not a
   * font that shows up in every AI-generated demo. Headline sizes are
   * fluid but deliberately capped — a study page should never spend half
   * a screen on an <h1>. */
  --dg-font-display: "Bitter", ui-serif, Georgia, serif;
  --dg-font-body: "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --dg-text-2xs: 0.75rem;                                 /* 12px — badges, crumbs */
  --dg-text-xs: 0.8125rem;                                /* 13px — metadata */
  --dg-text-sm: 0.9375rem;                                /* 15px — UI, dense lists */
  --dg-text-base: 1rem;                                   /* 16px — body */
  --dg-text-md: 1.0625rem;                                /* 17px — long-form prose */
  --dg-text-lg: clamp(1.0625rem, 0.99rem + 0.35vw, 1.1875rem);  /* h3 / card title */
  --dg-text-xl: clamp(1.25rem, 1.13rem + 0.55vw, 1.5rem);       /* h2 */
  --dg-text-2xl: clamp(1.625rem, 1.38rem + 1.05vw, 2.125rem);   /* h1 */
  --dg-text-3xl: clamp(2rem, 1.6rem + 1.7vw, 2.75rem);          /* homepage display */

  --dg-leading-tight: 1.18;
  --dg-leading-snug: 1.35;
  --dg-leading-normal: 1.55;
  --dg-leading-relaxed: 1.7;

  --dg-tracking-tight: -0.011em;

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

  /* Vertical rhythm between major page sections — fluid so mobile isn't
     padded like a desktop landing page. */
  --dg-section-y: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);
  --dg-section-y-tight: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);

  /* ---------- Radius ---------- */
  --dg-radius-xs: 6px;
  --dg-radius-sm: 10px;
  --dg-radius: 14px;                  /* card radius — the default */
  --dg-radius-md: var(--dg-radius);
  --dg-radius-lg: 20px;               /* panels, viewer shell */
  --dg-radius-pill: 999px;
  --dg-radius-btn: var(--dg-radius-pill);

  /* ---------- Elevation ----------
   * Restrained on purpose: borders do most of the separation work, shadow
   * only signals "this is lifted or floating". Neutral, not maroon-tinted —
   * a colored shadow is a decorative flourish; a neutral one just reads as
   * depth. */
  --dg-shadow-xs: 0 1px 2px rgba(32, 27, 22, 0.04);
  --dg-shadow-rest: 0 1px 2px rgba(32, 27, 22, 0.04), 0 1px 3px rgba(32, 27, 22, 0.035);
  --dg-shadow-sm: var(--dg-shadow-rest);
  --dg-shadow-md: 0 4px 12px rgba(32, 27, 22, 0.06), 0 1px 3px rgba(32, 27, 22, 0.04);
  --dg-shadow-hover: 0 8px 20px rgba(32, 27, 22, 0.08), 0 2px 5px rgba(32, 27, 22, 0.045);
  --dg-shadow-lg: 0 18px 44px rgba(32, 27, 22, 0.12), 0 4px 10px rgba(32, 27, 22, 0.06);

  /* ---------- Motion ---------- */
  --dg-transition: 160ms cubic-bezier(0.2, 0, 0.2, 1);
  --dg-transition-fast: 110ms cubic-bezier(0.2, 0, 0.2, 1);
  --dg-transition-slow: 260ms cubic-bezier(0.2, 0, 0.2, 1);

  /* ---------- Layout ---------- */
  --dg-container-max: 1200px;
  --dg-container-narrow: 720px;       /* prose measure — keeps lines < 80ch */
  --dg-container-wide: 1380px;        /* document workspace only */
  --dg-container-pad: var(--dg-space-4);
  --dg-header-height: 72px;
  --dg-z-header: 100;
  --dg-z-drawer: 200;
  --dg-z-ai-widget: 300;
  --dg-z-viewer-full: 400;

  /* ---------- Header dashboard controls ----------
   * Every value below is what the Header Layout Dashboard edits. Nothing
   * else in layout.css hard-codes a header logo/nav/search number — it
   * references one of these, so the dashboard stays the single source of
   * truth for header positioning/sizing. */
  --dg-logo-width: clamp(46px, 6vw, 58px);
  --dg-logo-height: clamp(30px, 4vw, 38px);
  --dg-logo-offset-x: 0px;
  --dg-logo-offset-y: 0px;
  --dg-header-padding-y: 0px;
  --dg-header-gap: var(--dg-space-5);
  --dg-nav-link-gap: var(--dg-space-5);
  --dg-nav-actions-gap: var(--dg-space-3);
  --dg-search-width: 180px;
}

@media (min-width: 600px) {
  :root { --dg-container-pad: var(--dg-space-5); }
}
@media (min-width: 1081px) {
  :root { --dg-container-pad: var(--dg-space-6); }
}

@media (max-width: 600px) {
  :root {
    --dg-header-height: 58px;
    --dg-header-gap: var(--dg-space-3);
  }
}

/* Breakpoints used throughout (documented here since CSS has no variable
   breakpoints): 600px = phone→large phone, 700px = compact list switch,
   900px = tablet→small desktop, 1081px = drawer nav gives way to the full
   desktop header, 1200px = document workspace goes two-up. */

body {
  background: var(--dg-bg);
  color: var(--dg-text);
  font-family: var(--dg-font-body);
  font-size: var(--dg-text-base);
  line-height: var(--dg-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.dg-display {
  font-family: var(--dg-font-display);
  color: var(--dg-maroon-deep);
  font-weight: 620;
  line-height: var(--dg-leading-tight);
  letter-spacing: var(--dg-tracking-tight);
  margin: 0 0 var(--dg-space-3);
  overflow-wrap: anywhere;
}

h1 { font-size: var(--dg-text-2xl); }
h2 { font-size: var(--dg-text-xl); }
h3 { font-size: var(--dg-text-lg); }
h4 { font-size: var(--dg-text-base); }

p { margin: 0 0 var(--dg-space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--dg-maroon); }
a:hover { color: var(--dg-maroon-deep); }

/* One focus treatment for the whole site. Keyboard users get a ring that
   is visible on cream, on maroon and on white alike. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--dg-focus);
  outline-offset: 2px;
  border-radius: var(--dg-radius-xs);
}

::selection {
  background: var(--dg-maroon-tint-10);
  color: var(--dg-maroon-deep);
}

/* Selection on the dark maroon bands (Meet Sir Hamza, footer). The default
   above is maroon-on-maroon there, so selected text vanished. Use a light
   highlight with dark text instead. The white booking card keeps the default. */
.dg-teacher ::selection,
.dg-site-footer ::selection {
  background: #E6D6B4;
  color: var(--dg-maroon-deep);
}
.dg-teacher-book ::selection {
  background: var(--dg-maroon-tint-10);
  color: var(--dg-maroon-deep);
}