/*
  Inwall, shared stylesheet for both site pages (specs and design system).
  One file, one token layer, one set of component classes: index.html and
  design-system.html use the exact same markup patterns and class names.
  Structure mirrors the HugeOne specs site (laurasibille/hugeone); tokens
  below are extracted from the real Figma file "Inwallsept2025"
  (canvas "MVP Flows TO BE USED FOR MVP ONLY"), not invented.

  Layer order below:
    1. Tokens        (primitive -> semantic -> component, never skip a layer)
    2. Reset & base
    3. Layout         (left nav + main content, shared by both pages)
    4. Typography
    5. Tables
    6. Tags & badges
    7. Notes / callouts
    8. Content cards & flow steps          (specs page)
    9. Design system showcase primitives   (design-system page)
    10. Buttons
    11. Loop steps, side cards & app chrome demos
    12. Footer
    13. Responsive

  Rule: no hardcoded hex/px color value outside this token block.
*/

:root {

  /* ---------- 1a. PRIMITIVE (Figma variables, renumbered onto one consistent scale) ----------

     Naming contract, applied to every color family below, not just brand:
       -100  lightest tint    -> backgrounds, tint fills, never text
       -300/-400  light/mid   -> decorative, large fills, never small text
       -500  base             -> default interactive state (links, mid-emphasis icons)
       -700  strong           -> the tier that is ALWAYS safe as text/icon on white (>=4.5:1, verified below)
       -900  darkest          -> inverted surfaces (dark panels, tab bar), max-emphasis text
     Figma's own keys were sparse and inconsistent per family (brand jumped 300/400/500 then an
     unnumbered "enabled" then "800"; warning only had 200/600). Renumbered onto the single scale
     above so any token's role is predictable from its number alone, the same contract Tailwind/
     Material use — a value never moved without a name change, and vice versa. */

  /* brand InWall: the app's one brand hue, a violet-purple */
  --brand-100: #F3EBFE;   /* generated tint: active nav item, subtle brand wash */
  --brand-300: #D8AFFA;   /* Figma "brand InWall/300" */
  --brand-400: #B179F4;   /* Figma "brand InWall/400" */
  --brand-500: #803CF2;   /* Figma "brand InWall/500", = Link/Link-Active */
  --brand-700: #551BCD;   /* Figma "interactive-primary-brand/enabled" — renamed onto the scale, unchanged value */
  --brand-900: #220863;   /* Figma "brand InWall/800" / Surface-Inverted — renamed onto the scale, unchanged value */

  /* Brand gradients: two variants, not one, because a single light-to-dark sweep isn't safe
     everywhere text sits on it (see accessibility). */
  --gradient-hero: linear-gradient(224deg, #9F68F8 2.57%, #530BC9 97.39%);  /* Figma's exact logo gradient: icon-only contexts (app icon, FAB, avatars), never under text */
  --gradient-cta: linear-gradient(224deg, var(--brand-500) 0%, var(--brand-700) 100%);  /* both stops independently clear 4.5:1 with white text, safe under button labels */

  --neutral-0: #FFFFFF;
  --neutral-100: #EDEEF3;  /* interactive-secondary/tertiary fill */

  --text-primary: #1E2028;
  --text-secondary: #323442;
  --text-tertiary-raw: #6B6F8C;  /* Figma "Text-Thirdary" (sic) export value: 4.56:1 on --surface-secondary, thin AA margin at small sizes */
  --text-tertiary: #5B5F7A;      /* accessibility fix: 5.8:1 on --surface-secondary, 6.2:1 on white, same undertone */

  --surface-secondary: #F2F7FF;  /* app background, pale lavender-blue */

  --success-100: #B9E9C3;  /* Figma "success/200", renamed onto the scale */
  --success-700: #08711D;  /* Figma "success/600", renamed onto the scale — 6.2:1 on white, already text-safe */
  --warning-100: #FBEFA4;  /* Figma "warning/200", renamed onto the scale */
  --warning-600: #D1870A;  /* Figma "warning/600": 2.9:1 on white, fails AA text — fills/borders only, never as text color */
  --warning-700: #9A6208;  /* accessibility fix: 5.1:1 on white, same hue, the text/icon-safe tier */
  --critical-500: #DB195A; /* Figma "critical/500" — already the text-safe tier, 4.9:1 on white */

  /* Network brand colors, as used in Inwall's own budget/performance screens (not on the -N00 scale: these are fixed third-party identities, not a ramp) */
  --net-instagram: #DB195A;
  --net-facebook: #3568B8;
  --net-snapchat: #EAAD00;

  /* Typography: Manrope, replacing the earlier SF Pro Display pass. One family, variable weight
     200-800, licensed for both platforms (Google Fonts / pub.dev "google_fonts") — solves the
     Android-fallback gap SF Pro had by construction, no second native face needed. Letter-spacing
     is expressed in em further down (not px): it now scales with font-size instead of needing a
     hand-picked px value per step, which is the standard practice these tokens were missing. */
  --font-family-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing scale (kept from the specs-site convention, not yet in Figma variables) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 48px;   /* was 56px: closes the gap in an otherwise 4px-consistent scale (32 -> 56 skipped 40/48) */
  --space-10: 64px;

  /* Radius: Inwall's screens read as very rounded, full pill on list rows and buttons */
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --nav-width: 260px;


  /* ---------- 1b. SEMANTIC ---------- */

  --color-bg: var(--surface-secondary);
  --color-surface: var(--neutral-0);
  --color-surface-tint: var(--neutral-100);
  --color-border: var(--neutral-100);
  --color-border-strong: var(--brand-500);

  --color-heading: var(--text-primary);
  --color-text: var(--text-secondary);
  --color-text-muted: var(--text-tertiary);
  --color-text-subtle: var(--text-tertiary);
  --color-text-inverse: var(--neutral-0);

  --color-accent: var(--brand-700);      /* primary CTA, progress bars, FAB */
  --color-accent-hover: var(--brand-900);
  --color-accent-tint: var(--brand-300);
  --color-accent-ink: var(--neutral-0);
  --color-focus-ring: var(--brand-500);

  --color-advertiser: var(--brand-500);       /* budget/campaign screens reuse the one brand hue, no second accent in Figma */
  --color-advertiser-hover: var(--brand-700);
  --color-advertiser-tint: var(--brand-300);

  --color-warning: var(--warning-700);        /* text/icon color: needs the 700 step to clear 4.5:1 */
  --color-warning-tint: var(--warning-100);
  --color-warning-border: var(--warning-600); /* border/fill only: 3:1 non-text threshold applies, matches Figma exactly */

  --color-success: var(--success-700);
  --color-success-tint: var(--success-100);
  --color-success-border: var(--success-700);

  --color-error: var(--critical-500);
  --color-error-tint: #FBE1E9;
  --color-error-border: var(--critical-500);

  --shadow-card: 0px 6px 8px rgba(77, 81, 104, 0.04);   /* Figma "Elevation 2" */

  --code-bg: var(--color-surface);
  --code-border: var(--color-border);
  --code-text: var(--color-text);

  --table-header-bg: var(--color-surface-tint);
  --table-body-bg: var(--color-surface);


  /* ---------- 1c. COMPONENT ---------- */

  --touch-target-min: 44px;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  --button-height: 56px;
  --button-padding-x: var(--space-6);
  --button-radius: var(--radius-pill);
  --button-primary-bg: var(--gradient-cta);   /* brand signature on the primary action; flat --color-accent stays the fallback/focus-state color below */
  --button-primary-bg-hover: var(--color-accent-hover);
  --button-primary-text: var(--color-accent-ink);
  --button-secondary-bg: var(--neutral-0);
  --button-secondary-border: 1px solid var(--color-border);
  --button-secondary-text: var(--color-heading);
  --button-secondary-bg-hover: var(--color-surface-tint);

  --badge-bg: var(--color-border);
  --badge-text: var(--color-text);
  --badge-radius: var(--radius-pill);
  --badge-padding-x: var(--space-2);
  --badge-padding-y: var(--space-1);
}


/* ---------- 2. RESET & BASE ---------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-ui);
  line-height: 1.6;
}


/* ---------- 3. LAYOUT ---------- */

.layout { display: flex; min-height: 100vh; }

.nav {
  width: var(--nav-width);
  flex-shrink: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.nav-scroll { flex: 1; overflow-y: auto; padding: var(--space-8) var(--space-5) var(--space-4); }

.brand-word {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--color-heading);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-2);
}

