/* ============================================================================
   DERWENT LONDON - Foundations
   ============================================================================
   Reset, typography, and base element styles.
   Depends on: tokens.css
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. RESET - Modern, minimal
   ---------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  tab-size: 4;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Safety net: catch any hardcoded transition/animation values not using tokens */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--dl-font-primary);
  font-weight: var(--dl-weight-light);
  font-size: var(--dl-text-base);
  line-height: var(--dl-leading-normal);
  letter-spacing: var(--dl-tracking-wide);
  color: var(--dl-text-primary);
  background-color: var(--dl-surface-primary);
  min-height: 100dvh;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Focus management
   `:focus-visible` provides a custom ring for keyboard users.
   `:focus:not(:focus-visible)` hides the ring for mouse/touch.
   We do NOT blank `:focus` globally - that would break browsers
   that don't support `:focus-visible` (losing all focus indication). */
:focus-visible {
  outline: none;
  box-shadow: var(--dl-focus-ring);
}
:focus:not(:focus-visible) {
  outline: none;
}


/* ----------------------------------------------------------------------------
   2. TYPOGRAPHY - Element styles
   ---------------------------------------------------------------------------- */

/* Display - for hero headlines, landing pages */
.dl-display-hero {
  font-size: var(--dl-text-7xl);
  font-weight: var(--dl-weight-light);
  line-height: var(--dl-leading-none);
  letter-spacing: var(--dl-tracking-tight);
}

.dl-display-lg {
  font-size: var(--dl-text-6xl);
  font-weight: var(--dl-weight-light);
  line-height: var(--dl-leading-none);
  letter-spacing: var(--dl-tracking-tight);
}

.dl-display-sm {
  font-size: var(--dl-text-5xl);
  font-weight: var(--dl-weight-light);
  line-height: var(--dl-leading-tight);
  letter-spacing: var(--dl-tracking-tight);
}

/* Headings */
h1, .dl-h1 {
  font-size: var(--dl-text-4xl);
  font-weight: var(--dl-weight-bold);
  line-height: var(--dl-leading-tight);
  letter-spacing: var(--dl-tracking-normal);
}

h2, .dl-h2 {
  font-size: var(--dl-text-3xl);
  font-weight: var(--dl-weight-bold);
  line-height: var(--dl-leading-tight);
  letter-spacing: var(--dl-tracking-normal);
}

h3, .dl-h3 {
  font-size: var(--dl-text-2xl);
  font-weight: var(--dl-weight-regular);
  line-height: var(--dl-leading-snug);
  letter-spacing: var(--dl-tracking-wide);
}

h4, .dl-h4 {
  font-size: var(--dl-text-xl);
  font-weight: var(--dl-weight-regular);
  line-height: var(--dl-leading-snug);
  letter-spacing: var(--dl-tracking-wide);
}

h5, .dl-h5 {
  font-size: var(--dl-text-lg);
  font-weight: var(--dl-weight-medium);
  line-height: var(--dl-leading-snug);
  letter-spacing: var(--dl-tracking-wide);
}

h6, .dl-h6 {
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-medium);
  line-height: var(--dl-leading-normal);
  letter-spacing: var(--dl-tracking-wider);
  text-transform: uppercase;
}

/* Body text */
.dl-body-lg {
  font-size: var(--dl-text-md);
  font-weight: var(--dl-weight-light);
  line-height: var(--dl-leading-relaxed);
  letter-spacing: var(--dl-tracking-wide);
}

p, .dl-body {
  font-size: var(--dl-text-base);
  font-weight: var(--dl-weight-light);
  line-height: var(--dl-leading-normal);
  letter-spacing: var(--dl-tracking-wide);
  max-width: var(--dl-measure-base);
}

.dl-body-sm {
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-light);
  line-height: var(--dl-leading-normal);
  letter-spacing: var(--dl-tracking-wide);
}

/* Supporting text */
.dl-caption {
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-regular);
  line-height: var(--dl-leading-normal);
  letter-spacing: var(--dl-tracking-wider);
  color: var(--dl-text-secondary);
}

.dl-overline {
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-medium);
  line-height: var(--dl-leading-normal);
  letter-spacing: var(--dl-tracking-widest);
  text-transform: uppercase;
  color: var(--dl-text-secondary);
}

.dl-legal {
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-extralight);
  line-height: var(--dl-leading-relaxed);
  letter-spacing: var(--dl-tracking-wide);
  color: var(--dl-text-tertiary);
}

/* Pull-out / quote */
.dl-pullquote {
  font-size: var(--dl-text-2xl);
  font-weight: var(--dl-weight-bold);
  line-height: var(--dl-leading-snug);
  letter-spacing: var(--dl-tracking-normal);
  max-width: var(--dl-measure-narrow);
}

/* Intro / lead paragraph */
.dl-intro {
  font-size: var(--dl-text-xl);
  font-weight: var(--dl-weight-light);
  line-height: var(--dl-leading-relaxed);
  letter-spacing: var(--dl-tracking-wide);
  max-width: var(--dl-measure-wide);
}

/* Links */
.dl-link {
  color: var(--dl-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--dl-border-default);
  transition: var(--dl-transition-colors);
}

.dl-link:hover {
  text-decoration-color: var(--dl-text-primary);
}

.dl-link:focus-visible {
  box-shadow: var(--dl-focus-ring);
  border-radius: var(--dl-radius-xs);
}


/* ----------------------------------------------------------------------------
   3. LAYOUT - Container & Grid
   ---------------------------------------------------------------------------- */

.dl-container {
  width: 100%;
  max-width: var(--dl-container-2xl);
  margin-inline: auto;
  padding-inline: var(--dl-container-pad);
}

