/* ============================================================
   TFH Accountancy — base.css
   Design tokens, reset, base typography. Premium monochrome.
   ============================================================ */

:root {
  /* Brand */
  --accent: #E0323E;
  --accent-hover: #B62732;
  --accent-soft: rgba(224, 50, 62, 0.12);

  /* Type */
  --font-display: 'Switzer', 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Switzer', 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Sizing */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  2.25rem;   /* 36px */
  --text-3xl:  3rem;      /* 48px */
  --text-hero: clamp(2.75rem, 7vw, 5.5rem);

  --leading-tight: 1.08;
  --leading-snug:  1.2;
  --leading-body:  1.55;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-label:  0.18em;
  --tracking-acc:    0.35em;

  /* Space scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Layout */
  --container: 1240px;
  --container-narrow: 920px;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 320ms;
}

/* ---------- Dark theme (default) ---------- */
:root,
:root[data-theme="dark"] {
  --bg:        #0B0B0C;
  --bg-elev:   #121214;
  --surface:   #15151A;
  --surface-2: #1B1B21;
  --border:    #26262C;
  --border-strong: #34343C;
  --text:      #ECEAE4;
  --text-muted:#A4A29C;
  --text-faint:#6B6A66;
  --on-accent: #ffffff;
  --logo-shadow: 0 0 0 1px transparent;
  color-scheme: dark;
}

/* ---------- Light theme ---------- */
:root[data-theme="light"] {
  --bg:        #F5F4F0;
  --bg-elev:   #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #EFEDE7;
  --border:    #D9D6CE;
  --border-strong: #B7B3A8;
  --text:      #15140F;
  --text-muted:#5C5A53;
  --text-faint:#9C998F;
  --on-accent: #ffffff;
  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-feature-settings: "ss01", "cv11", "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
h1,h2,h3,h4,h5 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text);
}
p { color: var(--text-muted); }

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

/* ---------- Selection ---------- */
::selection {
  background: var(--accent);
  color: var(--on-accent);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--text);
  color: var(--bg);
  padding: var(--s-3) var(--s-4);
  z-index: 1000;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--text-xs);
}
.skip-link:focus { left: var(--s-3); top: var(--s-3); }

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}