/* site.css — the public site's one stylesheet. Tier 2 tokens from tokens.css (the mock's, copied at build) only;
   no raw colour. Light mode only: the site never sets data-theme, so the token file's opt-in dark remap never applies. */

@layer fonts, reset, base, components;

@layer fonts {
  @font-face { font-family: "Mukta"; font-weight: 400; font-display: swap; src: url("/fonts/mukta-400.woff2") format("woff2"); }
  @font-face { font-family: "Mukta"; font-weight: 600; font-display: swap; src: url("/fonts/mukta-600.woff2") format("woff2"); }
  @font-face { font-family: "Mukta"; font-weight: 700; font-display: swap; src: url("/fonts/mukta-700.woff2") format("woff2"); }
  @font-face { font-family: "Rozha One"; font-weight: 400; font-display: swap; src: url("/fonts/rozha-one-400.woff2") format("woff2"); }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
  :focus-visible { outline: var(--dim-hair) solid var(--color-focus); outline-offset: var(--dim-hair); }
}

@layer base {
  html {
    font-family: var(--font-body);
    font-size: var(--text-lead);
    line-height: var(--leading-body);
    color: var(--color-ink);
    background: var(--color-canvas);
    -webkit-text-size-adjust: 100%;
  }
  body { min-height: 100dvh; display: flex; flex-direction: column; background: var(--color-canvas); }
  a { color: var(--color-brand); text-underline-offset: var(--dim-hair); }
  a:hover { color: var(--color-brand-strong); }
  h1, h2 { font-family: var(--font-display); font-weight: 400; line-height: var(--leading-tight); color: var(--color-brand-strong); }
  h1 { font-size: var(--text-heading); }
  h2 { font-size: var(--text-title); margin-top: var(--gap-section); }
  h3 { font-size: var(--text-lead); font-weight: 600; margin-top: var(--gap-loose); }
  p, ul, ol, dl { margin-top: var(--gap-default); }
  ul, ol { padding-left: var(--space-6); }
  li + li { margin-top: var(--gap-compact); }
  strong { font-weight: 600; }
}

@layer components {
  .skip {
    position: absolute; left: var(--space-4); top: calc(-1 * var(--space-12));
    padding: var(--space-2) var(--space-4); background: var(--color-surface); color: var(--color-brand);
    border-radius: var(--radius-control); box-shadow: var(--shadow-raised);
  }
  .skip:focus { top: var(--space-4); }

  .masthead { padding: var(--space-4) var(--inset-screen); background: var(--color-brand); }
  .brand { font-family: var(--font-display); font-size: var(--text-title); color: var(--color-brand-fg); text-decoration: none; }
  .brand:hover { color: var(--color-brand-fg); }

  .page { flex: 1; width: 100%; max-width: calc(var(--max-line) + 2 * var(--inset-screen)); margin: 0 auto; padding: var(--gap-section) var(--inset-screen) var(--gap-hero); }
  .lede { font-size: var(--text-title); color: var(--color-ink-muted); }
  .meta { font-size: var(--text-label); color: var(--color-ink-muted); }

  .hero { text-align: center; padding-top: var(--gap-hero); }
  .hero h1 { font-size: var(--text-hero); }

  .badge {
    display: inline-block; margin-top: var(--gap-loose); padding: var(--space-1) var(--inset-chip);
    border-radius: var(--radius-chip); background: var(--color-verified-soft-bg); color: var(--color-verified-soft-fg);
    border: 1px solid var(--color-brand-soft-border); font-size: var(--text-label); font-weight: 600;
  }

  .actions { display: flex; flex-direction: column; align-items: center; gap: var(--gap-default); margin-top: var(--gap-section); }

  .button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-compact);
    min-height: var(--control-h); min-width: var(--tap-min); padding: 0 var(--space-6);
    border-radius: var(--radius-control); font-weight: 600; text-decoration: none;
    background: var(--color-accent); color: var(--color-accent-fg);
  }
  .button:hover { background: var(--color-accent-hover); color: var(--color-accent-fg); }
  .button.secondary { background: var(--color-surface); color: var(--color-brand); border: 1px solid var(--color-brand-soft-border); }
  .button.secondary:hover { background: var(--color-brand-soft-bg); color: var(--color-brand-strong); }
  .soon {
    padding: 0 var(--space-2); border-radius: var(--radius-chip); font-size: var(--text-caption); font-weight: 600;
    background: var(--color-accent-soft-bg); color: var(--color-accent-soft-fg);
  }

  .card {
    margin-top: var(--gap-section); padding: var(--inset-card); background: var(--color-surface);
    border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  }
  .card > :first-child { margin-top: 0; }

  .facts dt { font-weight: 600; margin-top: var(--gap-default); }
  .facts dd { color: var(--color-ink-muted); }

  .footer { padding: var(--space-6) var(--inset-screen); background: var(--color-surface-sunken); border-top: 1px solid var(--color-line); font-size: var(--text-label); }
  .footer-links { display: flex; flex-wrap: wrap; gap: var(--gap-compact) var(--gap-loose); padding: 0; margin: 0; list-style: none; }
  .footer-links li + li { margin-top: 0; }
  .footer-links a { display: inline-block; min-height: var(--tap-min); line-height: var(--tap-min); }
  .fine { color: var(--color-ink-muted); }
}