/* ==========================================================================
   PnG Capture — Shared Design Tokens
   Do not fork this file. Landing (Account 1) and Admin (Account 2) both
   read colors, spacing, radius, and shadow ONLY from these variables.
   ========================================================================== */

:root {
  /* Theme 1 — "Temple Gold" (default, light, traditional-premium) */
  --bg: #F6EDE4;
  --ink: #211C1A;
  --gold: #B8863B;
  --maroon: #7A1F2B;
  --sandal: #8C7D6B;

  /* Derived surface tones (built from the palette above, not new hexes) */
  --surface: #FFFFFF;
  --surface-raised: #FBF6F0;
  --surface-2: #F0E8DF;           /* used by admin hover/active states */
  --border-soft: rgba(33, 28, 26, 0.10);
  --border-color: rgba(33, 28, 26, 0.12); /* alias used by admin CSS */

  /* Status colours (admin badges: enquiry/booking status) */
  --status-pending:   #B8863B;   /* gold — mirrors --gold */
  --status-confirmed: #2E7D32;   /* green */
  --status-completed: #3B5A9A;   /* blue */
  --status-danger:    #B32C1E;   /* red */

  /* Spacing — 8pt grid (Section A4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;

  /* Radius scale */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  /* Shadows */
  --shadow-soft: 0 4px 20px rgba(33, 28, 26, 0.08);
  --shadow-elevated: 0 12px 40px rgba(33, 28, 26, 0.16);

  /* Typography */
  --font-display: 'Fraunces', serif;
  --font-body: 'Catamaran', sans-serif;

  /* Motion */
  --theme-transition: background-color 400ms ease, color 400ms ease,
    border-color 400ms ease, box-shadow 400ms ease;

  /* Theme-aware tint variables — used instead of hardcoded rgba(hex,opacity) */
  /* These shift correctly in Midnight dark mode */
  --gold-tint-soft:   rgba(184, 134, 59, 0.08);
  --gold-tint-softer: rgba(184, 134, 59, 0.06);
  --gold-tint-border: rgba(184, 134, 59, 0.15);
  --maroon-tint-soft: rgba(122, 31, 43, 0.06);
}

[data-theme="midnight"] {
  /* Theme 2 — "Midnight Frame" (alternate, dark, cinematic-premium) */
  --bg: #15130F;
  --ink: #F3E9DD;
  --gold: #D4A65A;
  --maroon: #B33A48;
  --sandal: #A69A87;

  --surface: #1D1A15;
  --surface-raised: #221E18;
  --surface-2: #2A2520;
  --border-soft: rgba(243, 233, 221, 0.12);
  --border-color: rgba(243, 233, 221, 0.14);

  --status-pending:   #D4A65A;
  --status-confirmed: #4CAF50;
  --status-completed: #7986CB;
  --status-danger:    #EF5350;

  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.55);

  --gold-tint-soft:   rgba(212, 166, 90, 0.10);
  --gold-tint-softer: rgba(212, 166, 90, 0.08);
  --gold-tint-border: rgba(212, 166, 90, 0.18);
  --maroon-tint-soft: rgba(179, 58, 72, 0.08);
}

/* Global base — every page, both codebases, pulls from tokens only */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  transition: var(--theme-transition);
  margin: 0;
}


h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  color: var(--ink);
}

a { color: inherit; }

/* Shared interactive-state helpers (Section A4: default/hover/active/focus/disabled) */
.btn,
button,
input,
select,
textarea {
  font-family: var(--font-body);
  border-radius: var(--radius-sm);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 600;
  transition: var(--theme-transition), transform 150ms ease, box-shadow 150ms ease;
}

.btn-primary {
  background: var(--gold);
  color: var(--bg);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-elevated); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-soft); }
.btn-primary:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--sandal);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-outline:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn-outline:disabled { opacity: 0.5; cursor: not-allowed; }

.card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-soft);
  transition: var(--theme-transition), box-shadow 200ms ease, transform 200ms ease;
}
.card:hover { box-shadow: var(--shadow-elevated); transform: translateY(-3px); }

::selection { background: var(--gold); color: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}