/* ============================================================
   Beaupixel — Color tokens
   A confident monochrome system: pure black & white anchored
   by two near-neutral families — "Grey Goose" (a warm, faintly
   green-grey) and "Smoke" (a true neutral grey). Color is used
   sparingly and only for semantic status.
   Values lifted verbatim from beaupixel.com (global.css).
   ============================================================ */

:root {
  /* ---- Anchors ---- */
  --bp-black: #000000;
  --bp-white: #ffffff;

  /* ---- Grey Goose (warm neutral, faintly green) ---- */
  --bp-grey-goose: #151514;
  --bp-grey-goose-90: #2a2a28;
  --bp-grey-goose-80: #545550;
  --bp-grey-goose-70: #696a65;
  --bp-grey-goose-60: #7e7f7a;
  --bp-grey-goose-50: #93948d;
  --bp-grey-goose-40: #a8a9a1;
  --bp-grey-goose-30: #bebeb5;
  --bp-grey-goose-20: #d2d3c9;
  --bp-grey-goose-10: #e4e5de;

  /* ---- Smoke (true neutral grey) ---- */
  --bp-smoke: #181818;
  --bp-smoke-90: #313131;
  --bp-smoke-80: #494949;
  --bp-smoke-70: #626262;
  --bp-smoke-60: #7a7a7a;
  --bp-smoke-50: #939393;
  --bp-smoke-40: #ababab;
  --bp-smoke-30: #c4c4c4;
  --bp-smoke-20: #dcdcdc;
  --bp-smoke-10: #f4f4f4;

  /* ---- Semantic status ---- */
  --bp-success: #84b33e;
  --bp-success-light: #b1e852;
  --bp-warning: #b38a3e;
  --bp-warning-light: #f8c755;
  --bp-error: #b33e3e;
  --bp-error-light: #f85555;

  /* ---- Translucent utilities (frosted buttons, scrims) ---- */
  --bp-black-a05: rgba(0, 0, 0, 0.05);
  --bp-black-a10: rgba(0, 0, 0, 0.1);
  --bp-black-a20: rgba(0, 0, 0, 0.2);
  --bp-white-a20: rgba(255, 255, 255, 0.2);

  /* ============================================================
     Semantic aliases — reference these in components.
     ============================================================ */
  --bp-bg: var(--bp-smoke-10);            /* page canvas */
  --bp-surface: var(--bp-white);          /* default card */
  --bp-surface-variant: var(--bp-smoke-10);
  --bp-surface-muted: var(--bp-grey-goose-20); /* hero "about" card */
  --bp-surface-dark: var(--bp-black);     /* inverted card */

  --bp-text: var(--bp-black);
  --bp-text-muted: var(--bp-smoke-40);
  --bp-text-inverse: var(--bp-white);
  --bp-heading-muted: var(--bp-smoke-30);

  --bp-primary: var(--bp-grey-goose-50);
  --bp-primary-dark: var(--bp-grey-goose-60);

  --bp-border: var(--bp-smoke-20);
  --bp-divider: var(--bp-grey-goose-10);

  /* Frosted-pill button surface + text */
  --bp-button: var(--bp-black-a20);
  --bp-button-text: var(--bp-white);
  --bp-button-active: var(--bp-black);

  --bp-inactive: var(--bp-black-a20);
  --bp-selection: var(--bp-black-a10);

  /* Hero tag-marquee card: black card + white tags in light mode */
  --bp-hero-tags-bg: var(--bp-black);
  --bp-hero-tag-ink: var(--bp-white);

  /* Testimonials container: black card + white heading in light mode */
  --bp-testi-bg: var(--bp-black);
  --bp-testi-heading: var(--bp-white);

  /* FAQ open row: black bg + white text in light mode */
  --bp-faq-open-bg: var(--bp-surface-dark);
  --bp-faq-open-ink: var(--bp-white);
  --bp-faq-open-sub: rgba(255, 255, 255, 0.7);
}

/* ---- Dark mode (the brand ships a true-black inversion) ---- */
.bp-dark,
.dark:root {
  --bp-bg: var(--bp-black);
  --bp-surface: var(--bp-smoke-90);
  --bp-surface-variant: var(--bp-smoke);
  --bp-surface-muted: var(--bp-grey-goose-90);

  --bp-text: var(--bp-white);
  --bp-text-inverse: var(--bp-black);
  --bp-text-muted: var(--bp-smoke-50);

  --bp-button: var(--bp-white-a20);
  --bp-inactive: var(--bp-white-a20);
  --bp-selection: rgba(255, 255, 255, 0.4);
  --bp-border: var(--bp-smoke-80);

  /* Hero tag-marquee card flips to a grey card + dark tags in dark mode */
  --bp-hero-tags-bg: var(--bp-grey-goose-60);
  --bp-hero-tag-ink: var(--bp-black);

  /* Testimonials container flips to a white card + black heading in dark mode */
  --bp-testi-bg: var(--bp-white);
  --bp-testi-heading: var(--bp-black);

  /* FAQ open row flips to white bg + black text in dark mode */
  --bp-faq-open-bg: var(--bp-white);
  --bp-faq-open-ink: var(--bp-black);
  --bp-faq-open-sub: var(--bp-smoke-60);
}