/* core.css — kernel styles for the platform shell.
   ---------------------------------------------------------------------------------------
   The Organic / bamboo-green design system, same tokens and same component vocabulary as
   the onboarding funnel (`onboarding_app/static/organic.css`) and the design-system source
   (`design-system.html`). It is a deliberate SECOND COPY of the token block, not an import:
   `/static-onb/` is onboarding's namespace, and making the platform's stylesheet depend on
   it would couple two packages that are meant to be separable by an env var. The co-edit
   rule in the root AGENTS.md is what keeps the two copies honest.

   Money-path controls (checkout, download) use the warm orange CTA from `form.html`, the
   same one both waitlist modals use — green is navigation, orange is the thing you came to
   do.

   This file must NOT grow per-module rules: a module's styles live in its own
   `client/index.css` wrapped in `@layer modules`, or they don't ship. */

@layer core {
  :root {
    /* brand ramp (constant across themes) */
    --brand-900: #1f3311;
    --brand-700: #3f6b23;
    --brand-600: #5a8a3a;   /* primary */
    --brand-500: #6b9e46;
    --brand-400: #8bb36a;
    --brand-200: #c4d9ad;

    /* priority signal colors */
    --sig-red: #d9534f;
    --sig-amber: #e0a53a;
    --sig-orange: #dd8036;
    --sig-green: #5a8a3a;

    /* semantic — light theme defaults */
    --bg: #f5f9f0;
    --bg-2: #ecf3e2;
    --surface: #ffffff;
    --surface-2: #f3f8ec;
    --ink: #23361a;
    --ink-soft: #4c5d3e;
    --line: rgba(90, 138, 58, 0.18);
    --line-soft: rgba(90, 138, 58, 0.10);
    --tint: rgba(90, 138, 58, 0.08);
    --tint-2: rgba(90, 138, 58, 0.14);
    --shadow: 0 12px 40px rgba(63, 107, 35, 0.10);
    --shadow-lg: 0 24px 64px rgba(63, 107, 35, 0.16);
    --on-brand: #ffffff;

    /* organic radii scale */
    --r-blob-1: 30px 60px 30px 60px;
    --r-blob-2: 60px 30px 60px 30px;
    --r-blob-3: 40px 60px 40px 60px;
    --r-pill: 50px;
    --r-sm: 18px;
    --r-md: 28px;

    /* type-scale factors — 1 on mobile, raised for desktop below */
    --fs-scale-title: 1;
    --fs-scale-body: 1;
    --fs-scale-ui: 1;
  }

  html[data-theme="dark"] {
    --bg: #131a0e;
    --bg-2: #1a2313;
    --surface: #1e2916;
    --surface-2: #26331b;
    --ink: #e8f0dd;
    --ink-soft: #a9bd94;
    --line: rgba(139, 179, 106, 0.22);
    --line-soft: rgba(139, 179, 106, 0.12);
    --tint: rgba(139, 179, 106, 0.10);
    --tint-2: rgba(139, 179, 106, 0.18);
    --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
    --brand-600: #7fb04e;
    --on-brand: #12200a;
  }

  /* The same three-tier desktop bump the funnel runs, so a user crossing from
     /onboarding to /#/m/purchase sees one type system, not two. */
  @media (min-width: 761px) {
    :root { --fs-scale-title: 1.16; --fs-scale-body: 1.27; --fs-scale-ui: 1.15; }
  }

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

  body {
    margin: 0;
    font-family: 'Nunito', system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    transition: background .4s ease, color .4s ease;
  }

  h1, h2, h3, h4 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 0 0 12px;
  }
  h1 { font-size: calc(30px * var(--fs-scale-title)); }
  h2 { font-size: calc(24px * var(--fs-scale-title)); }
  h3 { font-size: calc(19px * var(--fs-scale-title)); }
  h4 { font-size: calc(16px * var(--fs-scale-title)); }
  p { font-size: calc(15px * var(--fs-scale-body)); margin: 0 0 12px; }
  p:last-child { margin-bottom: 0; }
  a { color: var(--brand-600); }

  /* ---------- organic background blobs ---------- */
  .organic-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
  .blob { position: absolute; opacity: .12; animation: sway 9s ease-in-out infinite; }
  .blob:nth-child(2) { animation-delay: -3s; }
  .blob:nth-child(3) { animation-delay: -6s; }
  @keyframes sway {
    0%, 100% { transform: rotate(-6deg) scale(1); }
    50%      { transform: rotate(6deg) scale(1.06); }
  }
  @media (prefers-reduced-motion: reduce) {
    .blob, .brand-mark { animation: none; }
  }

  .wrap {
    position: relative; z-index: 1;
    max-width: 860px; margin: 0 auto;
    padding: 28px 24px 80px;
    overflow-x: hidden;
  }
}

