/* ============================================================================
   creel.fish — web token layer
   ----------------------------------------------------------------------------
   Colour and type PRIMITIVES are imported verbatim from the app's Field Journal
   design system, so the site cannot drift from the product:
     docs/design/field-journal/handoff/project/colors_and_type.css  (FJ block)
   Do not edit an --fj-* value here. Change it there and re-copy.

   Everything under "WEB SCALE" is additive. The FJ ramp is phone-scale (42px
   display, 22px gutter); a browser window is a different instrument, so the web
   layer adds its own fluid ramp and grid ON TOP of the same primitives.
   ========================================================================== */

:root {
  /* ---- FJ colour primitives (verbatim) --------------------------------- */
  --fj-paper:     #F4EEE1;   /* primary cream — every screen background */
  --fj-paper-2:   #EBE2CE;   /* inset surfaces: plates, cards-on-paper */
  --fj-ink:       #2B2A25;   /* primary text */
  --fj-ink-2:     #5E5A4E;   /* secondary text, body copy */
  --fj-ink-3:     #706B5E;   /* tertiary — metadata, kickers */
  --fj-rule:      #C9BFA6;   /* hairline dividers, chip borders */
  --fj-forest:    #2F4A35;   /* active kickers, success tone */
  --fj-oxblood:   #7C2E2A;   /* score stamps, emphasis, primary action */
  --fj-sun:       #C4761D;   /* warm tones — fair scores, dawn */
  --fj-sky:       #5C7A8A;   /* cool tones — night, water temp */
  --fj-cal-empty: #E3D9C2;   /* empty calendar cell */

  /* Bite-score ramp — the app's signature data colour. Usable on the web for
     any conditions/score motif. Do not repurpose for decoration. */
  --fj-bite-slow: #9DB0A8;
  --fj-bite-low:  #C9B27A;
  --fj-bite-mid:  #D69A3C;
  --fj-bite-high: #C2622A;
  --fj-bite-peak: #8E2B22;

  /* ---- FJ type primitives (verbatim) ----------------------------------- */
  --fj-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --fj-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fj-body:  'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --fj-track-kicker:       2px;
  --fj-track-kicker-tight: 1.5px;

  /* ---- FJ shape (verbatim) --------------------------------------------- */
  /* 2px is THE Field Journal signature — almost everything is sharp.
     Never round a corner past this on the web. No pills, no 12px cards. */
  --fj-radius:      2px;
  --fj-radius-soft: 0;

  --fj-rule-solid:  1px solid var(--fj-rule);
  --fj-rule-dashed: 1px dashed var(--fj-rule);
  --fj-rule-dotted: 1.5px dotted var(--fj-rule);

  /* ======================= WEB SCALE (additive) ========================= */

  /* Type ramp — fluid, desktop-first. The phone ramp tops out at 42px; a web
     hero needs more. Serif for display, Inter for body, Mono for kickers. */
  --w-t-hero:     clamp(46px, 7.4vw, 96px);   /* home masthead, serif */
  --w-t-display:  clamp(32px, 4.0vw, 54px);   /* section hero, serif */
  --w-t-title:    clamp(24px, 2.4vw, 33px);   /* card / feature title, serif */
  --w-t-subtitle: clamp(20px, 1.9vw, 24px);   /* sub-head, serif */
  --w-t-lede:     clamp(18px, 1.6vw, 22px);   /* hero paragraph, Inter 400 */
  --w-t-body:     17px;                       /* body copy (phone uses 15) */
  --w-t-meta:     14px;                       /* secondary meta */
  --w-t-kicker:   12px;                       /* Mono uppercase, tracked */
  --w-t-folio:    10px;                       /* legal, footer microcopy */

  /* Grid */
  --w-max:         1180px;  /* outer content cap */
  --w-max-text:    680px;   /* prose column cap */
  --w-measure:     34em;    /* ideal reading measure */
  --w-gutter:      clamp(22px, 5vw, 64px);
  --w-section-pad: clamp(64px, 9vw, 128px);

  /* Vertical rhythm — the FJ 4px scale, extended for web section spacing */
  --w-space-xs:  4px;
  --w-space-sm:  8px;
  --w-space-md:  12px;
  --w-space-lg:  16px;
  --w-space-xl:  22px;
  --w-space-2xl: 36px;
  --w-space-3xl: 56px;

  /* Device frame for screenshot placeholders */
  --w-bezel:        #1a1e28;   /* matches the FJ mockup frame bezel */
  --w-bezel-radius: 34px;      /* the ONE exception to the 2px rule — this is
                                  a picture of hardware, not a UI surface */

  /* ---- journal-home (page-turn book) ------------------------------------ */
  --w-header-h:          60px;    /* header height; book sits beneath */
  --w-turn-perspective:  2400px;  /* perspective of the spread */
  --w-curl:              12deg;   /* extra bend of the outer leaf segments at mid-turn */
  --w-print-tilt:        -1.5deg; /* resting tilt of a print (small print +2.5deg) */
  --w-print-shadow:      0 1px 2px rgba(43,42,37,.18), 0 8px 18px -8px rgba(43,42,37,.3);
  --w-page-pad:          clamp(24px, 3.2vw, 52px); /* page inner margin */
  --w-desk:              #CFC3AD; /* linen desk base colour */
  --w-verso:             #EBE2CE; /* leaf back paper (equals --fj-paper-2) */
  --w-book-shadow:       drop-shadow(0 18px 28px rgba(43,42,37,.28));
  --w-shade:             rgba(43,42,37,.34); /* peak ink shade on a turning leaf */
  --w-print-border:      #FBF8F1; /* print mat border */
  --w-window-verso:      #EFE7D5; /* curl-window verso ground */
}

