/* LifeAlbum brand tokens — single source of truth for colors and typography.
   Import this in every marketing page via <link rel="stylesheet" href="/_shared/brand.css"> */

:root {
  /* Brand colors — TODO: confirm exact hex values with user */
  --la-bg:           #ffffff;
  --la-bg-soft:      #f7f7f8;
  --la-text:         #1a1a1f;
  --la-text-soft:    #555560;
  --la-accent:       #4f46e5;   /* placeholder — replace with actual brand accent */
  --la-accent-hover: #4338ca;
  --la-border:       #e5e5ea;

  /* Typography */
  --la-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --la-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Spacing scale */
  --la-space-1: 0.25rem;
  --la-space-2: 0.5rem;
  --la-space-3: 1rem;
  --la-space-4: 1.5rem;
  --la-space-5: 2rem;
  --la-space-6: 3rem;
  --la-space-7: 5rem;

  /* Radii */
  --la-radius-sm: 6px;
  --la-radius-md: 12px;
  --la-radius-lg: 20px;

  /* Shadows */
  --la-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --la-shadow-md: 0 4px 16px rgba(0,0,0,0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --la-bg:        #0e0e12;
    --la-bg-soft:   #16161c;
    --la-text:      #f5f5f7;
    --la-text-soft: #a0a0aa;
    --la-border:    #2a2a32;
  }
}

/* Reset + base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--la-font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--la-text);
  background: var(--la-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--la-font-display); line-height: 1.2; letter-spacing: -0.02em; }
a { color: var(--la-accent); text-decoration: none; }
a:hover { color: var(--la-accent-hover); text-decoration: underline; }

.la-container { max-width: 1100px; margin: 0 auto; padding: 0 var(--la-space-4); }
.la-button {
  display: inline-block;
  padding: var(--la-space-3) var(--la-space-5);
  background: var(--la-accent);
  color: #fff;
  border-radius: var(--la-radius-md);
  font-weight: 600;
  transition: background 0.15s ease;
}
.la-button:hover { background: var(--la-accent-hover); text-decoration: none; }