/* ============================================================
   Unicraft — Colors & Type
   form, through process.
   ============================================================ */

/* Brand-supplied Poppins font files. Weights not present here (400 Regular,
   600 SemiBold, 800 ExtraBold) still load from Google Fonts as fallback. */
@font-face {
  font-family: 'Poppins'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('../fonts/Poppins-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/Poppins-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins'; font-weight: 900; font-style: normal; font-display: swap;
  src: url('../fonts/Poppins-Black.ttf') format('truetype');
}

/* Brand-supplied Instrument Sans — variable font covering 400–700 weights and
   75–100% widths. Drives all body, nav, and caption type. */
@font-face {
  font-family: 'Instrument Sans';
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/InstrumentSans-VariableFont_wdth,wght.ttf') format('truetype-variations');
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');

:root {
  /* ---- Primary palette ---------------------------------- */
  --color-acid-yellow:   #FDFE78;   /* logo, headlines, key CTAs */
  --color-deep-brown:    #3B2219;   /* card bgs, footers, anchors */
  --color-off-white:     #E5E5DE;   /* warm paper page bg */

  /* ---- Extended palette --------------------------------- */
  --color-olive:         #9CA938;   /* sparing tertiary accent */
  --color-near-black:    #090B0A;   /* ink, body on light */

  /* ---- Functional tokens -------------------------------- */
  --color-text-primary:  var(--color-near-black);
  --color-text-inverse:  var(--color-off-white);
  --color-text-accent:   var(--color-acid-yellow);
  --color-text-muted:    color-mix(in srgb, var(--color-near-black) 60%, var(--color-off-white));

  --color-bg-primary:    var(--color-off-white);
  --color-bg-dark:       var(--color-deep-brown);
  --color-bg-ink:        var(--color-near-black);

  --color-border:        color-mix(in srgb, var(--color-near-black) 12%, var(--color-off-white));
  --color-border-strong: color-mix(in srgb, var(--color-near-black) 24%, var(--color-off-white));
  --color-rule-dark:     color-mix(in srgb, var(--color-acid-yellow) 20%, transparent);

  /* ---- Typography --------------------------------------- */
  --font-display: 'Poppins', sans-serif;
  --font-body:    'Instrument Sans', sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;    /* 12 — legal, labels */
  --text-sm:   0.875rem;   /* 14 — nav, captions */
  --text-base: 1rem;       /* 16 — body */
  --text-md:   1.125rem;   /* 18 — large body */
  --text-lg:   1.5rem;     /* 24 — subheads */
  --text-xl:   2.25rem;    /* 36 — section titles */
  --text-2xl:  3.5rem;     /* 56 — hero secondary */
  --text-3xl:  5.5rem;     /* 88 — hero primary */
  --text-4xl:  8rem;       /* 128 — editorial display */

  /* Line height */
  --lh-display: 0.95;
  --lh-tight:   1.1;
  --lh-body:    1.65;

  /* Tracking */
  --tr-tight:   -0.02em;
  --tr-caption: 0.12em;
  --tr-nav:     0.08em;

  /* ---- Spacing scale (8px base) ------------------------- */
  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  96px;
  --space-8: 128px;
  --space-9: 192px;

  /* ---- Layout ------------------------------------------- */
  --layout-max:     1440px;
  --content-max:    1200px;
  --side-margin:    80px;
  --side-margin-md: 40px;
  --side-margin-sm: 24px;

  /* ---- Motion ------------------------------------------- */
  --ease-craft: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-slow:   900ms;
  --dur-base:   600ms;
  --dur-quick:  300ms;

  /* ---- Breakpoints (reference; use @media) -------------- */
  --bp-sm:   480px;
  --bp-md:   768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;
}

/* ============================================================
   Base / reset
   ============================================================ */
html, body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Semantic typography
   ============================================================ */

/* Editorial display — hero primary */
.u-display, h1.u-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 6vw, var(--text-3xl));
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tight);
  text-transform: lowercase;
  margin: 0;
}

/* Hero secondary / large pull quote */
.u-display-2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, var(--text-2xl));
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tight);
  text-transform: lowercase;
  margin: 0;
}

/* Section title */
.u-section-title, h2.u-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--lh-tight);
  text-transform: lowercase;
  margin: 0;
}

/* Subheading */
.u-subhead, h3.u-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--lh-tight);
  margin: 0;
}

/* Body */
.u-body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  max-width: 60ch;
}

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

/* Caption / label — widened tracking, lowercase */
.u-caption, .u-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: var(--tr-caption);
  text-transform: lowercase;
  color: var(--color-text-muted);
}

/* Navigation */
.u-nav {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  letter-spacing: var(--tr-nav);
  text-transform: lowercase;
}

/* Tagline / tagword — Poppins bold, widened */
.u-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--tr-caption);
  text-transform: lowercase;
}

/* Bracket motif helper */
.u-bracketed::before { content: "["; }
.u-bracketed::after  { content: "]"; }

/* Code / inline mono — fallback only; brand has no mono */
code, .u-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.95em;
}

/* ============================================================
   Components — restrained, hard-edged
   ============================================================ */

.u-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tr-nav);
  text-transform: lowercase;
  text-decoration: none;
  border: 0;
  border-radius: 0;            /* hard rectangle — non-negotiable */
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-craft),
              color var(--dur-quick) var(--ease-craft);
}
.u-button--primary {
  background: var(--color-acid-yellow);
  color: var(--color-deep-brown);
}
.u-button--primary:hover { background: color-mix(in srgb, var(--color-acid-yellow) 88%, var(--color-deep-brown)); }

.u-button--ghost {
  background: transparent;
  color: currentColor;
  border: 1px solid currentColor;
}

.u-divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-5) 0;
}

/* Focus */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--color-acid-yellow);
  outline-offset: 3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}