/* Light paper only, in both OS themes. There is no FJ dark palette for the
   app, so a dark web variant would mean inventing brand colour. Committed
   the way an outdoor brand commits to one look. */
:root { color-scheme: light; }

/* ---------------------------------------------------------------------------
   Shared primitives every direction may use. Kept deliberately thin — each
   direction owns its own layout.
   ------------------------------------------------------------------------ */

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

html, body { margin: 0; padding: 0; }

body {
  background: var(--fj-paper);
  color: var(--fj-ink);
  font: 400 var(--w-t-body)/1.6 var(--fj-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.w-wrap      { max-width: var(--w-max);      margin-inline: auto; padding-inline: var(--w-gutter); }
.w-wrap-text { max-width: var(--w-max-text); margin-inline: auto; padding-inline: var(--w-gutter); }

/* Mono kicker — the FJ label voice. Uppercase, widely tracked, never a heading. */
.w-kicker {
  font: 400 var(--w-t-kicker)/1 var(--fj-mono);
  text-transform: uppercase;
  letter-spacing: var(--fj-track-kicker);
  color: var(--fj-ink-3);
}
.w-kicker--active { color: var(--fj-forest); }

/* Serif display styles */
.w-hero     { font: 500 var(--w-t-hero)/1.02     var(--fj-serif); letter-spacing: -.035em; margin: 0; }
.w-display  { font: 500 var(--w-t-display)/1.08  var(--fj-serif); letter-spacing: -.025em; margin: 0; }
.w-title    { font: 500 var(--w-t-title)/1.15    var(--fj-serif); letter-spacing: -.015em; margin: 0; }
.w-subtitle { font: 500 var(--w-t-subtitle)/1.2  var(--fj-serif); letter-spacing: -.01em;  margin: 0; }

.w-lede { font-size: var(--w-t-lede); line-height: 1.45; color: var(--fj-ink-2); max-width: var(--w-measure); }
.w-meta { font-size: var(--w-t-meta); color: var(--fj-ink-3); }

hr, .w-rule { border: 0; border-top: var(--fj-rule-solid); margin: 0; }

/* Buttons — sharp, 2px. Primary is ink; oxblood is reserved for emphasis. */
.w-btn {
  display: inline-flex; align-items: center; gap: var(--w-space-sm);
  padding: 13px 22px;
  border: 1px solid var(--fj-ink);
  border-radius: var(--fj-radius);
  background: var(--fj-ink);
  color: var(--fj-paper);
  font: 500 var(--w-t-body)/1 var(--fj-body);
  text-decoration: none;
  cursor: pointer;
}
.w-btn--ghost { background: transparent; color: var(--fj-ink); border-color: var(--fj-rule); }

/* Focus — visible, never removed. */
:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--fj-forest);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}