/* ==========================================================================
   Design tokens
   Values mirror the system used on jobyaviation.com (read from its :root),
   re-pointed at this site's content. 1rem = 10px so the px-based type scale
   maps 1:1 onto rem values.
   ========================================================================== */

:root {
  /* --- Color ------------------------------------------------------------ */
  --color-white: #f5f4df;        /* cream, not #fff — the whole site sits on this */
  --color-black: #0e1620;        /* blue-black */
  --color-accent: #007ae5;
  --trace-ink: #002c6d;
  --color-dark-blue: #1c3f99;
  --color-dark-blue-ui: #083e6f;
  --color-orange: #eb6110;
  --color-grey: #c7c6b6;
  --color-light-blue: #7cc3ff;

  --bg: var(--color-white);
  --fg: var(--color-black);
  --accent: var(--color-accent);

  /* --- Layout ----------------------------------------------------------- */
  --base-font-size: 10px;
  --design-width: 1600;
  --base-padding: 4rem;
  --grid-columns: 16;
  --grid-columns-mobile: 6;
  --gutter-width: 1.6rem;
  --gutter-width-mobile: 0.8rem;
  --grid-column-width: calc(
    (100vw - (2 * var(--base-padding)) - (var(--grid-columns) - 1) * var(--gutter-width))
    / var(--grid-columns)
  );

  --nav-height: 8rem;

  /* --- Easing ----------------------------------------------------------- */
  --ease-snappy: cubic-bezier(.2, .21, 0, 1);          /* signature curve */
  --ease-out-curve-cubic: cubic-bezier(.35, .2, 0, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-in-out-quart: cubic-bezier(.76, 0, .24, 1);
  --ease-power4-out: cubic-bezier(.165, .84, .44, 1);

  /* --- Motion ----------------------------------------------------------- */
  /* 83ms == 5 frames at 60fps; every stagger on the site is this number. */
  --title-stagger: 83ms;
  --title-duration: .667s;
  --title-from-y: 1.9rem;

  --text-stagger: 83ms;
  --text-duration: .5s;
  --text-from-y: 1.4rem;

  --line-duration: .833s;
  --line-delay: 83ms;
  --stack-delay: .333s;
  --round-duration: .5s;

  --link-transition: transform .3s var(--ease-power4-out);

  /* --- Radii ------------------------------------------------------------ */
  --radius-media: 2.4rem;
  --radius-card: 1.6rem;
  --radius-pill: 100rem;

  /* --- Type ------------------------------------------------------------- */
  --font-display: "General Sans", "Satoshi", system-ui, -apple-system, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- Derived surfaces ---------------------------------------------------
     Hairlines and sunk panels on the case-study pages. Mixed from --fg rather
     than given literal values so they follow the theme and the .is-dark
     inversion on their own — custom properties substitute at point of use, so
     these re-resolve wherever --fg has been redefined. */
  --rule: color-mix(in srgb, var(--fg) 14%, transparent);
  --sunk: color-mix(in srgb, var(--fg) 4%, transparent);

  /* Cap-height leading trim (Capsize technique). Metrics below are Inter's;
     they let headline boxes hug the glyphs so vertical rhythm stays exact. */
  --lt-ascender: 1984;
  --lt-descender: -494;
  --lt-cap-height: 1490;
  --lt-units-per-em: 2048;

  /* How far a descender falls below its line box at line-height 1, i.e. how
     far the .line mask in base.css has to reach to avoid shearing a g.

     Measured, per font, as (1 - content-area) / 2 + ascent + ink-descent - 1:
       General Sans  .088em   <- the real face, when Fontshare resolves
       Inter         .081em
       system-ui     .061em   <- the fallback when it does not
     Set above the worst case because which font renders is not guaranteed:
     the display face comes from a third-party CDN, and the fallback has
     shallower descenders, so a value tuned to one shears the other. */
  --line-descender-pad: 0.12em;

  /* Depth of the deepest glyph below the baseline, in the units above.
     General Sans measures .203em of ink for g/j/p/q/y; 425 / 2048 = .2075em
     keeps a little margin over that. The bottom trim stops here instead of
     at the baseline, so a descender never lands in whatever follows. */
  --lt-descender-ink: 425;
}

@media (max-width: 900px) {
  :root {
    --base-padding: 1.6rem;
    --grid-columns: var(--grid-columns-mobile);
    --gutter-width: var(--gutter-width-mobile);
    --nav-height: 6rem;
  }
}

/* ==========================================================================
   Themes

   Every scheme is three values: a light ground, an ink, and an accent. The
   whole site derives from those, so a theme is a three-line override and
   nothing downstream needs to know a theme exists.

   The grounds are all slightly off-white and the inks all slightly off-black,
   tinted toward their accent — pure #fff/#000 reads as unfinished next to a
   saturated accent, and the shared tint is what makes each set cohere.
   ========================================================================== */

/* --- Trace ink -----------------------------------------------------------
   Hero trace lines: a deep, saturated shade of each theme's OWN hue, so the
   drawings belong to the palette rather than sitting on top of it.

     electric  #002c6d navy      contrast 3.11
     ember     #700000 oxblood   contrast 3.01
     moss      #002d06 forest    contrast 3.05
     dusk      #000067 indigo    contrast 2.70

   Chosen over three alternatives that were built and rejected:

   - near-black (#060a0e etc, contrast 3.07-4.80). Scores highest, but four
     near-blacks are not four colours and at hairline weight they read as a
     flat shadow on every theme.
   - complements at L*86 (yellow / cyan / pink / lime). Maximum pop, but the
     register is neon and it fights the restraint of the rest of the site.
   - the accents swapped outright (#d94f1e on blue, #007ae5 on orange). Both
     score 1.04: those two accents share a luminance, so the pairing has hue
     opposition and no lightness separation, which reads soft-edged and
     vanishes entirely under red-green colour blindness.

   This set trades about a point of contrast against near-black for colours
   that are actually colours. Dusk is the floor at 2.70 — its violet is the
   darkest accent, so no coloured line reaches 3.0 on it; its trace borrows the
   adjacent blue rather than staying violet, which is what buys the contrast it
   does have.
   -------------------------------------------------------------------------- */

/* Electric — the default. Cool, optimistic, technical. */
[data-theme="electric"] {
  --color-white: #f5f4df;
  --color-black: #0e1620;
  --color-accent: #007ae5;
  --trace-ink: #002c6d;
}

/* Ember — warm and urgent. Reads as workshop, heat, things being made. */
[data-theme="ember"] {
  --color-white: #f7f1e6;
  --color-black: #1d1512;
  --color-accent: #d94f1e;
  --trace-ink: #700000;
}

/* Moss — quiet and grounded. The calmest of the four. */
[data-theme="moss"] {
  --color-white: #eff1e6;
  --color-black: #111d17;
  --color-accent: #2f7d5b;
  --trace-ink: #002d06;
}

/* Dusk — deep and contemplative, the most saturated ground. */
[data-theme="dusk"] {
  --color-white: #ecebf2;
  --color-black: #15121f;
  --color-accent: #5546d6;
  --trace-ink: #000067;
}

/* Dark sections invert the two base colors rather than introducing new ones. */
.is-dark {
  --bg: var(--color-black);
  --fg: var(--color-white);
}

.is-accent {
  --bg: var(--color-accent);
  --fg: var(--color-white);
}