.brand-word .mark {
  width: 26px; height: 26px;
  border-radius: 9px;
  background: var(--gradient-hero);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand-word .mark img { width: 16px; height: 16px; display: block; }

.brand-sub { font-size: 0.78rem; color: var(--color-text-subtle); margin-bottom: var(--space-8); }

.nav-group {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
  margin: var(--space-5) 0 var(--space-2);
  padding: 0 var(--space-3);
}

.nav-scroll a {
  display: block;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.88rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
}

.nav-scroll a:hover { background: var(--color-bg); color: var(--color-text); }

.nav-scroll a.active {
  background: #F3EBFE;
  color: var(--color-accent-hover);
  font-weight: 600;
}

a:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.nav-crosslink {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 var(--space-5) var(--space-8);
  padding: 14px var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-tint);
  box-shadow: var(--shadow-card);
  color: var(--color-heading);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
}

.nav-crosslink:hover { background: var(--color-border); }
.nav-crosslink svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--color-accent-hover); }
.nav-crosslink span { display: block; }

main { flex: 1; max-width: 900px; padding: var(--space-9) var(--space-10) 120px; min-width: 0; }


/* ---------- 4. TYPOGRAPHY ---------- */

h1 {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: 2.3rem;
  letter-spacing: -0.01em;
  color: var(--color-heading);
  margin: 0 0 var(--space-2);
}

