/* ==========================================================================
   Build It Simple - legal pages (Privacy, Terms, Text Opt-In). Same app tokens as site.css, extracted from the
   app (BuildItSimple/wwwroot/css/site.css). Names match the app's tokens.
   Fonts: the app loads Inter 400-700 + Manrope 600-800 from Google Fonts,
   falling back to the system stack (keep the site's existing <link>).
   ========================================================================== */

/* ---------- Tokens: light ---------- */
:root {
  color-scheme: light;
  --font-body: Inter, -apple-system, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: Manrope, Inter, -apple-system, "Segoe UI", sans-serif;

  --accent: #007AFF;
  --accent-hover: #1A88FF;
  --accent-pressed: #0062CC;
  --accent-soft: rgba(0, 122, 255, 0.12);

  --text-primary: #1D1D1F;
  --text-secondary: #6E6E73;
  --border-color: rgba(0, 0, 0, 0.08);
  --surface: #ffffff;
  --card-bg: rgba(255, 255, 255, 0.72);
  --input-fill: #F2F2F5;
  --input-border: #D5D5DB;
  --hover-fill: #f2f2f7;
  --shadow: 0 2px 18px rgba(0, 0, 0, 0.08);

  --glass-tint: rgba(0, 122, 255, 0.16);
  --glass-tint-hover: rgba(0, 122, 255, 0.25);
  --glass-tint-active: rgba(0, 122, 255, 0.34);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 6px 20px rgba(0, 122, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --glass-blur: blur(28px);
  --nav-bg: rgba(255, 255, 255, 0.55);
  --header-bg: rgba(255, 255, 255, 0.6);

  --brand-bg: #f3f6fc;
  --blob-1: #7cc0ff;
  --blob-2: #b8a4ff;
  --blob-3: #8ff0e0;
  --blob-opacity: 0.45;
  --brand-gradient: linear-gradient(100deg, #007AFF 10%, #6b5cff 55%, #00b3a4 95%);
  --button-gradient: linear-gradient(180deg, #2b8fff, #007AFF 55%, #0066dd);
  --button-glow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 10px 24px -10px rgba(0, 122, 255, 0.75);
  --button-glow-hover: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 14px 30px -10px rgba(0, 122, 255, 0.85);

  --tile-bg: rgba(255, 255, 255, 0.62);
  --tile-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 40px -22px rgba(20, 40, 90, 0.35);
  --tile-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 20px 40px -18px rgba(0, 60, 140, 0.45);

  --ok-bg: #D8F5DE;   --ok: #1A7A3A;
  --warn-bg: #FCE6D4; --warn: #A85A1D;
  --info-bg: #D8E9FF; --info: #1D5FA8;
  --bad-bg: #FFE2E2;  --bad: #C0392B;
  --error: #D70015;

  /* Radii used by the app */
  --r-btn: 12px; --r-btn-sm: 9px; --r-btn-lg: 14px;
  --r-tile: 18px; --r-card: 20px; --r-pill: 999px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Tokens: dark (system), unless the toggle chose light ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --text-primary: #f2f4fb;
    --text-secondary: #b7bbcc;
    --border-color: rgba(255, 255, 255, 0.08);
    --surface: rgba(34, 38, 56, 0.95);
    --card-bg: rgba(28, 32, 48, 0.7);
    --input-fill: rgba(255, 255, 255, 0.06);
    --input-border: rgba(255, 255, 255, 0.14);
    --hover-fill: rgba(255, 255, 255, 0.08);
    --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
    --glass-tint: rgba(0, 122, 255, 0.22);
    --glass-tint-hover: rgba(0, 122, 255, 0.32);
    --glass-tint-active: rgba(0, 122, 255, 0.42);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 60px -20px rgba(0, 0, 0, 0.7);
    --nav-bg: rgba(28, 32, 48, 0.6);
    --header-bg: rgba(12, 15, 28, 0.7);
    --brand-bg: #070a14;
    --blob-1: #0a4fb0; --blob-2: #4b2fa6; --blob-3: #0b6a63;
    --blob-opacity: 0.5;
    --accent-soft: rgba(0, 122, 255, 0.22);
    --tile-bg: rgba(28, 32, 48, 0.7);
    --tile-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 60px -20px rgba(0, 0, 0, 0.7);
    --tile-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 50px -16px rgba(0, 90, 220, 0.55);
    --ok-bg: #16402A;   --ok: #7EE2A0;
    --warn-bg: #4D3218; --warn: #FFC08A;
    --info-bg: #1B3558; --info: #9CC8FF;
    --bad-bg: #4A1F22;  --bad: #FF9B93;
    --error: #ff9b93;
  }
}
/* ---------- Tokens: dark (toggle) - keep identical to the block above ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --text-primary: #f2f4fb;
  --text-secondary: #b7bbcc;
  --border-color: rgba(255, 255, 255, 0.08);
  --surface: rgba(34, 38, 56, 0.95);
  --card-bg: rgba(28, 32, 48, 0.7);
  --input-fill: rgba(255, 255, 255, 0.06);
  --input-border: rgba(255, 255, 255, 0.14);
  --hover-fill: rgba(255, 255, 255, 0.08);
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --glass-tint: rgba(0, 122, 255, 0.22);
  --glass-tint-hover: rgba(0, 122, 255, 0.32);
  --glass-tint-active: rgba(0, 122, 255, 0.42);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --nav-bg: rgba(28, 32, 48, 0.6);
  --header-bg: rgba(12, 15, 28, 0.7);
  --brand-bg: #070a14;
  --blob-1: #0a4fb0; --blob-2: #4b2fa6; --blob-3: #0b6a63;
  --blob-opacity: 0.5;
  --accent-soft: rgba(0, 122, 255, 0.22);
  --tile-bg: rgba(28, 32, 48, 0.7);
  --tile-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --tile-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 50px -16px rgba(0, 90, 220, 0.55);
  --ok-bg: #16402A;   --ok: #7EE2A0;
  --warn-bg: #4D3218; --warn: #FFC08A;
  --info-bg: #1B3558; --info: #9CC8FF;
  --bad-bg: #4A1F22;  --bad: #FF9B93;
  --error: #ff9b93;
}


/* Old names still used by inline styles on sms-opt-in.html */
:root { --text: var(--text-primary); --text-2: var(--text-secondary); --text-3: var(--text-secondary); --glass-edge: var(--border-color); --bg: var(--brand-bg); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--brand-bg); color: var(--text-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; line-height: 1.65; overflow-x: hidden; }
.bg, .brand-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(80px); opacity: var(--blob-opacity); }
.b1 { background: var(--blob-1); top: -18vmax; left: -10vmax; animation: brand-drift1 26s ease-in-out infinite alternate; }
.b2 { background: var(--blob-2); top: 20vh; right: -16vmax; animation: brand-drift2 32s ease-in-out infinite alternate; }
.b3 { background: var(--blob-3); bottom: -22vmax; left: 20vw; animation: brand-drift3 28s ease-in-out infinite alternate; }
@keyframes brand-drift1 { to { transform: translate(14vw, 10vh) scale(1.1); } }
@keyframes brand-drift2 { to { transform: translate(-12vw, 16vh) scale(0.9); } }
@keyframes brand-drift3 { to { transform: translate(-10vw, -14vh) scale(1.15); } }
a { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 820px; margin: 0 auto; padding: 16px 16px 64px; }

/* Top bar: the app's glass pill nav */
.top { position: sticky; top: 12px; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; padding: 6px 8px 6px 12px; border-radius: var(--r-pill); background: var(--nav-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.top > a:not(.brand) { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.top > a:not(.brand):hover { background: var(--accent-soft); }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; font-size: 17px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.brand img { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 6px 16px -6px rgba(0,122,255,.7); }

/* Content card: the app's .card */
.card { background: var(--card-bg); border: 1px solid var(--border-color); box-shadow: var(--tile-shadow); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: var(--r-card); padding: 36px 40px; }
h1 { font-family: var(--font-head); font-size: 38px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; margin: 0 0 6px; background: var(--brand-gradient); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brand-shine 10s linear infinite; }
@keyframes brand-shine { to { background-position: 200% center; } }
h2 { font-family: var(--font-head); font-size: 20px; font-weight: 800; margin: 30px 0 8px; letter-spacing: -.01em; }
p, li { color: var(--text-secondary); font-size: 16px; }
ul { padding-left: 22px; }
li::marker { color: var(--accent); }
.updated { display: inline-block; color: var(--info); background: var(--info-bg); font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 11px; margin: 4px 0 20px; }
.callout { border-left: 4px solid var(--accent); padding: 12px 16px; border-radius: 0 12px 12px 0; background: var(--accent-soft); }
.callout p { margin: 0; color: var(--text-primary); }
footer { margin-top: 24px; text-align: center; color: var(--text-secondary); font-size: 14px; }
footer a { display: inline-block; margin: 0 2px; padding: 4px 10px; border-radius: var(--r-pill); font-weight: 600; text-decoration: none; }
footer a:hover { background: var(--accent-soft); }
@media (max-width: 600px) { .card { padding: 24px 20px; } h1 { font-size: 28px; } .top { border-radius: 18px; } }
@media (prefers-reduced-motion: reduce) { .blob, h1 { animation: none !important; } html { scroll-behavior: auto; } }