/* ============================================================
   SHYFT — Colors & Type
   The canonical foundation. Import this from any artifact.
   ============================================================ */

/* Fonts — loaded from Google Fonts (Shyft uses the Google Fonts hosted versions).
   Replace with licensed .woff2 files in /fonts/ when available. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;600&family=Reenie+Beanie&display=swap');

:root {
  /* ------------------------------------------------------------
     PALETTE — extracted directly from the symbol logo.
     Warm, earthy, confident. No tech-blue, no SaaS-purple.
     ------------------------------------------------------------ */

  /* Primary — the three load-bearing colors */
  --shyft-steel:      #5B8EA2;   /* Information, links, calm accent */
  --shyft-copper:     #A46E3F;   /* Action, CTAs — use sparingly */
  --shyft-dark:       #2C2824;   /* Default foreground, hero bg */

  /* Secondary */
  --shyft-moss:       #8A9858;   /* Tags, status, subtle marks */
  --shyft-terracotta: #D49580;   /* Warm accents, hover, illustration */
  --shyft-sage:       #D2D9C4;   /* Card fills, never a text color */
  --shyft-bark:       #7A5A30;   /* Logo-internal deep brown */

  /* Neutrals */
  --shyft-white:      #FAFAF8;
  --shyft-cream:      #F5F3EE;
  --shyft-warm-gray:  #E8E4DC;
  --shyft-mid-gray:   #9A9590;
  --shyft-black:      #1A1714;

  /* Functional (scoped aliases) */
  --shyft-success:    #5B8EA2;
  --shyft-warning:    #D49580;
  --shyft-error:      #C4644A;

  /* ------------------------------------------------------------
     SEMANTIC TOKENS — prefer these in product surfaces so a
     light/dark reskin requires touching only this block.
     ------------------------------------------------------------ */
  --bg:               var(--shyft-white);
  --bg-alt:           var(--shyft-cream);
  --bg-inverse:       var(--shyft-dark);
  --surface:          #FFFFFF;
  --surface-muted:    var(--shyft-cream);

  --fg:               var(--shyft-dark);
  --fg-muted:         var(--shyft-mid-gray);
  --fg-inverse:       var(--shyft-white);

  --border:           var(--shyft-warm-gray);
  --border-strong:    #C9C3B8;

  --link:             var(--shyft-steel);
  --action:           var(--shyft-copper);
  --action-hover:     #8E5E33;

  /* ------------------------------------------------------------
     TYPE — three families, clearly separated roles. No mixing.
     ------------------------------------------------------------ */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-script:  'Reenie Beanie', Georgia, cursive;  /* handwritten · claims, slogans, editorial moments */

  /* Script sizes — Sacramento renders much smaller than display at the same rem */
  --fs-script-sm:  2rem;
  --fs-script-md:  3rem;
  --fs-script-lg:  clamp(3rem, 7vw, 5.5rem);
  --fs-script-xl:  clamp(4rem, 10vw, 8rem);

  /* Underline tokens — editorial, subtle */
  --underline-thin:   1px solid currentColor;
  --underline-medium: 2px solid var(--shyft-copper);
  --underline-offset: 0.2em;

  /* Scale — fluid */
  --fs-mono-xs:   0.65rem;
  --fs-mono-sm:   0.75rem;
  --fs-mono:      0.85rem;
  --fs-body-sm:   0.875rem;
  --fs-body:      1rem;
  --fs-body-lg:   1.15rem;
  --fs-lead:      clamp(1.1rem, 2vw, 1.35rem);
  --fs-h4:        1.1rem;
  --fs-h3:        clamp(1.25rem, 2.5vw, 1.75rem);
  --fs-h2:        clamp(2rem, 4.5vw, 3.5rem);
  --fs-h1:        clamp(3rem, 7vw, 6rem);
  --fs-display:   clamp(4rem, 10vw, 8rem);

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Tracking — display type always runs tight */
  --tr-tightest: -0.06em;
  --tr-tighter:  -0.04em;
  --tr-tight:    -0.03em;
  --tr-snug:     -0.02em;
  --tr-wide:     0.15em;
  --tr-widest:   0.25em;

  /* Leading */
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body:    1.65;
  --lh-tight:   1.2;

  /* ------------------------------------------------------------
     SPACING — 4px base, asymmetric layouts, generous whitespace.
     ------------------------------------------------------------ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --section-pad: clamp(4rem, 8vw, 8rem);
  --content-max: 960px;

  /* ------------------------------------------------------------
     RADII — blocky geometry inspired by logo tiles.
     Cards 12–16px; buttons 6–8px; pills 999px. Hard edges sparingly.
     ------------------------------------------------------------ */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;   /* buttons */
  --radius-lg:   12px;  /* cards */
  --radius-xl:   16px;  /* large surfaces */
  --radius-full: 999px;

  /* ------------------------------------------------------------
     SHADOWS — restrained. Shyft avoids heavy blur.
     ------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(44, 40, 36, 0.06);
  --shadow-sm: 0 1px 3px rgba(44, 40, 36, 0.08), 0 1px 2px rgba(44, 40, 36, 0.04);
  --shadow-md: 0 4px 8px rgba(44, 40, 36, 0.06), 0 2px 4px rgba(44, 40, 36, 0.04);
  --shadow-lg: 0 12px 24px rgba(44, 40, 36, 0.08), 0 4px 8px rgba(44, 40, 36, 0.04);

  /* Motion */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Scoped under .shyft so they don't bleed into host pages.
   Wrap content with <div class="shyft">…</div> to opt in.
   ============================================================ */