.lede { color: var(--color-text-subtle); font-size: 1.05rem; max-width: 640px; margin-top: 0; }

section { margin-top: var(--space-9); }
section:first-of-type { margin-top: 0; }

h2 {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--color-heading);
  margin: 0 0 var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

section:first-of-type h2 { border-top: none; padding-top: 0; }

h3 { font-size: 1.1rem; color: var(--color-heading); margin: var(--space-7) 0 var(--space-2); }

p { max-width: 680px; }
.desc { color: var(--color-text-muted); max-width: 680px; }
ul, ol { max-width: 680px; padding-left: 1.3em; }
li { margin-bottom: var(--space-2); }

code {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  color: var(--code-text);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
  font-family: var(--font-family-mono);
}


/* ---------- 5. TABLES ---------- */

.table-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  overflow: auto;
  margin: var(--space-4) 0;
}

table { border-collapse: collapse; width: 100%; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
th, td { border-bottom: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; }
tr:last-child th, tr:last-child td { border-bottom: none; }
th { background: var(--table-header-bg); font-weight: 600; }
td { background: var(--table-body-bg); }


/* ---------- 6. TAGS & BADGES ---------- */

.tag {
  display: inline-block;
  font-family: var(--font-family-ui);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-tint);
  color: var(--color-text-subtle);
  margin-left: var(--space-2);
}

.tag.future { background: var(--color-warning-tint); color: var(--color-warning); }
.tag.mvp { background: #F3EBFE; color: var(--color-accent-hover); }
.tag.advertiser { background: var(--color-advertiser-tint); color: var(--color-accent-hover); }
.tag.risk { background: transparent; border: 1px solid var(--color-warning); color: var(--color-warning); }
.tag.success { background: var(--color-success-tint); color: var(--color-success); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--badge-bg);
  color: var(--badge-text);
  border-radius: var(--badge-radius);
  padding: var(--badge-padding-y) var(--badge-padding-x);
  font-size: 14px;
  white-space: nowrap;
}


/* ---------- 7. NOTES / CALLOUTS ---------- */

.note {
  border: 1px solid var(--color-border);
  background: var(--color-surface-tint);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  font-size: 0.9rem;
  color: var(--color-text);
  margin: var(--space-4) 0;
}

.note.open { background: var(--color-warning-tint); border-color: var(--color-warning-border); color: var(--color-warning); }
.note.success { background: var(--color-success-tint); border-color: var(--color-success-border); color: var(--color-success); }
.note.error { background: var(--color-error-tint); border-color: var(--color-error-border); color: var(--color-error); }


/* ---------- 8. CONTENT CARDS & FLOW STEPS (specs page) ---------- */

.card-row { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: var(--space-4) 0; }
.card-row .card { flex: 1 1 260px; margin: 0; }

.card {
  background: var(--color-surface-tint);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  margin: var(--space-4) 0;
  box-shadow: var(--shadow-card);
}

.card-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
}

.card-icon svg { width: 20px; height: 20px; color: var(--color-accent-ink); }
.card h3 { margin-top: 0; }

.flow-step { display: flex; gap: var(--space-4); margin-bottom: var(--space-4); align-items: flex-start; }

.flow-num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-family-mono);
  font-size: 0.8rem; font-weight: 700;
}


/* ---------- 9. DESIGN SYSTEM SHOWCASE PRIMITIVES ---------- */

.color-group { margin: var(--space-6) 0; }
.color-group h3 { margin-top: 0; margin-bottom: var(--space-1); }
.color-group .desc { font-size: 0.85rem; margin-bottom: var(--space-3); }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4); margin: var(--space-4) 0; }
.swatch { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-card); }
.swatch-fill { height: 64px; border-bottom: 1px solid var(--color-border); }  /* always-visible seam: without it, a white/near-white fill (surface-primary, neutral-100) melts into the white meta panel below with no boundary */
.swatch-fill > span { display: block; width: 100%; height: 100%; }
.swatch-meta { padding: var(--space-3); background: var(--color-surface); font-size: 0.78rem; }
.swatch-meta .name { font-weight: 600; color: var(--color-text); display: block; }
.swatch-meta .value { color: var(--color-text-subtle); font-family: var(--font-family-mono); }

