/* inne tokens — generated from design-systems/inne/DESIGN.md (2026-05-13) */
/* Source of truth: Shopify theme "Impact | OS Dev | Main" (#178001936650). */

:root {
  /* ─── color: brand surfaces ─── */
  --c-bg:         #fcfaf7;
  --c-bg-soft:    #faf6f0;
  --c-ink:        #4d270e;
  --c-ink-mute:   #7a5a45;

  /* ─── color: accents ─── */
  --c-orange:       #ff9954;
  --c-deep-orange:  #e07a30;
  --c-yellow:       #f0c417;
  --c-purple:       #803cee;
  --c-warm-peach:   #fbe0c6;
  --c-peach-photo:  #d2b18e;  /* matches the top edge of hero-mobile.webp; used as mobile hero bg */

  /* ─── color: hero-on-orange surface model ─── */
  /* When orange is the hero canvas, text inverts to cream-bg-soft (#faf6f0). */
  /* Verified against live: computed color on H1 is rgb(250, 246, 240). */
  --c-hero-text:        #faf6f0;
  --c-hero-text-mute:   #f4e6cf;
  --c-hero-cta-fill:    #faf6f0;
  --c-hero-cta-ink:     #4d270e;
  --c-hero-cta-outline: rgba(250, 246, 240, 0.55);

  /* ─── color: state ─── */
  --c-border:  #e8dccc;
  --c-error:   #c0392b;
  --c-success: #3e7d4a;

  /* ─── typography: families ─── */
  /* Real inne fonts (loaded via @font-face below). Fallbacks chosen for closest metrics. */
  --ff-heading: "Oceanic Text", "Fraunces", "Tiempos Headline", "Iowan Old Style", Georgia, serif;
  --ff-text:    "GT America Inne", "Inter", "Helvetica Neue", system-ui, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ─── typography: scale (mobile) ─── */
  --fs-hero: 40px;
  --fs-h1:   32px;
  --fs-h2:   24px;
  --fs-h3:   20px;
  --fs-body: 16px;
  --fs-sm:   14px;
  --fs-xs:   12px;

  /* ─── spacing ─── */
  --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;

  /* ─── radius ─── */
  --r-btn:    60px;
  --r-block:  60px;
  --r-pill:   999px;
  --r-input:  8px;

  /* ─── container ─── */
  --w-max:      1440px;   /* hard cap on full page width — no stretch on ultrawide */
  --w-content:  1200px;
  --w-prose:     640px;

  /* ─── motion ─── */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --d-1: 160ms;
  --d-2: 240ms;
  --d-3: 400ms;

  /* ─── elevation ─── */
  --shadow-card: 0 4px 24px rgba(77, 39, 14, 0.08);
  --shadow-pill: 0 2px 12px rgba(77, 39, 14, 0.10);
}

/* ─── real inne fonts ─── */
@font-face {
  font-family: "Oceanic Text";
  src: url("./assets/fonts/Oceanic_Text_Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT America Inne";
  src: url("./assets/fonts/GT-America-INNE.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@media (min-width: 768px) {
  :root {
    --fs-hero: 52px;
    --fs-h1:   40px;
    --fs-h2:   30px;
    --fs-h3:   24px;
    --fs-body: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-1: 0ms; --d-2: 0ms; --d-3: 0ms; }
}

/* ─── base ─── */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
  Width strategy:
  - Section backgrounds (hero photo, footer bg) → full bleed to viewport edges
  - Inner CONTENT (text, CTAs, stats, nav) → capped at --w-max (1440px), centered
  This is how live inne.io makes 1920 FHD feel spacious instead of stretched.
*/

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--ff-text); }