.shyft,
.shyft * { box-sizing: border-box; }

.shyft {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.shyft ::selection { background: var(--shyft-steel); color: #fff; }

/* Headings — always Space Grotesk, always tight tracking */
.shyft h1, .shyft .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  letter-spacing: var(--tr-tighter);
  line-height: var(--lh-display);
  color: var(--fg);
}
.shyft h2, .shyft .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-heading);
}
.shyft h3, .shyft .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h3);
  letter-spacing: var(--tr-snug);
  line-height: var(--lh-tight);
}
.shyft h4, .shyft .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h4);
  letter-spacing: -0.01em;
}

.shyft p, .shyft .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 64ch;
}

.shyft .lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-muted);
}

.shyft .label,
.shyft .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.shyft .big-quote {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  letter-spacing: var(--tr-snug);
  line-height: 1.25;
  padding-left: 1.5rem;
  border-left: 3px solid var(--shyft-copper);
  max-width: 720px;
}

.shyft code, .shyft .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
}

.shyft a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
.shyft a:hover { color: var(--action); }

.shyft hr.divider {
  width: 60px; height: 3px;
  background: var(--shyft-copper);
  border: 0;
  margin: var(--space-8) 0;
}

/* Dark-context overrides */
.shyft .script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* Script size helpers */
.shyft .script-sm { font-size: var(--fs-script-sm); }
.shyft .script-md { font-size: var(--fs-script-md); }
.shyft .script-lg { font-size: var(--fs-script-lg); }
.shyft .script-xl { font-size: var(--fs-script-xl); }

/* Underline utilities — editorial, not decorative */
.shyft .u-thin {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--underline-offset);
  text-decoration-color: currentColor;
}
.shyft .u-copper {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: var(--underline-offset);
  text-decoration-color: var(--shyft-copper);
}
.shyft .u-steel {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--underline-offset);
  text-decoration-color: var(--shyft-steel);
}
/* Faint underline — barely there, very editorial */
.shyft .u-ghost {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: rgba(44, 40, 36, 0.25);
}
.shyft.on-dark .u-ghost,
.shyft .on-dark .u-ghost {
  text-decoration-color: rgba(255,255,255,0.25);
}


  color: var(--fg-inverse);
  background: var(--bg-inverse);
}
.shyft.on-dark .lead,
.shyft .on-dark .lead { color: rgba(255,255,255,0.6); }
.shyft.on-dark .label,
.shyft .on-dark .label { color: rgba(255,255,255,0.45); }
.shyft.on-dark .big-quote,
.shyft .on-dark .big-quote { border-left-color: var(--shyft-terracotta); }