@layer components {

  /* ============================== header ============================== */
  .topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 30px;
  }
  .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
  .brand-mark {
    width: 62px; height: 55px; flex-shrink: 0;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: linear-gradient(135deg, var(--brand-400), var(--brand-200));
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    animation: breathe 4s ease-in-out infinite;
  }
  .brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
  @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
  .brand h1 { font-size: calc(21px * var(--fs-scale-ui)); margin: 0; }
  .brand span {
    display: block; font-size: calc(12px * var(--fs-scale-ui));
    font-weight: 700; color: var(--ink-soft); letter-spacing: .04em;
  }

  .theme-toggle {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 8px 8px 16px; border-radius: var(--r-pill);
    background: var(--surface); border: 1px solid var(--line);
  }
  .theme-toggle span { font-size: calc(13px * var(--fs-scale-ui)); font-weight: 700; color: var(--ink-soft); }
  .switch {
    width: 52px; height: 30px; border-radius: 30px; border: none; cursor: pointer;
    background: var(--brand-200); position: relative; transition: background .3s ease;
  }
  html[data-theme="dark"] .switch { background: var(--brand-700); }
  .switch::after {
    content: '☀'; position: absolute; top: 3px; left: 3px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--surface); display: grid; place-items: center;
    font-size: calc(13px * var(--fs-scale-ui));
    transition: transform .3s cubic-bezier(.4, 1.4, .5, 1);
  }
  html[data-theme="dark"] .switch::after { content: '☾'; transform: translateX(22px); }

  /* ============================== surfaces ============================== */
  .card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-blob-1);
    box-shadow: var(--shadow);
    padding: 32px;
    margin-bottom: 20px;
  }
  .card.alt { border-radius: var(--r-blob-2); }
  .card::before {
    content: ''; position: absolute; top: -40%; right: -30%;
    width: 70%; height: 90%; pointer-events: none;
    background: radial-gradient(ellipse at center, var(--tint) 0%, transparent 70%);
  }
  .card > * { position: relative; }

  /* The tinted band at the top of a card: the news, before the thing to do.
     Ported from form.html's `.load-band`. */
  .band {
    margin: -32px -32px 24px;
    padding: 26px 32px 22px;
    border-radius: var(--r-blob-1) var(--r-blob-1) 0 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .band.warm {
    background: linear-gradient(160deg, rgba(251, 236, 214, .95), rgba(255, 247, 235, .55));
    border-bottom-color: rgba(224, 138, 43, .22);
  }
  html[data-theme="dark"] .band.warm {
    background: linear-gradient(160deg, rgba(221, 128, 54, .22), transparent 85%);
  }
  .band h2, .band h3 { margin-bottom: 6px; }
  .band p:last-child { margin-bottom: 0; }

  .kicker {
    font-size: calc(11px * var(--fs-scale-ui)); font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--brand-600); margin-bottom: 8px;
  }

  .lead { max-width: 62ch; margin-bottom: 26px; }
  .lead p { color: var(--ink-soft); font-size: calc(16px * var(--fs-scale-body)); }

  .grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
  .stack > * + * { margin-top: 14px; }

  /* ============================== type helpers ============================== */
  .muted { color: var(--ink-soft); }
  .small { font-size: calc(13px * var(--fs-scale-ui)); }
  .micro { font-size: calc(11.5px * var(--fs-scale-ui)); color: var(--ink-soft); }
  .price { font-weight: 900; color: var(--brand-700); }
  html[data-theme="dark"] .price { color: var(--brand-400); }
  code {
    font-size: calc(12px * var(--fs-scale-ui));
    background: var(--tint); border-radius: 6px; padding: 2px 6px;
    word-break: break-all;
  }

  /* ============================== buttons ============================== */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 30px; font: inherit;
    font-size: calc(15px * var(--fs-scale-ui)); font-weight: 800;
    border: none; border-radius: var(--r-blob-1); cursor: pointer;
    text-decoration: none; text-align: center;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  }
  .btn-primary {
    color: var(--on-brand);
    background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
    box-shadow: 0 10px 26px rgba(90, 138, 58, .30);
  }
  .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(90, 138, 58, .42); }
  /* The money control. Warm, and used ONLY where the user is buying or collecting what
     they bought — the same orange as both waitlist modals' primary CTA. */
  .btn-buy {
    color: #fff;
    background: linear-gradient(135deg, var(--sig-orange), var(--sig-amber));
    box-shadow: 0 10px 26px rgba(221, 128, 54, .30);
  }
  .btn-buy:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(221, 128, 54, .42); }
  .btn-ghost { color: var(--brand-600); background: var(--tint); }
  .btn-ghost:hover { background: var(--tint-2); transform: translateY(-2px); }
  .btn-outline { color: var(--ink); background: transparent; border: 2px solid var(--line); }
  .btn-outline:hover { border-color: var(--brand-600); color: var(--brand-600); }
  .btn-sm { padding: 10px 20px; font-size: calc(13px * var(--fs-scale-ui)); border-radius: 16px 26px 16px 26px; margin-bottom: 10px;}
  .btn-block { display: flex; width: 100%; }
  /* A disabled control must stop reading as live — including on hover, where a dead button
     that still rises to meet the cursor is what makes it look clickable. */
  .btn:disabled {
    cursor: default; opacity: .55; filter: saturate(.55);
    box-shadow: none; transform: none;
  }
  .btn:disabled:hover { transform: none; box-shadow: none; }

  .link-quiet {
    font: inherit; font-size: calc(13px * var(--fs-scale-ui)); font-weight: 800;
    color: var(--ink-soft); background: none; border: none; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px; padding: 8px 0;
  }
  .link-quiet:hover { color: var(--ink); }

  /* The download page's send/change pair. `.btn-sm` carries a bottom margin for stacked use,
     which would sit the two controls on different baselines side by side — hence the reset.
     The row sits BELOW the email field it submits, so "Change email" reveals the field above
     the Send button and the eye never has to travel back up to find the control. The field
     supplies the gap once shown; the row only pays for it while the field is still hidden. */
  .dl-mail-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .dl-mail-actions .btn-sm { margin-bottom: 0; }
  #dl-mail-field[hidden] + .dl-mail-actions { margin-top: 18px; }

  /* ============================== tags ============================== */
  .tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 13px; font-size: calc(11.5px * var(--fs-scale-ui)); font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    background: var(--tint-2); color: var(--brand-700); border-radius: var(--r-pill);
  }
  html[data-theme="dark"] .tag { color: var(--brand-400); }
  .tag.amber { background: rgba(224, 165, 58, .18); color: #8a5a12; }
  html[data-theme="dark"] .tag.amber { color: var(--sig-amber); }
  .tag.red { background: rgba(217, 83, 79, .15); color: var(--sig-red); }

  /* ============================== forms ============================== */
  .field { display: block; margin-bottom: 16px; }
  .field > span, .field > label {
    display: block; font-size: calc(12.5px * var(--fs-scale-ui));
    font-weight: 800; color: var(--ink-soft); margin-bottom: 6px;
  }
  .input, input[type="email"], input[type="text"], input[type="password"], select, textarea {
    width: 100%; font: inherit; font-size: calc(15px * var(--fs-scale-body)); font-weight: 600;
    color: var(--ink); background: var(--surface-2);
    border: 2px solid var(--line); border-radius: var(--r-md);
    padding: 13px 18px;
    transition: border-color .25s ease, box-shadow .25s ease;
  }
  textarea { min-height: 110px; resize: vertical; border-radius: var(--r-blob-3); }
  .input:focus, input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand-600);
    box-shadow: 0 0 0 4px var(--tint);
  }
  input::placeholder, textarea::placeholder { color: var(--ink-soft); opacity: .7; font-weight: 600; }

  /* ============================== feedback ============================== */
  .notice {
    border-radius: var(--r-sm); padding: 13px 16px; margin: 0 0 14px;
    font-size: calc(14px * var(--fs-scale-body)); font-weight: 600;
    border: 1px solid var(--line); background: var(--tint);
  }
  .notice.bad { border-color: rgba(217, 83, 79, .40); background: rgba(217, 83, 79, .10); }
  .notice.good { border-color: rgba(90, 138, 58, .45); background: rgba(90, 138, 58, .12); }
  .notice.warn { border-color: rgba(224, 165, 58, .45); background: rgba(224, 165, 58, .12); }

  .spinner {
    width: 18px; height: 18px; border-radius: 50%; display: inline-block;
    vertical-align: -3px;
    border: 2px solid var(--line); border-top-color: var(--brand-600);
    animation: spin .8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .done-icon {
    width: 54px; height: 54px; border-radius: 18px;
    background: var(--tint-2); color: var(--brand-700);
    display: grid; place-items: center; font-size: 25px; margin-bottom: 16px;
  }
  html[data-theme="dark"] .done-icon { color: var(--brand-400); }

  /* ============================== module cards (home) ============================== */
  .mod-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-blob-2); padding: 24px;
    box-shadow: var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .mod-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .mod-card h3 { margin: 0; }
  .mod-card p { color: var(--ink-soft); font-size: calc(14px * var(--fs-scale-body)); }
  .mod-card .btn { margin-top: auto; }

  .empty {
    border: 2px dashed var(--line); border-radius: var(--r-blob-3);
    padding: 28px; text-align: center; color: var(--ink-soft);
  }

  @media (max-width: 620px) {
    .wrap { padding: 20px 16px 64px; }
    .card { padding: 24px 20px; border-radius: var(--r-md); }
    .band { margin: -24px -20px 20px; padding: 22px 20px 18px; border-radius: var(--r-md) var(--r-md) 0 0; }
    .btn { width: 100%; }
    .row .btn { width: auto; }
  }
}