/*
 * CarbonLeap Fields, for the marketing site, in the new Agronaut's register.
 *
 * The same design system as Agronaut (digital-agronomist/packages/design-system, v3) as the app's
 * new shell uses it (apps/web/src/next): a white ground, gray-200 hairlines, soft radii, a violet
 * accent for icons, links and asks, teal for "where you are", and no hard offsets on content. Values are copied from that package's dist/tokens.css under the same names, so a
 * token can be looked up there. The site has no build step, so there is no import; when the
 * package changes a value, change it here too.
 *
 * Served from the site root, not /assets: netlify.toml caches /assets/* as immutable for a year.
 */

:root {
  /* Neutrals */
  --color-ink-white: #ffffff;
  --color-ink-black: #000000;
  --color-cb-gray-25: #fcfcfd;
  --color-cb-gray-50: #f9fafb;
  --color-cb-gray-100: #f2f4f7;
  --color-cb-gray-200: #e4e7ec;
  --color-cb-gray-300: #d0d5dd;
  --color-cb-gray-500: #667085;
  --color-cb-gray-600: #475467;
  --color-cb-gray-700: #344054;
  --color-cb-gray-800: #182230;
  --color-cb-gray-900: #101828;
  --color-tab-label-idle: #717680;

  /* The action gradient */
  --color-gradient-start: #00ad84;
  --color-gradient-end: #357966;
  --color-teal-soft-ground: #edfcf2;
  --color-teal-soft-border: #3ccb7f;
  --color-teal-soft-ink: #2e7462;
  --color-ink-highlight: #ffffff1f;

  /* Violet accent: focus, selection; never a state */
  --color-brand-50: #f9f5ff;
  --color-brand-100: #f4ebff;
  --color-brand-200: #e9d7fe;
  --color-brand-600: #7f56d9;
  --color-brand-700: #6941c6;
  --color-violet-tint: #f4f3ff;
  --color-violet-border-hover: #d9d6fe;
  --color-brand-800: #53389e;

  /* Accent aliases, as the app's semantic tier names them */
  --color-accent-strong: var(--color-brand-700);
  --color-accent-strong-hover: var(--color-brand-800);
  --color-accent-soft: var(--color-brand-50);
  --color-accent-soft-strong: var(--color-brand-100);
  --color-accent-ink: var(--color-brand-700);
  --color-accent-border: var(--color-brand-200);

  /* Agricultural colour world (v3.2) */
  --color-field-50: #f0faf6;
  --color-field-100: #ddf3ea;
  --color-field-200: #b8e6d4;
  --color-field-300: #7fcfb5;
  --color-field-700: #17604f;
  --color-field-800: #114a41;
  --color-field-900: #0b3b34;
  --color-field-950: #06231f;
  --color-field-glow: #5ee0b5;
  --color-field-paper: #f7f6f1;
  --color-wheat-50: #fef8e7;
  --color-wheat-100: #fcefc4;
  --color-wheat-700: #8a5a06;
  --color-sky-100: #d6ecfa;
  --color-sky-700: #185e92;

  /* State */
  --color-error-50: #fef3f2;
  --color-error-700: #b42318;
  --color-warning-50: #fffaeb;
  --color-warning-700: #b54708;
  --color-success-50: #ecfdf3;
  --color-success-700: #067647;

  /* Elevation: drawn, not lifted */
  --shadow-custom-xs: 2px 2px 0 0 var(--color-ink-black);
  --shadow-custom-sm: 4px 4px 0 0 var(--color-ink-black);
  --shadow-custom-md: 6px 6px 0 0 var(--color-ink-black);
  --shadow-custom-lg: 8px 8px 0 0 var(--color-ink-black);
  --shadow-cb-offset-glow: 4px 4px 0 0 var(--color-gradient-start);
  --shadow-cb-offset-glow-lg: 6px 6px 0 0 var(--color-field-glow);
  --shadow-skeuomorphic: inset 0 0 0 1.2px #0a0d122e, inset 0 -2.4px 0 0 #0a0d120d, 0 1.2px 2.4px 0 #0a0d120d;
  --shadow-cb-focus-halo: 0 0 0 4px var(--color-brand-100);
  --shadow-soft-shadow: 0 2px 8px 0 #98a2b333;
  --shadow-cb-modal: 0 25px 50px -12px #00000040;

  /* Type */
  --font-karla: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Mona Sans", "Karla", system-ui, sans-serif;

  /* Radii: control 8, panel 12, modal 20 */
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
}

body {
  font-family: var(--font-karla);
}

/* ---------- Type ---------- */

.f-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-cb-gray-900);
  text-wrap: balance;
}
.f-eyebrow {
  font-family: var(--font-karla);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.f-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--color-cb-gray-600);
}
.f-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.f-icon-sm { width: 16px; height: 16px; }

/* ---------- Buttons ---------- */

.f-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-karla);
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radius-md);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}
.f-btn:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 2px;
}
.f-btn-lg {
  min-height: 48px;
  font-size: 16px;
  padding: 12px 22px;
}

