/* ==========================================================================
   BASE.CSS — Typography, Global Styles & Foundations
   toilet-cubicle.co.uk
   ========================================================================== */

/* -------------------------------------------------------------------------
   Google Fonts Import
   Instrument Serif  — Display headings (400, 400i)
   Plus Jakarta Sans — Body text (400, 500, 600, 700)
   JetBrains Mono    — Dimensions / technical data (400, 500)
   ------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* -------------------------------------------------------------------------
   Document Defaults
   ------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  font-size: 100%; /* 16px baseline */
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-body-bg);

  /* Subtle warm noise texture via gradient — gives pages a tactile paper feel */
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(39, 174, 96, 0.015) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(45, 52, 54, 0.02) 0%, transparent 50%);
}

/* -------------------------------------------------------------------------
   Headings — Instrument Serif
   Each level has carefully tuned size, weight, spacing
   ------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular); /* Instrument Serif looks best at 400 */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-grey-900);
}

h1, .h1 {
  font-size: clamp(var(--text-2xl), 4vw + 0.5rem, var(--text-4xl));
  line-height: 1.1;
  margin-bottom: var(--sp-3);
}

h2, .h2 {
  font-size: clamp(var(--text-xl), 3vw + 0.25rem, var(--text-3xl));
  line-height: 1.15;
  margin-bottom: var(--sp-2);
}

h3, .h3 {
  font-size: clamp(var(--text-lg), 2vw + 0.25rem, var(--text-2xl));
  line-height: var(--leading-tight);
  margin-bottom: var(--sp-2);
}

h4, .h4 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin-bottom: var(--sp-1);
}

h5, .h5 {
  font-size: var(--text-md);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  margin-bottom: var(--sp-1);
}

h6, .h6 {
  font-size: var(--text-sm);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-grey-600);
  margin-bottom: var(--sp-1);
}

/* -------------------------------------------------------------------------
   Paragraph & Inline
   ------------------------------------------------------------------------- */

p {
  margin-bottom: var(--sp-2);
}

p:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: var(--weight-semibold);
}

em, i {
  font-style: italic;
}

small, .text-sm {
  font-size: var(--text-sm);
}

.text-xs {
  font-size: var(--text-xs);
}

.text-lg {
  font-size: var(--text-lg);
}

.text-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.text-muted {
  color: var(--color-text-secondary);
}

.text-center { text-align: center; }
.text-right  { text-align: right; }

/* -------------------------------------------------------------------------
   Links
   ------------------------------------------------------------------------- */

a {
  color: var(--color-green);
  text-decoration: none;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

a:hover {
  color: var(--color-green-dark);
  text-decoration: underline;
  text-decoration-color: var(--color-green-light);
  text-underline-offset: 3px;
}

a:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------------
   Selection / Highlight
   ------------------------------------------------------------------------- */

::selection {
  background-color: var(--color-green);
  color: var(--color-white);
}

::-moz-selection {
  background-color: var(--color-green);
  color: var(--color-white);
}

/* -------------------------------------------------------------------------
   Focus Styles — Global
   All interactive elements get a consistent green focus ring
   ------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* -------------------------------------------------------------------------
   Scrollbar — Subtle custom styling (Webkit)
   ------------------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-grey-100);
}

::-webkit-scrollbar-thumb {
  background: var(--color-grey-400);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-grey-600);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-grey-400) var(--color-grey-100);
}

/* -------------------------------------------------------------------------
   Reduced Motion — Respect user preferences
   ------------------------------------------------------------------------- */

@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;
  }
}

/* -------------------------------------------------------------------------
   Print
   ------------------------------------------------------------------------- */

@media print {
  body {
    background: white;
    color: black;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  .no-print {
    display: none !important;
  }
}