.type-row { display: flex; align-items: baseline; gap: var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.type-row .type-meta { width: 260px; flex-shrink: 0; font-size: 0.78rem; color: var(--color-text-subtle); font-family: var(--font-family-mono); }
.type-row .type-sample { color: var(--color-text); }

.scale-row { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-2); font-size: 0.85rem; }
.scale-row .scale-bar { background: var(--color-accent); height: 16px; border-radius: 4px; }
.scale-row .scale-label { width: 160px; flex-shrink: 0; font-family: var(--font-family-mono); color: var(--color-text-muted); }

.showcase { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding: var(--space-6); background: var(--color-surface-tint); border-radius: var(--radius-md); margin: var(--space-4) 0; }
.showcase.dark { background: var(--brand-900); }


/* ---------- 10. BUTTONS ---------- */

.btn {
  height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--button-radius);
  border: none;
  font-family: var(--font-family-ui);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
}

.btn-primary { background: var(--button-primary-bg); color: var(--button-primary-text); }
.btn-primary:hover { background: var(--button-primary-bg-hover); }

.btn-secondary { background: var(--button-secondary-bg); border: var(--button-secondary-border); color: var(--button-secondary-text); box-shadow: var(--shadow-card); }
.btn-secondary:hover { background: var(--button-secondary-bg-hover); }

.btn:focus-visible, .nav-scroll a:focus-visible, .nav-crosslink:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.stepper-btn {
  /* Figma draws this at 32px; raised to the 44px touch-target minimum (WCAG 2.5.8 / Apple HIG) since it
     sets a money amount and a mis-tap has a real cost. */
  width: var(--touch-target-min); height: var(--touch-target-min);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700;
  cursor: pointer;
}


/* ---------- 11. LOOP STEPS, SIDE CARDS & APP CHROME DEMOS ---------- */

.loop-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }

.loop-cell { background: var(--color-surface); padding: var(--space-5) var(--space-4); }
.loop-cell .num { font-family: var(--font-family-mono); font-size: 0.75rem; color: var(--color-text-subtle); display: block; margin-bottom: var(--space-3); }
.loop-cell h4 { font-family: var(--font-family-ui); font-weight: 700; font-size: 0.95rem; margin: 0 0 var(--space-1); }
.loop-cell p { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; }
.loop-cell.side-advertiser { border-top: 3px solid var(--color-advertiser); }
.loop-cell.side-inwaller { border-top: 3px solid var(--color-accent); }

.sides-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin: var(--space-4) 0; }

.side-card { border-radius: var(--radius-md); padding: var(--space-6); border: 1px solid var(--color-border); }
.side-card.advertiser { background: #F6F0FE; }
.side-card.inwaller { background: var(--color-bg); }
.side-card .side-tag { font-family: var(--font-family-ui); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-2); display: block; font-weight: 700; }
.side-card.advertiser .side-tag { color: var(--color-accent-hover); }
.side-card.inwaller .side-tag { color: var(--brand-500); }
.side-card h3 { margin-top: 0; }
.side-card ul { padding-left: 0; list-style: none; }
.side-card li { padding-left: 18px; position: relative; font-size: 0.9rem; }
.side-card li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500); }

.budget-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.budget-total .amt { font-family: var(--font-family-mono); font-size: 1.5rem; font-weight: 700; color: var(--color-heading); }
.budget-total .lbl { font-family: var(--font-family-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-subtle); }
.budget-stack { display: flex; height: 30px; border-radius: 8px; overflow: hidden; margin-bottom: var(--space-4); }
.budget-stack > div { display: flex; align-items: center; justify-content: center; font-family: var(--font-family-mono); font-size: 0.65rem; color: #fff; }

/* Phone-frame chrome demo, for showing the tab bar / FAB in context */
.phone-frame {
  width: 220px;
  border-radius: 32px;
  background: var(--brand-900);
  padding: 10px;
  box-shadow: var(--shadow-card);
}
.phone-frame .phone-inner {
  background: var(--color-bg);
  border-radius: 24px;
  height: 160px;
  position: relative;
  overflow: hidden;
}
.tabbar-demo {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  height: 46px;
  background: var(--brand-900);
  border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: space-around;
  padding: 0 8px;
}
.tabbar-demo .dot { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.35); }
.tabbar-demo .fab { width: 30px; height: 30px; border-radius: 50%; background: var(--gradient-hero); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }


/* ---------- 12. FOOTER ---------- */

footer { color: var(--color-text-subtle); font-size: 0.82rem; padding: var(--space-8) var(--space-10); border-top: 1px solid var(--color-border); }


/* ---------- 13. RESPONSIVE ---------- */

@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .nav { width: 100%; height: auto; position: relative; }
  main { padding: var(--space-8) var(--space-6); }
  .loop-row, .sides-row { grid-template-columns: 1fr; }
}