/*
 * flogit.app — foundation
 *
 * DIRECTION: soft light, floating surfaces, one warm spark.
 *
 * The page is a pale, faintly blue ground with white cards resting on it and
 * catching a coloured shadow. Nothing is a hard band edge to edge any more —
 * every block is an object with corners, sitting IN the page rather than being
 * a stripe of it. That single change is most of what separates this from the
 * poster-field version it replaces.
 *
 * TWO COLOURS, TWO JOBS, AND THEY DO NOT SWAP.
 *   Blue (#5164ae) is identity. It comes from the logo, it is what the extension
 *   is painted in, and it holds the structure: the mark, links, the dark slab,
 *   the plan that is recommended.
 *   Amber (#f59e0b) is energy. It is the button you are meant to press, the
 *   badge, the number worth noticing. It is deliberately warm against a cool
 *   page, and deliberately rare — the moment it appears twice in a viewport it
 *   stops meaning anything.
 *
 * Outfit stays: it is the product's own face, self-hosted, and a geometric sans
 * is exactly the family these references reach for. The display sizes are set
 * far tighter than a default (−0.07em at the top end) because that compression
 * is doing more of the "expensive" work than any effect on this page.
 *
 * The monospace survives as the section marker, smaller and lighter than before.
 * It is the one thing here nobody else has — it comes from the composition tags
 * and size tickets on the clothing this product is about — so it earns its keep
 * even while everything around it went soft.
 */

/* ── Faces ──────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Ground and ink. The near-white carries a trace of the brand's blue so the
     accent sits on top of it rather than arguing with it. */
  --paper:     #fbfbfd;
  --paper-2:   #f3f5fb;
  --ink:       #0e1424;
  --ink-2:     #454e63;
  --ink-3:     #5f6879;   /* 5.6:1 on paper — #737c91 was 4.2 and failed */
  --rule:      #e6e9f2;
  --rule-firm: #ced4e4;

  --brand:      #5164ae;
  --brand-deep: #3c4a82;
  --brand-soft: #8b98cf;
  --brand-wash: #eef0fa;

  /* The spark. Amber, not yellow — yellow on white needs a border to exist at
     all, and a button that needs a border to be seen is not a primary action. */
  --spark:      #f59e0b;
  --spark-deep: #d97706;
  --spark-wash: #fff4e2;
  /* Text ON a warm surface. --spark-deep is a fill colour, not an ink: at 2.9:1
     on --spark-wash it was unreadable as the step numerals. */
  --spark-ink:  #92400e;
  /* Text ON the amber fill. Warm near-black rather than the page ink, so the
     button does not look like a cool rectangle pasted onto a warm one. */
  --on-spark:   #22160a;

  --sunk:   #f3f5fb;
  --raised: #ffffff;

  /* Semantic, and deliberately not either accent — a margin going negative must
     not look like a brand moment, and a good one must not look like a CTA. */
  --good: #12b76a;
  --warn: #f79009;
  --bad:  #d92d20;

  --sans: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* One scale, used everywhere. 4px rhythm. */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;

  --measure: 38rem;                       /* ~65 characters of body text */
  --page: 78rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --edge: max(var(--gutter), (100vw - var(--page)) / 2);

  /* Corners. Generous, and consistent: a card and the slab it sits near have to
     agree, or the page reads as two designs stapled together. */
  --r-sm: 0.625rem; --r-md: 0.875rem; --r-lg: 1.25rem;
  --r-xl: 1.75rem;  --r-2xl: 2.25rem;  --r-pill: 999px;

  /* Shadows carry a trace of the brand hue rather than pure black. Grey shadows
     on a blue-tinted ground look like dirt; tinted ones look like light. */
  --lift:    0 1px 2px rgba(30,41,89,.04), 0 8px 24px -14px rgba(30,41,89,.20);
  --lift-md: 0 2px 4px rgba(30,41,89,.04), 0 18px 40px -20px rgba(30,41,89,.26);
  --lift-lg: 0 4px 8px rgba(30,41,89,.05), 0 40px 80px -32px rgba(30,41,89,.34);
  --glow-spark: 0 10px 30px -10px rgba(245,158,11,.45);
  --glow-brand: 0 10px 30px -10px rgba(81,100,174,.45);

  --tap: 2.75rem;                         /* 44px — the touch-target floor */
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0a0d16; --paper-2: #10141f; --ink: #f7f8fa; --ink-2: #c6ccd9;
    --ink-3: #a6aec0; --rule: #1e2431; --rule-firm: #2e3646;
    --brand: #9aa6d6; --brand-deep: #b6bfe4; --brand-soft: #6c7ab5; --brand-wash: #161c2b;
    --spark: #fbbf24; --spark-deep: #f59e0b; --spark-wash: #221a0d;
    --spark-ink: #fcd34d; --on-spark: #1a1204;
    --sunk: #0a0d16; --raised: #151b28;
    --lift:    0 1px 2px rgba(0,0,0,.30), 0 8px 24px -14px rgba(0,0,0,.60);
    --lift-md: 0 2px 4px rgba(0,0,0,.30), 0 18px 40px -20px rgba(0,0,0,.65);
    --lift-lg: 0 4px 8px rgba(0,0,0,.35), 0 40px 80px -32px rgba(0,0,0,.75);
  }
}
:root[data-theme='dark'] {
  --paper: #0a0d16; --paper-2: #10141f; --ink: #f7f8fa; --ink-2: #c6ccd9;
  --ink-3: #a6aec0; --rule: #1e2431; --rule-firm: #2e3646;
  --brand: #9aa6d6; --brand-deep: #b6bfe4; --brand-soft: #6c7ab5; --brand-wash: #161c2b;
  --spark: #fbbf24; --spark-deep: #f59e0b; --spark-wash: #221a0d;
    --spark-ink: #fcd34d; --on-spark: #1a1204;
  --sunk: #0a0d16; --raised: #151b28;
  --lift:    0 1px 2px rgba(0,0,0,.30), 0 8px 24px -14px rgba(0,0,0,.60);
  --lift-md: 0 2px 4px rgba(0,0,0,.30), 0 18px 40px -20px rgba(0,0,0,.65);
  --lift-lg: 0 4px 8px rgba(0,0,0,.35), 0 40px 80px -32px rgba(0,0,0,.75);
}
:root[data-theme='light'] {
  --paper: #fbfbfd; --paper-2: #f3f5fb; --ink: #0e1424; --ink-2: #454e63;
  --ink-3: #5f6879; --rule: #e6e9f2; --rule-firm: #ced4e4;
  --brand: #5164ae; --brand-deep: #3c4a82; --brand-soft: #8b98cf; --brand-wash: #eef0fa;
  --spark: #f59e0b; --spark-deep: #d97706; --spark-wash: #fff4e2;
  --spark-ink: #92400e; --on-spark: #22160a;
  --sunk: #f3f5fb; --raised: #ffffff;
  --lift:    0 1px 2px rgba(30,41,89,.04), 0 8px 24px -14px rgba(30,41,89,.20);
  --lift-md: 0 2px 4px rgba(30,41,89,.04), 0 18px 40px -20px rgba(30,41,89,.26);
  --lift-lg: 0 4px 8px rgba(30,41,89,.05), 0 40px 80px -32px rgba(30,41,89,.34);
}

