/* =========================================================================
   Hedgerow Design System — Foundations
   Type, color, spacing, motion. Editorial / architectural register.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap");

:root {
  /* -- Typography ---------------------------------------------------------- */
  --font-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — editorial, generous on the high end. */
  --fs-mono-xs:   10px;   /* slide numbers, classifications */
  --fs-mono-sm:   12px;   /* metadata, tags, callouts */
  --fs-mono-md:   14px;   /* technical body */
  --fs-body-sm:   14px;
  --fs-body-md:   16px;
  --fs-body-lg:   18px;
  --fs-display-1: 24px;
  --fs-display-2: 32px;
  --fs-display-3: 48px;
  --fs-display-4: 72px;   /* slide subheads */
  --fs-display-5: 96px;   /* slide headlines */
  --fs-display-6: 128px;  /* hero / title slides */

  --lh-tight:    1.0;
  --lh-snug:     1.1;
  --lh-display:  1.05;
  --lh-body:     1.45;
  --lh-mono:     1.4;

  --tracking-mono:   0.04em;   /* baseline mono spacing */
  --tracking-stamp:  0.18em;   /* uppercase metadata, classifications */
  --tracking-display:-0.02em;  /* tight on big type */
  --tracking-body:   0;

  /* -- Color: Paper & Ink (the page itself) ------------------------------- */
  --paper:       #F4F1EC;   /* warm off-white, primary background */
  --paper-deep:  #ECE7DF;   /* secondary surface */
  --ink:         #14110E;   /* near-black, warm */
  --ink-soft:    #2A2520;   /* secondary text */
  --ink-mute:    #5C544B;   /* tertiary / metadata */
  --ink-faint:   #9A8F82;   /* hairlines, captions */
  --rule:        #1411101A; /* 10% ink, hairline rules */
  --rule-strong: #14111033; /* 20% ink, dividers */

  /* Inverse (dark surfaces — used sparingly, e.g. section breaks) */
  --ink-paper:       #0E0C0A;
  --ink-paper-deep:  #1A1714;
  --paper-on-ink:    #F4F1EC;
  --paper-on-ink-mute:#A89E92;

  /* -- Color: Coral Highlighter (the signature) --------------------------- */
  --coral:        #F4A261;   /* the highlighter — single accent (sandy coral) */
  --coral-deep:   #D88638;   /* hover / pressed */
  --coral-soft:   #FAD4A8;   /* tints, rarely used */
  --coral-swipe:  #F4A261E6; /* the marker swipe — 90% opacity over text */

  /* -- Semantic foreground / background ---------------------------------- */
  --bg:        var(--paper);
  --bg-alt:    var(--paper-deep);
  --bg-invert: var(--ink-paper);

  --fg-1: var(--ink);        /* primary text */
  --fg-2: var(--ink-soft);   /* secondary */
  --fg-3: var(--ink-mute);   /* tertiary, metadata */
  --fg-4: var(--ink-faint);  /* captions, hairlines */
  --fg-accent: var(--coral);

  /* -- Spacing (8pt baseline, with some 4pt micro) ----------------------- */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10: 128px;
  --s-11: 192px;

  /* Slide gutter — 16:9 at 1920×1080 uses 96px */
  --slide-gutter: 96px;
  --slide-gutter-sm: 64px;

  /* -- Borders, radii, hairlines ----------------------------------------- */
  --hairline:        1px solid var(--rule);
  --hairline-strong: 1px solid var(--rule-strong);
  --rule-thick:      2px solid var(--ink);

  --radius-0: 0;       /* default — squared corners, like print */
  --radius-1: 2px;     /* subtle softening, used sparingly */
  --radius-2: 4px;     /* form inputs */

  /* No drop shadows in this system. Elevation is implied through
     hairlines and negative space, not blur. */
  --shadow-none: none;
  --shadow-print: 0 1px 0 var(--rule); /* the only "shadow" — printed-page edge */

  /* -- Motion ------------------------------------------------------------ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* deliberate, no bounce */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;   /* micro-feedback */
  --dur-2: 220ms;   /* standard hover/press */
  --dur-3: 400ms;   /* fades, reveals */
  --dur-4: 700ms;   /* swipe-on highlighter mark */
}

/* =========================================================================
   Semantic element styles — drop these into any HTML and it'll feel right.
   ========================================================================= */

.h-display, .display, h1.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-5);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-wrap: balance;
}

.h1, h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-4);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

.h2, h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-3);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  margin: 0;
}

.h3, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-2);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0;
}

.h4, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-1);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

.body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0;
}

.body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--fg-3);
}

/* The case-file / documentary stamp. Appears as slide labels, metadata,
   confidentiality marks. Always uppercase, always tracked. */
.stamp, .meta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono-sm);
  line-height: var(--lh-mono);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--fg-3);
}

.stamp-sm {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Mono used for technical callouts, code, classifications without uppercase */
.mono, code, kbd {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-mono-md);
  letter-spacing: var(--tracking-mono);
  color: var(--fg-2);
}

/* The signature: the coral highlighter swipe.
   Apply to a <span> wrapping ONE word or short phrase per slide.
   Renders as a hand-marked highlighter pass over the text. */
.swipe {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: var(--fg-1);
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 8%,
    var(--coral-swipe) 12%,
    var(--coral-swipe) 88%,
    transparent 92%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  padding: 0 0.08em;
  /* The mark sits BEHIND the glyphs visually, so text stays legible */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Animated swipe-on for slide intros */
@keyframes swipe-in {
  from { background-size: 0% 100%; }
  to   { background-size: 100% 100%; }
}
.swipe.swipe--animate {
  animation: swipe-in var(--dur-4) var(--ease-out) 200ms both;
}

/* Slight irregularity — the mark isn't perfectly aligned, like a real pen */
.swipe--rough {
  background-image: linear-gradient(
    178deg,
    transparent 0%,
    transparent 10%,
    var(--coral-swipe) 14%,
    var(--coral-swipe) 86%,
    transparent 90%,
    transparent 100%
  );
}

/* Hairline rule, used as section divider */
.rule {
  border: 0;
  border-top: 1px solid var(--rule-strong);
  margin: 0;
}

/* =========================================================================
   Page defaults
   ========================================================================= */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--coral);
  color: var(--paper);
}