/*
 * Shared "dark background + white card" page design.
 *
 * Used by the small set of full-page, non-app-shell templates that render a
 * single centered white card on a near-black background: the marketing
 * landing page and the auth flow screens (sign-in, access denied,
 * authentication error). These templates live in two different apps
 * (frontend, accounts) so the design lives here as a shared static asset
 * rather than as a template each app would have to import from the other.
 *
 * Usage in a template:
 *   {% load static %}
 *   <link rel="stylesheet" href="{% static 'css/dark-card.css' %}">
 *
 *   <div class="dc-page">
 *     <div class="dc-card">
 *       <div class="dc-eyebrow">vCard Tool</div>   <!-- or .dc-brand -->
 *       <h1>Heading</h1>
 *       <p>Body copy.</p>
 *       <a class="dc-link" href="...">Back</a>
 *     </div>
 *   </div>
 *
 * Note: index.html, error.html, login.html, and unauthorized.html have all
 * been migrated to this shared stylesheet.
 */

:root {
  --dc-color-primary: #1D4ED8;
  --dc-color-bg: #0A0A0F;
  --dc-color-heading: #111827;
  --dc-color-muted: #6B7280;
  --dc-font-sans: system-ui, -apple-system, sans-serif;
  --dc-font-serif: ui-serif, Georgia, serif;
}

/* Reset + page background */
.dc-page,
.dc-page *,
.dc-page *::before,
.dc-page *::after {
  box-sizing: border-box;
}

html:has(.dc-page),
body:has(.dc-page) {
  height: 100%;
  margin: 0;
}

.dc-page {
  min-height: 100vh;
  background: var(--dc-color-bg);
  font-family: var(--dc-font-sans);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

/* Card */
.dc-card {
  background: #fff;
  border-radius: 4px;
  padding: 52px 48px 44px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, .45);
}

/* Wider variant for content-heavier cards (e.g. the marketing landing page) */
.dc-card--wide {
  max-width: 420px;
  box-shadow: 0 8px 48px rgba(0, 0, 0, .5);
}

/* Small uppercase label above the heading: colored "eyebrow" tag variant ... */
.dc-eyebrow {
  font-family: var(--dc-font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dc-color-primary);
  margin-bottom: 16px;
}

/* ...or the quieter, muted "brand" label variant */
.dc-brand {
  font-family: var(--dc-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dc-color-muted);
  margin-bottom: 32px;
}

/* Heading */
.dc-card h1 {
  font-family: var(--dc-font-serif);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--dc-color-heading);
  margin: 0 0 12px;
  line-height: 1.2;
  text-wrap: balance;
}

/* Body copy */
.dc-card p {
  font-family: var(--dc-font-sans);
  font-size: .9rem;
  color: var(--dc-color-muted);
  line-height: 1.6;
  margin: 0 0 12px;
}

.dc-card p:last-of-type {
  margin-bottom: 0;
}

/* Accent-colored link (e.g. "return to sign-in" / "try a different account") */
.dc-link {
  font-family: var(--dc-font-sans);
  font-size: .88rem;
  color: var(--dc-color-primary);
  text-decoration: none;
}

.dc-link:hover {
  text-decoration: underline;
}