/* ==========================================================================
   Design tokens — Oral Surgery and Implants Nottingham
   Clinical blue system. Every colour, type step, space step and radius is
   defined ONCE here.
   ========================================================================== */

/* --- Fonts (self-hosted latin subset; no third-party requests) ----------- */

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/source-sans-3-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-sans-3-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-sans-3-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-700.woff2') format('woff2');
}

/* Cormorant draws an angled, calligraphic hyphen — authentic to Garamond, but
   it reads as a typo in a heading like "full-mouth". This face maps ONLY the
   hyphen codepoint to the sans, and is listed first in --font-display so the
   browser substitutes just that glyph. Same file the body text already loads,
   so it costs no extra request. */
@font-face {
  font-family: 'StraightHyphen';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-400.woff2') format('woff2');
  unicode-range: U+002D;
}

/* Display serif — headlines only. High stroke contrast, so never below ~22px. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-300-italic.woff2') format('woff2');
}

:root {
  /* --- Primitive colour ------------------------------------------------- */
  --color-navy-900:  #0E2E4D;   /* dark panels, footer, headings */
  --color-navy-800:  #123F66;
  --color-navy-700:  #17518A;
  --color-blue-600:  #1F6FB2;   /* links, filled buttons */
  --color-blue-500:  #3E8BC9;
  --color-cyan-500:  #3FA9BE;   /* accent rules and icons — never text on light */
  --color-cyan-400:  #5FC2D4;
  --color-slate-700: #3D5568;   /* body text */
  --color-slate-600: #556777;   /* captions */
  --color-steel-400: #6E8AA4;   /* form control borders */
  --color-ice-50:    #F5F9FC;   /* page background */
  --color-ice-100:   #E7F0F7;   /* alternating sections, cards */
  --color-ice-200:   #CFE0EC;   /* hairlines, dividers */
  --color-white:     #FFFFFF;
  --color-success:   #1F6B52;
  --color-error:     #B4302A;
  --color-error-bg:   #FBEBEA;
  --color-success-bg: #E8F2EE;
  --color-video-ground: #757575;

  /* --- Semantic colour -------------------------------------------------- */
  --color-bg:            var(--color-ice-50);
  --color-bg-alt:        var(--color-ice-100);
  --color-border:        var(--color-ice-200);
  --color-border-strong: var(--color-steel-400);
  --color-text:          var(--color-navy-900);
  --color-text-muted:    var(--color-slate-700);
  --color-text-caption:  var(--color-slate-600);
  --color-heading:       var(--color-navy-800);

  /* Decorative accent — rules, icons, dividers. Fails contrast as text on a
     light background (2.60:1), so it is never used for type on light. */
  --color-accent:        var(--color-cyan-500);
  /* Functional blue — links and filled-button backgrounds. */
  --color-accent-strong: var(--color-blue-600);
  --color-accent-hover:  var(--color-navy-700);
  --color-accent-soft:   var(--color-ice-100);
  --color-surface-dark:  var(--color-navy-900);
  --color-text-on-dark:  var(--color-white);
  --color-muted-on-dark: var(--color-ice-200);
  --color-accent-on-dark: var(--color-cyan-400);

  /* CONTRAST RULES — measured, do not violate.
     ON LIGHT (--color-bg #F5F9FC):
       --color-text          13.08:1  AAA, any size
       --color-heading       10.29:1  AAA, any size
       --color-text-muted     7.35:1  AAA, any size
       --color-text-caption   5.52:1  AA,  any size
       --color-accent-strong  4.99:1  AA,  any size  <- inline links
       --color-accent         2.60:1  DECORATION ONLY — never type on light
     FILLED BUTTONS (white text):
       on --color-accent-strong 5.28:1  AA
       on --color-accent-hover  8.14:1  AAA
       on --color-accent        2.75:1  FAILS — never a button fill
     ON DARK (--color-surface-dark #0E2E4D):
       --color-text-on-dark   13.85:1  AAA
       --color-muted-on-dark  10.24:1  AAA
       --color-accent-on-dark  6.70:1  AA  <- cyan is legible on navy
     NON-TEXT:
       --color-border-strong on white 3.60:1  <- form control outlines
       --color-border is a decorative hairline only, not a control boundary */

  /* --- Type ------------------------------------------------------------- */
  --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  /* Elegant display serif for headlines; humanist sans carries everything
     functional (body, UI, labels, forms). */
  --font-display: 'StraightHyphen', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --text-xs:      0.8125rem;
  --text-sm:      0.9375rem;
  --text-base:    1.0625rem;
  --text-md:      1.1875rem;
  --text-lg:      1.5rem;
  --text-xl:      clamp(1.9rem, 1.6rem + 1.3vw, 2.6rem);
  --text-2xl:     clamp(2.4rem, 1.9rem + 2.4vw, 3.6rem);
  --text-display: clamp(3rem, 2.1rem + 4.4vw, 5.6rem);

  --weight-display: 300;   /* light serif headings — the airy, elegant look */
  --weight-body:    400;
  --weight-medium:  600;
  --weight-bold:    700;

  --leading-tight: 1.08;
  --leading-snug:  1.3;
  --leading-body:  1.62;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide:  0.08em;

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

  --container-max:    1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(var(--space-8), 8vw, var(--space-10));

  /* --- Radius / shadow / motion ----------------------------------------- */
  --radius-pill: 999px;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 6px;

  --shadow-soft: 0 10px 28px -14px rgba(14, 46, 77, 0.28);
  --shadow-lift: 0 18px 44px -18px rgba(14, 46, 77, 0.38);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;

  --header-h: 76px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}