/* VENDITORY PALETTE, 2026-09-27.
 * site.css is copied BYTE FOR BYTE: the layout is proven and is not re-derived.
 * Only the color tokens move, and each one keeps its ROLE so contrast holds:
 *   the farm greens become a cool navy, the sage neutrals become slate,
 *   and the lime accent #d3fa99 becomes amber #ffb648, because amber reads as
 *   commerce and lime reads as botany.
 * 10 color values were replaced. */

/* ============================================================================
   VENDITORY - design tokens, in the Seed system
   ----------------------------------------------------------------------------
   Chris chose seed.com as the style on 2026-08-12: "i really like this style
   can you basically use the same style from this site as much as possible".

   Every value below was MEASURED off seed.com/ds-01 with getComputedStyle on
   2026-08-12, not eyeballed from a screenshot. That is why the light 350 weight
   and the negative tracking are here: they are the two things that actually
   make the Seed look, and both are invisible in a screenshot.

   THREE LAYERS, per .claude/rules/how-we-design.md. Never put a raw hex in a
   component rule. Change a PRIMITIVE to reskin the whole site, which is exactly
   what Chris means by "i can edit the design and pallet myself".
   ========================================================================== */

:root {
  /* ---- LAYER 1: PRIMITIVES (measured from seed.com) --------------------- */
  --green-900:  #10182b;   /* seed green: body text AND primary surface     */
  --green-700:  #1c2c4d;
  --green-500:  #6b7689;   /* faded green 60                                */
  --green-300:  #9aa3b2;   /* faded green 40                                */
  --green-100:  #d0d4db;   /* faded green 20                                */
  --lime-400:   #ffb648;   /* guidance bright green: THE accent             */
  --lime-100:   #e8ecf3;   /* lemongrass                                    */
  --white-000:  #fbfcfe;   /* snow white: the page                          */
  --white-100:  #f5f6fa;   /* yellowish white                               */
  --white-200:  #eef0f5;   /* foam white                                    */
  --grey-100:   #f9f9f9;
  --grey-200:   #efefef;
  --grey-300:   #e6e6e6;

  /* ---- LAYER 2: SEMANTIC (what it DOES on the page) -------------------- */
  --bg:            var(--white-000);
  --bg-alt:        var(--white-200);
  --bg-invert:     var(--green-900);
  --ink:           var(--green-900);
  /* ⛔ MEASURED 2026-10-03: the old value, #6b7689, is 4.43 to 1 on this page's background and
     the readable floor is 4.5. It is used 136 times across the site and has been under the line
     since the site was built. #4a5568 is 7.3 to 1. His words: "make the white words a different
     color that is way darker". */
  --ink-muted:     #4a5568;
  --ink-invert:    var(--white-000);
  --accent:        var(--lime-400);
  --accent-soft:   var(--lime-100);
  --line:          var(--green-100);
  --line-soft:     var(--grey-200);

  /* ⛔ THREE TOKENS THAT KEEP THEIR ROLE IN BOTH THEMES, because three rules were using `--ink`,
     the TEXT color, as a BACKGROUND. That is correct for exactly as long as there is one theme:
     dark mode made `--ink` light, the hero band turned pale, and its hardcoded white lede became
     white text on a white band at 1.17 to 1. A token has to mean what it is used for. */
  --panel:         #10182b;   /* the dark band. Dark in BOTH themes, on purpose          */
  --on-panel:      #f3f6fb;   /* text on it, so site.css's white overlays stay correct   */
  --on-accent:     #10182b;   /* text on the amber. Never light: 1.4 to 1 is unreadable  */
  /* ⛔ THE AMBER IS A SURFACE COLOR AND CANNOT BE READ AS TEXT ON WHITE: 1.9 to 1,
     measured, on every eyebrow label on the site. This is the same hue at 4.6 to 1, used
     ONLY where the accent is text. The amber itself is unchanged. */
  --accent-text:   #8a5200;
  --font-display:  "Sora", "Inter", -apple-system, "Segoe UI", Helvetica, sans-serif;  /* his option 4, 2026-10-13 */
  --w-display:     600;    /* Sora reads at 600 for h1, 500 below (style/font_options.mjs) */
  --font-ui:       "Inter", -apple-system, "Segoe UI", Helvetica, sans-serif;

  /* ---- Shape. Seed uses exactly two radii and NO shadow anywhere. ------- */
  --radius:        16px;   /* cards, inputs, images                         */
  --radius-pill:   32px;   /* buttons, chips, large panels                  */
  --shadow:        none;   /* deliberate. Measured: box-shadow none, always. */

  /* ---- Type scale. The light weight is the whole look. ----------------- */
  --w-light:       350;    /* Seed's h1/h2 weight. Not a typo.              */
  --w-normal:      400;
  --w-medium:      500;
  --track-tight:  -0.02em; /* -0.64px at 32px                               */
  --track-tighter:-0.03em; /* -0.96px at 48px                               */

  --step-hero:  clamp(2.75rem, 6vw, 4.5rem);
  --step-h2:    clamp(2rem, 3.6vw, 3rem);     /* 48px                       */
  --step-h3:    clamp(1.35rem, 2vw, 1.75rem);
  --step-body:  1rem;
  /* THE TITLE RULE (his 2026-10-13: "all titles should be much larger than the other text in the
     element they are in"). A box title is at least 1.25x the largest body text in its box;
     style/check_look.mjs fails a box under that. */
  --step-title: clamp(1.3rem, 1.05rem + 0.8vw, 1.7rem);
  --step-title-xl: clamp(1.55rem, 1.2rem + 1.1vw, 2.1rem);
  --step-small: 0.8125rem;

  /* ---- Space ----------------------------------------------------------- */
  --box-pad: clamp(16px, 1.4vw, 22px);   /* the inner padding of every box, never under 16px */
  --gap-xs: 8px;  --gap-s: 16px;  --gap-m: 24px;
  --gap-l:  48px; --gap-xl: 80px; --gap-xxl: 128px;
  --measure: 68ch;
  --shell:   1240px;
}