*, *::before, *::after { box-sizing: border-box; }

/* `overflow-x: clip` belongs on html, not body. Set on body it PROPAGATES to
   the viewport and body itself computes back to visible — which looks like it
   works until something overflows and you cannot see why it still scrolls. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  /* 19px at rest, up from 17. The references run 16–20; the larger end is part
     of why they feel unhurried, and this product's copy is short enough to
     afford it. */
  font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 700; }
h1 { font-size: clamp(2.5rem, 5.4vw + 0.5rem, 4.75rem); line-height: 0.97; letter-spacing: -0.045em; }
h2 { font-size: clamp(1.875rem, 2.8vw + 0.75rem, 3rem);  line-height: 1.05; letter-spacing: -0.035em; }
h3 { font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem);      line-height: 1.2;  letter-spacing: -0.022em; }
h4 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; }
p  { margin: 0; }
a  { color: inherit; }

/* The tag voice: garment labels, sizes, measurements, section markers. Smaller
   and lighter than it was — it still names the section, but it no longer has to
   carry the page now that the surfaces do. */
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: var(--s3) var(--s4); border-radius: var(--r-sm);
}
.skip:focus { left: var(--s4); top: var(--s4); }

/* Motion. Entrances and hover only — nothing loops, nothing moves on its own.
   Ambient perpetual motion is the fastest way to make an expensive-looking page
   feel cheap, and it is what everyone reaches for first. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Available to a screen reader, absent from the page. Used where a cell's whole
   meaning is an icon — a table of bare ticks reads as an empty row otherwise. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}