/* ═══════════════════════════════════════════════════════════════════
   3BIDS BRAND BIBLE — CSS Token System
   Source of truth for ALL prototype HTML files.
   Derived from constants/theme.ts.

   Usage: <link rel="stylesheet" href="brand-bible.css">
   Then only write screen-specific styles inline.
═══════════════════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Token System ── */
:root {
  /* Colors — Brand */
  --deepBlue: #002D4D;
  --terracotta: #B85042;
  --white: #FFFFFF;
  --lightPrimary: #F5F6F6;
  --charcoal: #1E3344;
  --midGray: #6B7F8D;
  --lightGray: #D1D8DE;
  --coolGray: #8D9BA7;
  --slate: #D8DEE3;
  --cream: #EDF1F4;
  --offGold: #EAE0D5;

  /* Colors — Semantic */
  --success: #48BB78;
  --error: #E53E3E;
  --warning: #ED8936;
  --info: #4299E1;
  --amber: #F59E0B;

  /* Colors — Semantic Light */
  --lightSuccess: #DCFCE7;
  --lightError: #FEE2E2;
  --lightWarning: #FEF3C7;
  --lightInfo: #DBEAFE;
  --lightDeepBlue: rgba(0, 45, 77, 0.10);
  --lightTerracotta: #F5E6E4;

  /* Colors — Semantic Dark (convention, not named exports in theme.ts) */
  --successDark: #16A34A;
  --errorDark: #C53030;
  --warningDark: #D97706;
  --infoDark: #2563EB;
  --amberDark: #D97706; /* same as warningDark — amber is the warning accent */

  /* Colors — Role */
  --adminPrimary: #877884;

  /* Colors — Alpha */
  --terraA10: rgba(184,80,66,0.10);
  --terraA15: rgba(184,80,66,0.15);
  --deepBlueA10: rgba(0,45,77,0.10);
  --blackA04: rgba(0,0,0,0.04);
  --blackA10: rgba(0,0,0,0.10);
  --blackA15: rgba(0,0,0,0.15);
  --blackA20: rgba(0,0,0,0.20);
  --successA15: rgba(72,187,120,0.15);
  --warningA15: rgba(237,137,54,0.15);
  --infoA15: rgba(66,153,225,0.15);

  /* Spacing */
  --sp-xxs: 2px;
  --sp-xs: 4px;
  --sp-xsm: 6px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 20px;
  --sp-xxl: 24px;
  --sp-xxxl: 32px;
  --sp-xxxxl: 40px;
  --sp-section: 48px;
  --sp-hero: 60px;

  /* Typography */
  --text-micro: 10px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-xxl: 24px;
  --text-stat: 28px;
  --text-xxxl: 32px;
  --text-hero: 42px;
  --text-display: 48px;

  /* Border Radius */
  --radius-xxs: 1px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 28px;
  --radius-full: 9999px;
  --radius-searchBar: 24px;

  /* Borders */
  --borderThin: 1px;
  --borderThick: 2px;
  --borderAccent: 4px;

  /* IconCircle Sizes */
  --ic-sm: 32px;
  --ic-md: 44px;
  --ic-lg: 56px;
  --ic-xl: 72px;
  --ic-hero: 90px;

  /* Page Chrome (dark presentation layer — OUTSIDE phones) */
  --chromeBg: #1a1a1a;
  --chromeBorder: #333;
  --chromePanel: #222;
  --chromeMuted: #888;
  --chromeDim: #666;
  --chromeSubtle: #999;
  --chromeLight: #CCC;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE CHROME — Dark presentation wrapper (OUTSIDE phones)
═══════════════════════════════════════════════════════════════════ */
body {
  background: var(--chromeBg);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Roboto', sans-serif;
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════════
   PHONE FRAME — Frame D (Clay Mockup)
   Every .phone MUST use this. No exceptions.
   Source: phone-frame-comparison.html .frame-d
═══════════════════════════════════════════════════════════════════ */
.phone {
  background: var(--lightPrimary);
  border: none;
  border-radius: 40px;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.3),
    0 12px 48px rgba(0,0,0,0.2),
    inset 0 0 0 1px rgba(255,255,255,0.08);
  width: 390px;
  height: 844px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   APP SCREEN — Content INSIDE phones
   This is the app background. NOT white. NOT dark. #F5F6F6.
═══════════════════════════════════════════════════════════════════ */
.screen-content,
.screen {
  background: var(--lightPrimary);
  height: 100%;
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   STATUS BAR — Top of every phone
═══════════════════════════════════════════════════════════════════ */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-sm) var(--sp-xxl);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION & PHONE LABELS — ALWAYS CENTERED
═══════════════════════════════════════════════════════════════════ */
.section-label,
.phone-label,
.step-label {
  text-align: center;
}

.section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--chromeMuted);
  margin-bottom: var(--sp-lg);
}

.phone-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--chromeSubtle);
  margin-top: var(--sp-md);
}