/* Primary: the brand's teal gradient. */
.f-btn-primary {
  background-color: var(--color-gradient-start);
  background-image: linear-gradient(to left, var(--color-gradient-start), var(--color-gradient-end));
  color: var(--color-ink-white);
  box-shadow: inset 0 0 0 2px var(--color-ink-highlight), var(--shadow-skeuomorphic);
}
.f-btn-primary:hover {
  color: var(--color-ink-white);
  background-image: linear-gradient(to left, var(--color-gradient-end), var(--color-gradient-end));
}

/* Secondary: white on a hairline, gray-50 under the pointer. */
.f-btn-secondary {
  background: var(--color-ink-white);
  color: var(--color-cb-gray-900);
  box-shadow: inset 0 0 0 1px var(--color-cb-gray-200);
}
.f-btn-secondary:hover {
  color: var(--color-cb-gray-900);
  background: var(--color-cb-gray-50);
  box-shadow: inset 0 0 0 1px var(--color-cb-gray-300);
}

/* Ghost: the app's text actions (Open, Run Again, Share). */
.f-btn-ghost {
  background: transparent;
  color: var(--color-cb-gray-900);
  padding-inline: 12px;
}
.f-btn-ghost:hover {
  color: var(--color-cb-gray-900);
  background: var(--color-cb-gray-50);
}

/* Round icon buttons: the ask bar's mic and send. */
.f-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 999px;
}
.f-round-soft { background: var(--color-cb-gray-50); color: var(--color-cb-gray-700); }
.f-round-accent { background: var(--color-accent-strong); color: var(--color-ink-white); }

/* ---------- Surfaces ---------- */

/* A card: white on a gray-200 hairline; a soft shadow under the pointer, never an offset. */
.f-card {
  background: var(--color-ink-white);
  border: 1px solid var(--color-cb-gray-200);
  border-radius: var(--radius-xl);
}
.f-card-interactive {
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.f-card-interactive:hover {
  box-shadow: var(--shadow-soft-shadow);
}
.f-card-float {
  box-shadow: var(--shadow-cb-modal);
}

/* The ask bar. */
.f-ask {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 18px;
  background: var(--color-ink-white);
  border: 2px solid var(--color-cb-gray-200);
  border-radius: var(--radius-2xl);
}
.f-ask-text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 28px;
  color: var(--color-cb-gray-900);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Suggestion and figure tiles. */
.f-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--color-cb-gray-200);
  border-radius: 999px;
  background: var(--color-ink-white);
  font-size: 14px;
  color: var(--color-cb-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.f-figure {
  min-width: 0;
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  background: var(--color-cb-gray-50);
  box-shadow: inset 0 0 0 1px var(--color-cb-gray-200);
}
.f-figure b {
  display: block;
  font-size: 16px;
  color: var(--color-cb-gray-900);
  font-variant-numeric: tabular-nums;
}
.f-figure span {
  display: block;
  font-size: 11px;
  color: var(--color-cb-gray-600);
}

/* Persona avatar: a soft round with a stroked icon. */
.f-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--color-field-100);
  color: var(--color-field-700);
}

.f-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-karla);
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  white-space: nowrap;
}
.f-badge-neutral { background: var(--color-cb-gray-50); color: var(--color-cb-gray-600); box-shadow: inset 0 0 0 1px var(--color-cb-gray-200); }
.f-badge-accent { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.f-badge-error { background: var(--color-error-50); color: var(--color-error-700); }
.f-badge-warning { background: var(--color-warning-50); color: var(--color-warning-700); }
.f-badge-success { background: var(--color-success-50); color: var(--color-success-700); }
.f-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-gradient-start);
}

/* ---------- Header ---------- */

.f-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--color-ink-white) 95%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-cb-gray-200);
}
/* Nav items as the app's rail: plain text, and where you are boxed in teal with the gradient
   along its foot. */
.f-tab {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-family: var(--font-karla);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  flex: 0 0 auto;
  padding: 0 12px;
  border-radius: var(--radius-md);
  color: var(--color-cb-gray-900);
  background: transparent;
  transition: background-color 0.12s ease;
}
.f-tab:hover {
  color: var(--color-cb-gray-900);
  background: var(--color-cb-gray-50);
}
.f-tab[aria-current="page"] {
  font-weight: 700;
  color: var(--color-teal-soft-ink);
  background: var(--color-ink-white);
  box-shadow: inset 0 0 0 2px var(--color-gradient-start);
}
.f-tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(to left, var(--color-gradient-start), var(--color-gradient-end));
}
.f-tab-mobile {
  display: flex;
  min-height: 48px;
  font-size: 16px;
  padding: 0 14px;
}

/* ---------- Footer ---------- */

.f-footer {
  background: var(--color-ink-white);
  background-image: linear-gradient(180deg, transparent 40%, var(--color-accent-soft) 100%);
  border-top: 1px solid var(--color-cb-gray-200);
}
.f-footer a {
  color: var(--color-cb-gray-700);
  font-size: 15px;
}
.f-footer a:hover {
  color: var(--color-accent-ink);
}
.f-footer .f-eyebrow {
  color: var(--color-cb-gray-500);
}