/* Balance Scan — captureproof.com/balancescan/
   CaptureProof design-system tokens (inlined from the DS package) + the page's component classes. */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,600;1,700&display=swap");

/* CaptureProof color system — sourced from the official brand palette PDF
   (captureproof_palette_v2) and reconciled with the iOS asset catalog names.
   Base ramp = literal brand swatches; semantic aliases map them to UI roles. */
:root {
  /* ---- PRIMARY ---- */
  --cp-blue: #005884;          /* CaptureProof Blue · PMS 7692 C · the core brand color */
  --cp-blue-light: #4781AD;    /* Light Blue · PMS 646 C */
  --cp-alert-orange: #E0503A;  /* Alert Orange · PMS 7625 C · destructive / at-risk */
  --cp-orange: #DE7146;        /* Orange · PMS 7597 C */
  --cp-grey-dark: #54565B;     /* Dark Grey · Cool Grey 11 C · primary body text */

  /* ---- SECONDARY ---- */
  --cp-turquoise-dark: #008996;/* Dark Turquoise · PMS 321 C · primary action / active button */
  --cp-turquoise: #00A49A;     /* Turquoise · PMS 3272 C · accent / wordmark gradient end */
  --cp-yellow: #FDB714;        /* Yellow · PMS 7549 · highlights / ratings */
  --cp-white-off: #FBFBFB;     /* Super Light Grey · app background */

  /* ---- TERTIARY / NEUTRALS ---- */
  --cp-grey-pale: #E6E6E6;     /* Pale Grey · hairline borders / dividers */
  --cp-grey-light: #C0C0C0;    /* Light Grey · Cool Grey 4 C · disabled / index bar */
  --cp-grey-medium: #999999;   /* Medium Grey · secondary text / placeholders */
  --cp-grey-super-dark: #303030;/* Super Dark Grey · headings on light */
  --cp-blue-grey: #5F7385;     /* Blue Grey · muted metadata */
  --cp-blue-pale: #96B3C7;     /* Pale Blue · tints, selected fills */

  /* ---- DERIVED (from CPTheme button states) ---- */
  --cp-button-default: #7BB2CE;/* idle/disabled steel-blue fill */
  --cp-white: #FFFFFF;
  --cp-black: #000000;

  /* ================= SEMANTIC ALIASES ================= */
  /* Surfaces */
  --surface-app: var(--cp-white-off);
  --surface-card: var(--cp-white);
  --surface-header: var(--cp-blue);           /* nav bar (gradient blue→turquoise via image) */
  --surface-tint: var(--cp-blue-pale);
  --surface-sunken: var(--cp-grey-pale);

  /* Text */
  --text-heading: var(--cp-blue);
  --text-body: var(--cp-grey-dark);
  --text-strong: var(--cp-grey-super-dark);
  --text-muted: var(--cp-grey-medium);
  --text-meta: var(--cp-blue-grey);
  --text-on-brand: var(--cp-white);
  --text-link: var(--cp-turquoise-dark);

  /* Actions */
  --action-primary: var(--cp-turquoise-dark);   /* filled CTA */
  --action-primary-idle: var(--cp-button-default);
  --action-secondary: var(--cp-blue);
  --action-disabled: var(--cp-grey-light);

  /* Status */
  --status-danger: var(--cp-alert-orange);
  --status-warning: var(--cp-yellow);
  --status-success: var(--cp-turquoise);
  --status-info: var(--cp-blue-light);

  /* Lines */
  --border-hairline: var(--cp-grey-pale);
  --border-field: var(--cp-grey-dark);
  --border-accent: var(--cp-turquoise);

  /* Icon defaults */
  --icon-default: var(--cp-blue);
  --icon-muted: var(--cp-grey-medium);
}

/* CaptureProof typography — Open Sans everywhere (CPTheme.Font).
   Concrete sizes lifted from the iOS theme:
   headingSmall 30/semibold · title 20/medium · button 17/semibold · description 14/regular. */
:root {
  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Open Sans", sans-serif; /* wordmark: italic 700 + 700 */

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* Type ramp (px, matches product) */
  --fs-display: 30px;   /* headingSmall — screen titles */
  --fs-title: 20px;     /* section titles, patient name */
  --fs-body-lg: 17px;   /* button label, primary rows */
  --fs-body: 15px;      /* default UI text / toast */
  --fs-caption: 14px;   /* description, secondary rows */
  --fs-meta: 12px;      /* metadata, index bar, timestamps */

  /* Line heights */
  --lh-tight: 1.15; /* @kind font */
  --lh-snug: 1.3; /* @kind font */
  --lh-normal: 1.45; /* @kind font */

  --ls-tight: -0.01em; /* @kind font */
  --ls-normal: 0; /* @kind font */
}

