/* SYNCED COPY of ../docs/brand/tokens.css (the source of truth) so the website is
   fully self-contained and works over file://. After editing brand/tokens.css,
   re-sync with:  cp brand/tokens.css website/tokens.css  (keep this header). */
/* Blueprint design tokens - the single source of truth, mirrored EXACTLY from the
   iOS app's Theme.swift (enum BP). Shared by website, extension, legal pages, brand
   guide. The app supports full light + dark; LIGHT (warm off-white) is the default.
   The navy/blueprint colors are the building, splash, and AR motif - not the whole
   app background. No em dashes anywhere in product copy. */

:root {
  /* ---- Brand constants (identical in every theme) ---- */
  /* Blueprint navy world: the building illustration, launch splash, AR motif */
  --bp-navy:        #0B2A52; /* deep royal navy */
  --bp-navy-top:    #1A5290; /* brighter blue, gradient top */
  --bp-line:        #DCE8F5; /* white-blue linework */
  --bp-line-dim:    #7FA0C4;
  --bp-window-glow: #AFCBE8; /* soft lit windows */
  --bp-button-text: #F6F9FC;
  /* Accent gradient (fixed endpoints) */
  --bp-accent-grad-1: #EE6A2A;
  --bp-accent-grad-2: #D9521A;

  /* Grade scale (functional, fixed) + deep partner for badge gradients */
  --bp-grade-a: #2E7D54; --bp-grade-a-deep: #215C3D;
  --bp-grade-b: #5E9A53; --bp-grade-b-deep: #47793C;
  --bp-grade-c: #C59231; --bp-grade-c-deep: #A5781E;
  --bp-grade-d: #D56F2C; --bp-grade-d-deep: #B4581D;
  --bp-grade-f: #C0432C; --bp-grade-f-deep: #9C3320;

  --bp-font: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;

  /* ---- Adaptive surfaces: LIGHT defaults (the app's default look) ---- */
  --bp-bg:             #F2F1EB; /* warm off-white */
  --bp-bg-2:           #EAE8E0;
  --bp-surface:        #FFFFFF; /* crisp white cards */
  --bp-surface-stroke: #E7E3DA;
  --bp-text:           #14222E;
  --bp-text-dim:       #6E6A61;
  --bp-accent:         #DD5A1E; /* the orange pop, light */
  --bp-button-bg:      #0F315C;
  --bp-button-hi:      #1A5290;
  --bp-card-shadow:    rgba(26, 43, 60, 0.16);

  /* Named aliases used by the legal pages + brand guide */
  --bp-field:   #081424; /* dark field (navy) */
  --bp-paper:   #F2F1EB; /* light paper = warm off-white */
  --bp-ink:     #14222E; /* text on paper */
  --bp-ink-dim: #6E6A61;
}

/* ---- DARK theme (explicit choice) ---- */
:root[data-theme="dark"] {
  --bp-bg:             #081424;
  --bp-bg-2:           #06101D;
  --bp-surface:        #122236;
  --bp-surface-stroke: #22364E;
  --bp-text:           #EAF1F8;
  --bp-text-dim:       #AEBCCE;
  --bp-accent:         #F06A28; /* the orange pop, dark */
  --bp-button-bg:      #123255;
  --bp-button-hi:      #1C5896;
  --bp-card-shadow:    rgba(0, 0, 0, 0.5);
  --bp-paper:          #081424;
  --bp-ink:            #EAF1F8;
  --bp-ink-dim:        #AEBCCE;
}

/* ---- SYSTEM: follow the OS when there is no explicit choice ---- */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"], :root:not([data-theme]) {
    --bp-bg:             #081424;
    --bp-bg-2:           #06101D;
    --bp-surface:        #122236;
    --bp-surface-stroke: #22364E;
    --bp-text:           #EAF1F8;
    --bp-text-dim:       #AEBCCE;
    --bp-accent:         #F06A28;
    --bp-button-bg:      #123255;
    --bp-button-hi:      #1C5896;
    --bp-card-shadow:    rgba(0, 0, 0, 0.5);
    --bp-paper:          #081424;
    --bp-ink:            #EAF1F8;
    --bp-ink-dim:        #AEBCCE;
  }
}