/* ============================ RESET + BASE ============================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-body);
  font-weight: var(--w-normal);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-hero); font-weight: var(--w-display); letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: var(--step-h2);   letter-spacing: var(--track-tighter); line-height: 1.08; }
h3 { font-size: var(--step-h3);   letter-spacing: var(--track-tight);   line-height: 1.2;  }
p  { margin: 0; }

.shell   { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gap-m); }
/* ⭐ 2026-10-13, his "there is a ton of blank space still". A section carried 128px above AND
   below, so two sections sat 256px apart and a phone showed a screen of nothing between them.
   Now 40 to 72px depending on width, and a tight section half that. */
.section { padding-block: clamp(40px, 5.5vw, 72px); }
.section--tight { padding-block: clamp(20px, 3vw, 36px); }
.section + .section { padding-top: clamp(16px, 2.5vw, 32px); }

/* Small caps label. Seed uses this above almost every section. */
.eyebrow {
  font-size: var(--step-small); font-weight: var(--w-medium);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text);
  margin-bottom: var(--gap-s);
}
.lede { font-size: 1.125rem; color: var(--ink-muted); max-width: 56ch; line-height: 1.55; }

/* ============================== BUTTONS ================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-xs);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 14px 30px; font: inherit; font-weight: var(--w-medium);
  text-decoration: none; cursor: pointer;
  position: relative; overflow: hidden;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
/* The inline shine sweep, per seed-design-reference.md's "Button Hover
   Effect": a soft light band sweeps left-to-right on hover. One rule for
   every variant; --ghost gets a darker tint because its background is
   transparent and a light sweep would not read against the page. */
.btn::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-15deg); transition: left .5s ease; pointer-events: none;
}
.btn--ghost::after { background: linear-gradient(115deg, transparent, rgba(0,0,0,.05), transparent); }
.btn:hover::after { left: 130%; }
@media (prefers-reduced-motion: reduce) { .btn::after { display: none; } }
.btn--primary { background: var(--panel); color: var(--on-panel); }
.btn--primary:hover { background: var(--green-700); }
.btn--accent  { background: var(--accent); color: var(--on-accent); }
.btn--accent:hover { background: var(--lime-100); }
.btn--ghost   { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--block   { width: 100%; }

/* =============================== CHIPS ================================== */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 8px 16px; font-size: var(--step-small); text-decoration: none;
  background: transparent; color: var(--ink); cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--panel); color: var(--on-panel); border-color: var(--panel); }
.chip .n { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .n { color: var(--green-300); }

/* =============================== CARDS ================================== */
.card { border-radius: var(--radius); background: transparent; box-shadow: var(--shadow); }
.card__media { border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); aspect-ratio: 4/3; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.4,0,.2,1); }
/* Hover lift + image zoom, per seed-design-reference.md's "Cards" section.
   The zoom triggers off :hover on the CARD, not the image, so it still fires
   when the pointer is over the caption text below the photo. The lift is on
   the link itself (a.card), never on the "coming soon" tincture card, which
   is an <article>, not a link, and has nothing to lift toward. */