/* CaptureProof spacing — derived from CPTheme.Spacing
   (cardPadding 10, sectionGap 20, button padding 10) on a 4px base. */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;   /* card padding / button padding (product value) */
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;   /* section gap (product value) */
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;

  /* Component sizing */
  --control-h: 48px;       /* primary button / field height */
  --control-h-sm: 36px;
  --nav-h: 56px;           /* top navigation bar */
  --tabbar-h: 64px;        /* bottom navigation */
  --icon-sm: 18px;
  --icon-md: 24px;
  --icon-lg: 32px;

  --screen-w: 390px;       /* iPhone reference width */
  --gutter: 16px;          /* screen side gutter */
}

/* CaptureProof effects — radii, borders, shadows.
   Radii taken from product: button 5, input/toast 8, settings card 4,
   form/side-menu 14–15 (CPTheme.Radius.card = 15). Shadows are soft and low. */
:root {
  /* Radii */
  --radius-xs: 4px;    /* settings rows, small chips */
  --radius-sm: 5px;    /* buttons (CPTheme.Radius.button) */
  --radius-md: 8px;    /* text fields, toast */
  --radius-lg: 14px;   /* login form card */
  --radius-xl: 15px;   /* cards, side menu (CPTheme.Radius.card) */
  --radius-pill: 999px;

  /* Borders */
  --border-w-hair: 0.5px;  /* field / card hairline (product uses 0.5) */
  --border-w: 1px;
  --border-w-accent: 1px;

  /* Shadows — from UIButton.setBorderWithShadow defaults (soft, offset 2/2) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.10);
  --shadow-raised: 2px 2px 4px rgba(0, 0, 0, 0.20);
  --shadow-header: 0 2px 8px rgba(0, 88, 132, 0.18);

  /* Header gradient (headerbg.png: deep blue → turquoise, rounded bottom-left) */
  --gradient-header: linear-gradient(100deg, #004E77 0%, #006E86 55%, #008996 100%); /* @kind other */
  --gradient-wordmark: linear-gradient(180deg, #00A49A 0%, #008996 100%); /* @kind other */

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 300ms; /* @kind other */
  --tap-scale: 0.97; /* @kind other */
}

/* ---- Page base (from the design canvas) ---- */
html { scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; font-family: var(--font-sans); color: var(--text-body); -webkit-font-smoothing: antialiased; }
a { color: var(--text-link); }
a:hover { color: var(--cp-blue); }
img { max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }

/* ---- DS Button (static rendering of CaptureProofDesignSystem.Button) ---- */
.cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control-h); padding: 0 22px; border: none; border-radius: var(--radius-sm); background: var(--action-primary); color: var(--cp-white); font-family: var(--font-sans); font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-base) var(--ease-standard); -webkit-tap-highlight-color: transparent; }
.cp-btn:active { transform: scale(var(--tap-scale)); }
.cp-btn--secondary { background: var(--cp-blue); }
.cp-btn--white { background: var(--cp-white); color: var(--cp-blue); padding: 0 26px; }
.cp-btn--outline { background: rgba(255,255,255,0.14); color: var(--cp-white); border: 1px solid rgba(255,255,255,0.55); padding: 0 26px; }
a:hover .cp-btn { color: inherit; filter: brightness(0.96); }
a:hover .cp-btn--white { color: var(--cp-blue); }
a:hover .cp-btn--outline, a:hover .cp-btn--secondary, a:hover .cp-btn:not(.cp-btn--white) { color: var(--cp-white); }

/* ---- DS Card (static rendering of CaptureProofDesignSystem.Card) ---- */
.cp-card { background: var(--surface-card); border: 0.5px solid var(--border-hairline); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--space-5); font-family: var(--font-sans); color: var(--text-body); height: 100%; }
.cp-card--test { display: flex; flex-direction: column; gap: 16px; }
.cp-card--media { overflow: hidden; }
.cp-card--evidence { background: rgba(255,255,255,0.08); border: 0.5px solid rgba(255,255,255,0.28); color: #E8F2F6; box-shadow: none; }

/* ---- Evidence section: four cards as a 2x2 grid ---- */
.bs-evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .bs-evidence-grid { grid-template-columns: 1fr; } }

/* ---- Hero video (fills the phone frame) ---- */
.bs-hero-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0B2A3A; }

/* ---- Screenshot tiles (placeholders until real app screenshots are dropped in) ---- */
.bs-tile { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #EAF4F8 0%, #FBFBFB 100%); }
.bs-tile img, .bs-tile svg { width: 76px; height: 76px; object-fit: contain; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .cp-btn { transition: none; } }