.dl-container--sm { max-width: var(--dl-container-sm); }
.dl-container--md { max-width: var(--dl-container-md); }
.dl-container--lg { max-width: var(--dl-container-lg); }
.dl-container--xl { max-width: var(--dl-container-xl); }

/* CSS Grid - 12-column */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(var(--dl-grid-columns), 1fr);
  gap: var(--dl-grid-gutter);
}

/* Column spans */
.dl-col-1  { grid-column: span 1; }
.dl-col-2  { grid-column: span 2; }
.dl-col-3  { grid-column: span 3; }
.dl-col-4  { grid-column: span 4; }
.dl-col-5  { grid-column: span 5; }
.dl-col-6  { grid-column: span 6; }
.dl-col-7  { grid-column: span 7; }
.dl-col-8  { grid-column: span 8; }
.dl-col-9  { grid-column: span 9; }
.dl-col-10 { grid-column: span 10; }
.dl-col-11 { grid-column: span 11; }
.dl-col-12 { grid-column: span 12; }

/* Responsive: stack on mobile */
@media (max-width: 767px) {
  .dl-grid > * { grid-column: span 12; }
}

/* Flex utilities */
.dl-flex         { display: flex; }
.dl-flex-col     { display: flex; flex-direction: column; }
.dl-flex-wrap    { flex-wrap: wrap; }
.dl-flex-center  { display: flex; align-items: center; justify-content: center; }
.dl-flex-between { display: flex; align-items: center; justify-content: space-between; }

/* Stack - vertical spacing utility */
.dl-stack > * + * { margin-top: var(--dl-space-4); }
.dl-stack--sm > * + * { margin-top: var(--dl-space-2); }
.dl-stack--lg > * + * { margin-top: var(--dl-space-8); }
.dl-stack--xl > * + * { margin-top: var(--dl-space-12); }

/* Section spacing */
.dl-section {
  padding-block: var(--dl-section-gap);
}


/* ----------------------------------------------------------------------------
   4. DIVIDERS
   ---------------------------------------------------------------------------- */

.dl-divider {
  border: none;
  border-top: var(--dl-border-width-thin) var(--dl-border-style) var(--dl-border-default);
  margin-block: var(--dl-space-8);
}

.dl-divider--strong {
  border-top-color: var(--dl-border-strong);
}

.dl-divider--subtle {
  border-top-color: var(--dl-border-subtle);
}


/* ----------------------------------------------------------------------------
   5. PROSE - for long-form content blocks
   ---------------------------------------------------------------------------- */

.dl-prose {
  max-width: var(--dl-measure-base);
}

.dl-prose > * + * {
  margin-top: var(--dl-paragraph-spacing);
}

.dl-prose h1,
.dl-prose h2,
.dl-prose h3,
.dl-prose h4 {
  margin-top: calc(var(--dl-paragraph-spacing) * 2);
}

.dl-prose ul,
.dl-prose ol {
  padding-left: var(--dl-space-6);
}

.dl-prose ul { list-style-type: disc; }
.dl-prose ol { list-style-type: decimal; }

.dl-prose li + li {
  margin-top: var(--dl-space-2);
}

.dl-prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--dl-border-default);
  transition: var(--dl-transition-colors);
}

.dl-prose a:hover {
  text-decoration-color: var(--dl-text-primary);
}

.dl-prose blockquote {
  border-left: var(--dl-border-width-thick) var(--dl-border-style) var(--dl-sage);
  padding-left: var(--dl-space-6);
  font-style: italic;
  color: var(--dl-text-secondary);
}

.dl-prose code {
  font-family: var(--dl-font-mono);
  font-size: 0.875em;
  background: var(--dl-surface-secondary);
  padding: var(--dl-space-0-5) var(--dl-space-1);
  border-radius: var(--dl-radius-xs);
}

.dl-prose hr {
  border: none;
  border-top: var(--dl-border-width-thin) var(--dl-border-style) var(--dl-border-default);
  margin-block: calc(var(--dl-paragraph-spacing) * 2);
}


/* ----------------------------------------------------------------------------
   6. FORM FIELD STRUCTURE - labels, hints, error messages
   ---------------------------------------------------------------------------- */

.dl-field {
  display: flex;
  flex-direction: column;
  gap: var(--dl-space-1-5);
}

.dl-field__label {
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-weight-medium);
  color: var(--dl-text-primary);
  letter-spacing: var(--dl-tracking-wide);
}

.dl-field__label--required::after {
  content: ' *';
  color: var(--dl-status-error);
}

.dl-field__hint {
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-light);
  color: var(--dl-text-secondary);
  line-height: var(--dl-leading-normal);
}

.dl-field__error {
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-weight-regular);
  color: var(--dl-status-error);
  line-height: var(--dl-leading-normal);
  display: flex;
  align-items: flex-start;
  gap: var(--dl-space-1);
}

.dl-field__error::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  min-width: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--dl-status-error);
  font-size: 9px;
  font-weight: var(--dl-weight-bold);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Input error state - border + focus ring inherit error colour */
.dl-input--error,
.dl-textarea--error,
.dl-select--error {
  border-color: var(--dl-status-error) !important;
  box-shadow: 0 0 0 1px var(--dl-status-error);
}

.dl-input--error:focus-visible,
.dl-textarea--error:focus-visible,
.dl-select--error:focus-visible {
  --dl-focus-ring-color: var(--dl-status-error);
}


/* ----------------------------------------------------------------------------
   7. VISUALLY HIDDEN - accessible content
   ---------------------------------------------------------------------------- */

.dl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}