/* Bottlenose brand tokens — source: docs/BRAND.md (Visual identity direction)
   Scope: marketing site (bottlenose.com), grader, emails (as static values), PDFs.
   Not for the embedded Shopify app: that uses Polaris tokens without exception. */

:root {
  /* ---- Color: neutrals ---- */
  --bn-night: #0C0A1E;      /* inverted sections (with grain), dark ground, one-color wordmark on light */
  --bn-foam:  #F6F6FB;      /* page background on light; theme-color meta */
  --bn-shell: #EAE9F3;      /* cards and secondary surfaces on Foam */
  --bn-ink:   #14122B;      /* body text on light */
  --bn-mist:  #6E6B8A;      /* secondary text, captions, gridlines, lost-prompt markers */
  --bn-line:  #D9D7E6;      /* 1px borders on light */
  --bn-line-on-night: rgba(246, 246, 251, 0.15);

  /* ---- Color: brand (from the logo) ---- */
  --bn-ultra:      #3300FF; /* primary button (one per screen), links + small labels on light (8.1:1 on Foam), one-color mark */
  --bn-ultra-hover: #2A00D6;
  --bn-violet:     #930BB8; /* secondary emphasis, tags, wordmark gradient top */
  --bn-magenta:    #E6157A; /* surfacing accent: recovered prompts, win state, revenue numbers >= 18px or bold; fills on light */
  --bn-periwinkle: #9C8CFF; /* blue for text/links/lines on Night (Ultra fails contrast there) */
  --bn-rose:       #FF4FA3; /* magenta's on-Night form for text and lines; revenue on Night */
  --bn-signal:     #E5484D; /* errors only, with an icon; never adjacent to Magenta or Rose */

  /* The Surface gradient: mark, color wordmark, and at most ONE hero element per page. Never text, icons, or backgrounds. */
  --bn-gradient-surface: linear-gradient(180deg, #3300FF 0%, #E6157A 100%);
  --bn-gradient-wordmark: linear-gradient(180deg, #930BB8 0%, #D71285 100%);
  --bn-gradient-night-depth: linear-gradient(90deg, #0C0A1E 0%, #12305E 100%); /* only allowed decorative gradient, behind hero UI on Night */

  /* ---- Semantic aliases (light context) ---- */
  --bn-bg: var(--bn-foam);
  --bn-bg-elevated: var(--bn-shell);
  --bn-fg: var(--bn-ink);
  --bn-fg-muted: var(--bn-mist);
  --bn-border: var(--bn-line);
  --bn-action: var(--bn-ultra);
  --bn-action-hover: var(--bn-ultra-hover);
  --bn-action-fg: #FFFFFF;
  --bn-link: var(--bn-ultra);
  --bn-accent: var(--bn-magenta);   /* wins + money */
  --bn-error: var(--bn-signal);

  /* ---- Type ---- */
  --bn-font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --bn-font-mono: "Geist Mono", "SFMono-Regular", Menlo, monospace;
  --bn-text-body: 15px;
  --bn-leading-body: 24px;
  --bn-weight-body: 400;
  --bn-weight-medium: 500;
  --bn-weight-heading: 600;         /* never heavier: the wordmark stays the heaviest thing on the page */
  --bn-tracking-heading: -0.02em;
  --bn-eyebrow-size: 12px;
  --bn-eyebrow-tracking: 0.12em;
  --bn-eyebrow-width: 85;           /* Instrument Sans wdth axis, condensed range */

  /* ---- Shape + space ---- */
  --bn-radius-card: 16px;
  --bn-radius-control: 10px;
  --bn-border-width: 1px;
  --bn-space-1: 4px;
  --bn-space-2: 8px;
  --bn-space-3: 12px;
  --bn-space-4: 16px;
  --bn-space-6: 24px;
  --bn-space-8: 32px;
  --bn-space-12: 48px;
  --bn-space-16: 64px;
  --bn-content-max: 1120px;

  /* ---- Motion: the surfacing reveal (only signature motion) ---- */
  --bn-motion-duration: 240ms;
  --bn-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bn-motion-rise: 10px;

  /* ---- Grain: Night sections only, 4-6% ---- */
  --bn-grain-opacity: 0.05;
}

/* Night context: swap semantic aliases; blue -> Periwinkle, magenta -> Rose */
.bn-night, [data-theme="night"] {
  --bn-bg: var(--bn-night);
  --bn-bg-elevated: #15132C;
  --bn-fg: var(--bn-foam);
  --bn-fg-muted: #A7A4C2;
  --bn-border: var(--bn-line-on-night);
  --bn-action: var(--bn-foam);      /* neutral inversion; Ultra button only on light */
  --bn-action-hover: #FFFFFF;
  --bn-action-fg: var(--bn-night);
  --bn-link: var(--bn-periwinkle);
  --bn-accent: var(--bn-rose);
  color: var(--bn-fg);
  background: var(--bn-bg);
}

/* ---- Fonts: self-hosted WOFF2 (see brand/README.md for where to get the files) ---- */
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Italic-Variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Base rules ---- */
html { background: var(--bn-foam); }
body {
  font-family: var(--bn-font-sans);
  font-size: var(--bn-text-body);
  line-height: var(--bn-leading-body);
  font-weight: var(--bn-weight-body);
  color: var(--bn-fg);
  background: var(--bn-bg);
  font-variant-numeric: tabular-nums; /* tnum everywhere */
}
h1, h2, h3 {
  font-weight: var(--bn-weight-heading);
  letter-spacing: var(--bn-tracking-heading);
  line-height: 1.1;
}
.bn-eyebrow {
  font-size: var(--bn-eyebrow-size);
  letter-spacing: var(--bn-eyebrow-tracking);
  text-transform: uppercase;
  font-weight: 600;
  font-stretch: 85%;
  color: var(--bn-fg-muted);
}
/* Receipts: stored answers, prompts, diffs, order IDs are ALWAYS mono */
.bn-receipt, .bn-prompt, .bn-diff, .bn-order-id {
  font-family: var(--bn-font-mono);
  font-size: 13px;
  line-height: 20px;
}
.bn-card {
  background: var(--bn-bg-elevated);
  border: var(--bn-border-width) solid var(--bn-border);
  border-radius: var(--bn-radius-card);
}
.bn-btn-primary {            /* one per screen, light context only */
  background: var(--bn-ultra);
  color: #FFFFFF;
  border-radius: var(--bn-radius-control);
  font-weight: 600;
}
.bn-btn-primary:hover { background: var(--bn-ultra-hover); }
.bn-btn-secondary {          /* neutral inversion */
  background: var(--bn-fg);
  color: var(--bn-bg);
  border-radius: var(--bn-radius-control);
  font-weight: 600;
}
.bn-money { color: var(--bn-accent); font-weight: 600; }   /* revenue numbers: 18px+ or bold */
.bn-recovered { color: var(--bn-accent); }
.bn-lost { color: var(--bn-mist); }
.bn-error { color: var(--bn-signal); }
.bn-grain::after {           /* apply to Night sections only */
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  opacity: var(--bn-grain-opacity);
  background-image: url("textures/grain.png"); /* 256x256 monochrome noise, tiled */
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: no-preference) {
  .bn-surface { animation: bn-surface var(--bn-motion-duration) var(--bn-motion-ease) both; }
  @keyframes bn-surface {
    from { opacity: 0; transform: translateY(var(--bn-motion-rise)); }
    to   { opacity: 1; transform: translateY(0); }
  }
}