/* ============================================================
   SYNCWORX — Typography System
   Fonts: Oxanium (headings) + Space Grotesk (body)
   Generated for syncworx.ie
   ============================================================ */

/* ── Google Fonts Import ── */
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ── CSS Custom Properties ── */
:root {
  /* Font families */
  --font-heading: 'Oxanium', sans-serif;
  --font-body:    'Space Grotesk', sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  /* Font weights */
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;

  /* Type scale — fluid via clamp() */
  --text-xs:   clamp(0.70rem, 1vw,   0.75rem);   /* 11–12px  — captions, legal */
  --text-sm:   clamp(0.813rem, 1.2vw, 0.875rem); /* 13–14px  — labels, meta */
  --text-base: clamp(0.938rem, 1.4vw, 1rem);     /* 15–16px  — body copy */
  --text-lg:   clamp(1.063rem, 1.6vw, 1.125rem); /* 17–18px  — large body / intro */
  --text-xl:   clamp(1.25rem,  2vw,   1.375rem);  /* 20–22px  — H4 */
  --text-2xl:  clamp(1.5rem,   2.5vw, 1.75rem);   /* 24–28px  — H3 */
  --text-3xl:  clamp(1.875rem, 3vw,   2.25rem);   /* 30–36px  — H2 */
  --text-4xl:  clamp(2.25rem,  4vw,   3rem);      /* 36–48px  — H1 */
  --text-5xl:  clamp(3rem,     5vw,   4rem);      /* 48–64px  — Display */
  --text-hero: clamp(3.5rem,   7vw,   5.5rem);    /* 56–88px  — Hero */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --leading-loose:   1.9;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.10em;
  --tracking-widest:  0.15em;

  /* Brand colours (indigo) */
  --color-brand-50:   #eef2ff;
  --color-brand-100:  #e0e7ff;
  --color-brand-200:  #c7d2fe;
  --color-brand-400:  #818cf8;
  --color-brand-500:  #6366f1;
  --color-brand-600:  #4f46e5;
  --color-brand-700:  #4338ca;
  --color-brand-800:  #3730a3;
  --color-brand-900:  #312e81;
  --color-brand-950:  #1e1b4b;

  /* Text colours */
  --color-text-primary:   #0f0f10;
  --color-text-secondary: #4b4b57;
  --color-text-muted:     #8b8b9a;
  --color-text-inverse:   #ffffff;
  --color-text-accent:    var(--color-brand-700);
}

/* ── Base Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Root / Body ── */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

/* ============================================================
   HEADINGS
   All headings use Oxanium
   ============================================================ */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

h1, .h1 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.04em;
}

h2, .h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
}

h3, .h3 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
}

h4, .h4 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
}

h5, .h5 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
}

h6, .h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ── Display / Hero headings ── */
.display {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: -0.04em;
}

.hero-heading {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: var(--weight-extrabold);
  line-height: 1.0;
  letter-spacing: -0.05em;
}

/* ── Heading colour variants ── */
.heading-accent  { color: var(--color-brand-700); }
.heading-inverse { color: var(--color-text-inverse); }
.heading-muted   { color: var(--color-text-secondary); }

/* ============================================================
   BODY TEXT
   Space Grotesk
   ============================================================ */

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.body-lg {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.body-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.intro {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  line-height: var(--leading-loose);
  color: var(--color-text-secondary);
}

/* ============================================================
   UI TEXT — labels, captions, nav, buttons
   ============================================================ */

/* Labels (overlines above sections) */
.label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-brand-600);
}

/* Caption / legal / footnote */
.caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* Nav links */
nav a,
.nav-link {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-primary);
  transition: color 0.2s ease;
}

nav a:hover,
.nav-link:hover {
  color: var(--color-brand-700);
}

/* Buttons */
button,
.btn {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  cursor: pointer;
}

/* ── Button variants ── */
.btn-primary {
  background: var(--color-brand-700);
  color: var(--color-text-inverse);
  border: none;
  padding: 0.75rem 1.75rem;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.btn-primary:hover {
  background: var(--color-brand-800);
}

.btn-outline {
  background: transparent;
  color: var(--color-brand-700);
  border: 1.5px solid var(--color-brand-700);
  padding: 0.75rem 1.75rem;
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-outline:hover {
  background: var(--color-brand-700);
  color: var(--color-text-inverse);
}

/* ── Ghost / inverse button ── */
.btn-ghost {
  background: transparent;
  color: var(--color-text-inverse);
  border: 1.5px solid rgba(255,255,255,0.4);
  padding: 0.75rem 1.75rem;
  border-radius: 4px;
}

.btn-ghost:hover {
  border-color: rgba(255,255,255,0.8);
}

/* ============================================================
   LINKS
   ============================================================ */

a {
  color: var(--color-brand-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--color-brand-900);
}

/* ============================================================
   LISTS
   Scoped to prose contexts only — UI lists (nav, menus, footer)
   keep their own component-specific spacing.
   ============================================================ */

article ul, article ol,
.prose ul, .prose ol,
.post-content ul, .post-content ol {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  padding-left: 1.5rem;
}

article li + li,
.prose li + li,
.post-content li + li {
  margin-top: 0.4rem;
}

/* ============================================================
   CODE / MONO
   ============================================================ */

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

pre {
  overflow-x: auto;
  padding: 1rem 1.25rem;
  background: var(--color-brand-950);
  color: var(--color-brand-200);
  border-radius: 6px;
  line-height: 1.6;
}

code {
  background: var(--color-brand-50);
  color: var(--color-brand-800);
  padding: 0.1em 0.4em;
  border-radius: 3px;
}

/* ============================================================
   BLOCKQUOTE
   ============================================================ */

blockquote {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  border-left: 3px solid var(--color-brand-700);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 2rem 0;
}

blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-brand-600);
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* Weights */
.font-light     { font-weight: var(--weight-light); }
.font-regular   { font-weight: var(--weight-regular); }
.font-medium    { font-weight: var(--weight-medium); }
.font-semibold  { font-weight: var(--weight-semibold); }
.font-bold      { font-weight: var(--weight-bold); }
.font-extrabold { font-weight: var(--weight-extrabold); }

/* Families */
.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }

/* Sizes */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }
.text-5xl  { font-size: var(--text-5xl); }

/* Tracking */
.tracking-tight   { letter-spacing: var(--tracking-tight); }
.tracking-normal  { letter-spacing: var(--tracking-normal); }
.tracking-wide    { letter-spacing: var(--tracking-wide); }
.tracking-wider   { letter-spacing: var(--tracking-wider); }
.tracking-widest  { letter-spacing: var(--tracking-widest); }

/* Leading */
.leading-tight   { line-height: var(--leading-tight); }
.leading-snug    { line-height: var(--leading-snug); }
.leading-normal  { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose   { line-height: var(--leading-loose); }

/* Colour */
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-accent    { color: var(--color-text-accent); }
.text-inverse   { color: var(--color-text-inverse); }

/* Uppercase label shortcut */
.uppercase-label {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}