/* ═══════════════════════════════════════════════════════════════════
   PHONE NOTES — Below each frame
═══════════════════════════════════════════════════════════════════ */
.phone-notes {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--chromeDim);
  margin-top: var(--sp-sm);
  line-height: 1.5;
}
.phone-notes code {
  background: var(--chromePanel);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--chromeLight);
}
.phone-notes em {
  color: var(--chromeMuted);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION DIVIDER
═══════════════════════════════════════════════════════════════════ */
.section-divider {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 var(--sp-xxxl) var(--sp-xxxl);
}
.section-divider hr {
  border: none;
  border-top: var(--borderThin) solid var(--slate);
}

/* ═══════════════════════════════════════════════════════════════════
   SCREEN ROW — Horizontal layout for phone groups
═══════════════════════════════════════════════════════════════════ */
.screen-row {
  display: flex;
  gap: var(--sp-xxxl);
  justify-content: center;
  flex-wrap: wrap;
  padding: var(--sp-xxl) var(--sp-xxxl);
  max-width: 1800px;
  margin: 0 auto;
}

.phone-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════
   ICON CIRCLES — The 12 approved styles
═══════════════════════════════════════════════════════════════════ */
.ic {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.ic.sm { width: var(--ic-sm); height: var(--ic-sm); font-size: 14px; }
.ic.md { width: var(--ic-md); height: var(--ic-md); font-size: 20px; }
.ic.lg { width: var(--ic-lg); height: var(--ic-lg); font-size: 25px; }
.ic.xl { width: var(--ic-xl); height: var(--ic-xl); font-size: 32px; }
.ic.hero { width: var(--ic-hero); height: var(--ic-hero); font-size: 40px; }

/* Style A — Deep Blue Outline */
.ic-A { background: transparent; border: var(--borderThick) solid var(--deepBlue); color: var(--deepBlue); }
/* Style B — Terracotta Fill */
.ic-B { background: var(--terracotta); color: var(--white); }
/* Style C — Deep Blue Fill (DEFAULT) */
.ic-C { background: var(--deepBlue); color: var(--white); }
/* Style D — Terracotta Outline */
.ic-D { background: transparent; border: var(--borderThick) solid var(--terracotta); color: var(--terracotta); }
/* Style E — White + DeepBlue (forms/selections) */
.ic-E { background: var(--white); border: var(--borderThick) solid var(--deepBlue); color: var(--deepBlue); }
/* Style F — White + Terracotta */
.ic-F { background: var(--white); border: var(--borderThick) solid var(--terracotta); color: var(--terracotta); }
/* Style G — White Outline (dark bg only) */
.ic-G { background: transparent; border: var(--borderThick) solid var(--white); color: var(--white); }
/* Style H — Success Fill */
.ic-H { background: var(--success); color: var(--white); }
/* Style I — Light Blue Tint */
.ic-I { background: var(--deepBlueA10); color: var(--deepBlue); }
/* Style J — Warning Tint */
.ic-J { background: var(--lightWarning); color: var(--warning); }
/* Style K — Info Tint */
.ic-K { background: var(--lightInfo); color: var(--info); }
/* Style L — Error Tint */
.ic-L { background: var(--lightError); color: var(--error); }

/* ═══════════════════════════════════════════════════════════════════
   TIP CARD — 3 variants, same structure
═══════════════════════════════════════════════════════════════════ */
.tip-card {
  background: var(--cream);
  border: var(--borderThin) solid var(--lightGray);
  border-left: var(--borderAccent) solid var(--terracotta);
  border-radius: var(--radius-md);
  padding: var(--sp-lg);
  display: flex;
  gap: var(--sp-md);
  align-items: flex-start;
}
.tip-card.gold { background: var(--offGold); }
.tip-card.neutral { background: var(--white); }

.tip-card .tip-content {
  flex: 1;
  font-size: var(--text-xs);
  color: var(--midGray);
  line-height: 1.5;
}
.tip-card .tip-content strong {
  font-size: var(--text-sm);
  color: var(--charcoal);
  display: block;
  margin-bottom: var(--sp-xs);
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE HEADER — Feature title at top of prototype
═══════════════════════════════════════════════════════════════════ */
.page-header {
  text-align: center;
  padding: var(--sp-xxxxl) var(--sp-xxl) var(--sp-xxxl);
}
.page-header h1 {
  color: var(--white);
  font-size: var(--text-xxxl);
  font-weight: 800;
  margin-bottom: var(--sp-sm);
}
.page-header .subtitle {
  color: var(--chromeMuted);
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════
   DATA PANEL — Architecture docs at bottom of prototype
═══════════════════════════════════════════════════════════════════ */
.data-panel {
  max-width: 1200px;
  margin: var(--sp-xxxxl) auto;
  padding: var(--sp-xxxl);
  background: var(--chromePanel);
  border: var(--borderThin) solid var(--chromeBorder);
  border-radius: var(--radius-lg);
}
.data-panel h2 {
  color: var(--white);
  font-size: var(--text-xl);
  margin-bottom: var(--sp-xxl);
}
.data-panel h3 {
  color: var(--chromeSubtle);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: var(--sp-xxl) 0 var(--sp-md);
}
.data-panel code {
  background: rgba(255,255,255,0.08);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--chromeLight);
}