.card:hover .card__media img { transform: scale(1.06); }
a.card { transition: transform .22s cubic-bezier(.4,0,.2,1); }
a.card:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .card__media img, a.card { transition: none; }
}
.tag {
  display: inline-block; border-radius: var(--radius-pill); padding: 5px 12px;
  font-size: 0.75rem; font-weight: var(--w-medium); background: var(--accent-soft); color: var(--ink);
}
.tag--solid { background: var(--accent); }
.code {
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); font-variant-numeric: tabular-nums;
}

/* =============================== GRID =================================== */
.grid { display: grid; gap: var(--gap-m); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* Panels: the big rounded blocks Seed builds whole sections out of. */
.panel { border-radius: var(--radius-pill); padding: var(--gap-l); background: var(--bg-alt); }
.panel--invert { background: var(--panel); color: var(--on-panel); }
.panel--invert .eyebrow, .panel--invert .lede { color: var(--on-panel); opacity: .86; }
.panel--accent { background: var(--accent); color: var(--on-accent); }
@media (max-width: 640px) { .panel { padding: var(--gap-m); border-radius: var(--radius); } }

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* chrome:dark */

/* ====== DARK ================================================================================
   Only LAYER 2 is redefined. Every rule in site.css already asks for --bg, --ink and --line
   rather than for a color, so the whole site turns over by changing these ten lines.

   Three states, which is what a theme switch actually has:
     an explicit choice      -> [data-theme="dark"] or [data-theme="light"] on <html>
     no choice made          -> follow the device, via prefers-color-scheme
   The media query is guarded with :not([data-theme="light"]) so that somebody who has chosen
   light on a device set to dark actually gets light.
   ========================================================================================== */
:root[data-theme="dark"] {
  --bg:          #0f1623;
  --bg-alt:      #161f30;
  --bg-invert:   #e8ecf3;
  --ink:         #e9edf4;
  --ink-muted:   #a7b1c4;
  --ink-invert:  #10182b;
  --accent:      #ffbe5c;
  --accent-soft: #23304a;
  --line:        #2a3650;
  --line-soft:   #202a3e;
  /* These three do NOT flip, and that is the point of them. The dark band stays dark and
     its text stays light in both themes, because site.css paints white overlays on it by
     hand. When they inverted with everything else the hero turned pale and its own lede
     became white on white at 1.17 to 1, which is what he reported seeing. */
  --panel:       #182135;
  --on-panel:    #f3f6fb;
  --on-accent:   #10182b;
  /* The accent AS TEXT flips: a dark amber reads on white and vanishes on a dark
     page, which is the fault the light-mode fix created here. */
  --accent-text: #ffbe5c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0f1623;
    --bg-alt:      #161f30;
    --bg-invert:   #e8ecf3;
    --ink:         #e9edf4;
    --ink-muted:   #a7b1c4;
    --ink-invert:  #10182b;
    --accent:      #ffbe5c;
    --accent-soft: #23304a;
    --line:        #2a3650;
    --line-soft:   #202a3e;
    /* These three do NOT flip, and that is the point of them. The dark band stays dark and
       its text stays light in both themes, because site.css paints white overlays on it by
       hand. When they inverted with everything else the hero turned pale and its own lede
       became white on white at 1.17 to 1, which is what he reported seeing. */
    --panel:       #182135;
    --on-panel:    #f3f6fb;
    --on-accent:   #10182b;
  /* The accent AS TEXT flips: a dark amber reads on white and vanishes on a dark
     page, which is the fault the light-mode fix created here. */
  --accent-text: #ffbe5c;
  }
}

/* /chrome:dark */

/* chrome:fx */
:root{
  --fx-home: #1b1e24, #a7adb6, #ffffff;
  --fx-command: #4b3fd1, #8b7cf6, #e4e0ff;
  --fx-outbound: #0f8a6a, #34c79a, #c8f5e2;
  --fx-store-front: #b45f00, #ffb648, #ffe6bf;
  --fx-studio: #1f5fbf, #17a9a0, #d2f3f0;
  --fx-site: #4f8fd6, #a8cff2, #ffffff;
}
:root[data-page="home"]{--tint:#1b1e24}
:root[data-page="command"]{--tint:#4b3fd1}
:root[data-page="outbound"]{--tint:#0f8a6a}
:root[data-page="store-front"]{--tint:#b45f00}
:root[data-page="studio"]{--tint:#1f5fbf}
:root[data-page="site"]{--tint:#4f8fd6}
:root[data-page="store-front"][data-theme="dark"]{--tint:#a8743f;--fx-store-front:#7a5230, #b5814c, #ecd0a6}
@media (prefers-color-scheme: dark){:root[data-page="store-front"]:not([data-theme="light"]){--tint:#a8743f;--fx-store-front:#7a5230, #b5814c, #ecd0a6}}

/* /chrome:fx */