/*
 * BookATeeTime — Masters Theme on Material 3
 * ════════════════════════════════════════════════════════════════════════
 * Single source of truth for public-page styling (index, install, member,
 * privacy). Built on the same M3 token roles the admin console uses, with
 * the Masters palette applied as the default expression.
 *
 * Architecture:
 *   design-system/colors_and_type.css   → M3 token roles + typescale (BMRK base)
 *   design-system.css (this file)       → Masters sys-color + typescale overrides
 *                                         + legacy aliases (--bg, --gold, …)
 *                                         + shared utility classes
 *
 * Usage:
 *   <link rel="stylesheet" href="/design-system.css" />
 *   (load BEFORE any page-specific styles)
 *
 * Color philosophy:
 *   - Dark forest background (not pure black — green-black undertone)
 *   - Augusta green for structural accent (logo glow, secondary actions)
 *   - Masters gold for CTAs, interactive elements, primary highlights
 *   - Warm cream for primary text (not harsh white)
 *   - Taupe for secondary text (not cold gray)
 *
 * Typography:
 *   - Headlines: Playfair Display (serif) — editorial, premium
 *   - Body/UI:   Inter (sans-serif) — clean, readable
 *   - Mono:      SF Mono / Fira Code / Cascadia Code — code blocks
 *
 * Naming convention (preserved from prior design system):
 *   - "BCC" is acceptable. "Morning Game" is acceptable.
 *   - NEVER reference "Bethesda Country Club" in public-facing text.
 *   - NEVER use real member names as placeholder text.
 *   - ForeTees domain URLs are functional and may remain.
 */

@import "./design-system/colors_and_type.css";

/* Masters typography — overrides Roboto from the M3 base */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Inter:wght@300;400;500;600;700&display=swap");


/* ══════════════════════════════════════════════════════════════════════
   1. M3 SYS-COLOR — Masters palette (dark forest expression)
   Overrides the BMRK indigo defaults. Every sys-color role is repainted
   so utility classes (and any future M3 components) inherit Masters
   automatically.
   ══════════════════════════════════════════════════════════════════════ */

:root, :root[data-theme="dark"], :root[data-theme="light"] {
  /* Primary — Masters gold. CTAs and primary interactive accent on dark. */
  --md-sys-color-primary:               #C9A96E;
  --md-sys-color-on-primary:            #040D07;
  --md-sys-color-primary-container:     #5C3D0F;
  --md-sys-color-on-primary-container:  #FDF6E3;

  /* Secondary — Augusta green. Structural / brand chroma. */
  --md-sys-color-secondary:               #0A8F5F;
  --md-sys-color-on-secondary:            #FDF6E3;
  --md-sys-color-secondary-container:     #006747;
  --md-sys-color-on-secondary-container:  #FDF6E3;

  /* Tertiary — sage. Informational accents. */
  --md-sys-color-tertiary:               #7C9885;
  --md-sys-color-on-tertiary:            #040D07;
  --md-sys-color-tertiary-container:     #1A4D2E;
  --md-sys-color-on-tertiary-container:  #FDF6E3;

  /* Error — crimson, brightened for AA on dark. */
  --md-sys-color-error:                  #C53030;
  --md-sys-color-on-error:               #FDF6E3;
  --md-sys-color-error-container:        rgba(197, 48, 48, 0.18);
  --md-sys-color-on-error-container:     #FDF6E3;

  /* Surfaces — dark forest, lifted in tiers. */
  --md-sys-color-background:                  #040D07;
  --md-sys-color-on-background:               #E8E0D0;
  --md-sys-color-surface:                     #040D07;
  --md-sys-color-on-surface:                  #E8E0D0;
  --md-sys-color-surface-variant:             #0E2517;
  --md-sys-color-on-surface-variant:          #A89F8E;

  --md-sys-color-surface-dim:                 #040D07;
  --md-sys-color-surface-bright:              #1A2620;
  --md-sys-color-surface-container-lowest:    #040D07;
  --md-sys-color-surface-container-low:       #091A0F;
  --md-sys-color-surface-container:           #0E2517;
  --md-sys-color-surface-container-high:      #1A2620;
  --md-sys-color-surface-container-highest:   #232E27;

  --md-sys-color-outline:          #6B6358;
  --md-sys-color-outline-variant:  rgba(201, 169, 110, 0.12);

  --md-sys-color-inverse-surface:     #FDF6E3;
  --md-sys-color-inverse-on-surface:  #040D07;
  --md-sys-color-inverse-primary:     #006747;

  --md-sys-color-scrim:   #000000;
  --md-sys-color-shadow:  #000000;
}


/* ══════════════════════════════════════════════════════════════════════
   2. M3 TYPESCALE — Masters typography (Playfair + Inter)
   Overrides the Roboto defaults. The M3 .display-*, .headline-*, .title-*,
   .body-*, .label-* classes from colors_and_type.css now render in Masters
   typography automatically.
   ══════════════════════════════════════════════════════════════════════ */

:root, :root[data-theme="dark"], :root[data-theme="light"] {
  --md-sys-typescale-brand: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --md-sys-typescale-plain: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --md-sys-typescale-mono:  'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
}


/* ══════════════════════════════════════════════════════════════════════
   3. LEGACY ALIASES
   These keep existing inline styles like `var(--bg)` / `var(--gold)` /
   `var(--serif)` working. Each alias points at the corresponding M3 sys
   role, so the M3 layer remains the single source of truth.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Background scale */
  --bg:        var(--md-sys-color-background);             /* #040D07 */
  --bg2:       var(--md-sys-color-surface-container-low);   /* #091A0F */
  --bg3:       var(--md-sys-color-surface-container);       /* #0E2517 */
  --bg-glass:  rgba(4, 13, 7, 0.88);

  /* Brand: Augusta green */
  --green:        var(--md-sys-color-secondary-container);  /* #006747 */
  --green-lt:     var(--md-sys-color-secondary);            /* #0A8F5F */
  --green-glow:   rgba(0, 103, 71, 0.15);
  --green-dim:    rgba(0, 103, 71, 0.10);

  /* Brand: Masters gold */
  --gold:      var(--md-sys-color-primary);                 /* #C9A96E */
  --gold-lt:   #D4BC8A;
  --gold-dim:  rgba(201, 169, 110, 0.10);

  /* Text */
  --cream:  #FDF6E3;
  --text:   var(--md-sys-color-on-surface);                 /* #E8E0D0 */
  --sub:    var(--md-sys-color-on-surface-variant);         /* #A89F8E */
  --muted:  var(--md-sys-color-outline);                    /* #6B6358 */

  /* Borders */
  --border:        var(--md-sys-color-outline-variant);
  --border-green:  rgba(0, 103, 71, 0.25);
  --border-gold:   rgba(201, 169, 110, 0.25);

  /* Status colors */
  --success:  var(--md-sys-color-secondary);                /* #0A8F5F */
  --warning:  #B7791F;
  --error:    var(--md-sys-color-error);                    /* #C53030 */
  --info:     var(--md-sys-color-tertiary);                 /* #7C9885 */

  /* Typography */
  --serif:  var(--md-sys-typescale-brand);
  --sans:   var(--md-sys-typescale-plain);
  --mono:   var(--md-sys-typescale-mono);

  /* Spacing — 4px base (kept for compat; M3 spacing tokens also available) */
  --sp-1:   4px;   --sp-2:   8px;   --sp-3:  12px;  --sp-4:  16px;
  --sp-5:  20px;   --sp-6:  24px;   --sp-7:  28px;  --sp-8:  32px;
  --sp-10: 40px;   --sp-12: 48px;   --sp-14: 56px;  --sp-16: 64px;
  --sp-20: 80px;   --sp-24: 96px;

  /* Radius */
  --radius-sm:    var(--md-sys-shape-corner-extra-small);   /* 4px  */
  --radius-md:    var(--md-sys-shape-corner-small);         /* 8px  */
  --radius-lg:    var(--md-sys-shape-corner-medium);        /* 12px */
  --radius-xl:    var(--md-sys-shape-corner-large);         /* 16px */
  --radius-full:  var(--md-sys-shape-corner-full);          /* 999px */

  /* Shadows */
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.20);
  --shadow-gold:   0 2px 12px rgba(201, 169, 110, 0.20);
  --shadow-green:  0 0 12px rgba(0, 103, 71, 0.30);

  /* Transitions */
  --ease-default:  0.3s ease;
  --ease-fast:     0.15s ease;
  --ease-spring:   0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ══════════════════════════════════════════════════════════════════════
   4. RESET & BASE
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: rgba(0, 103, 71, 0.3); color: var(--cream); }
a { color: inherit; }
img { max-width: 100%; display: block; }


/* ══════════════════════════════════════════════════════════════════════
   5. TYPOGRAPHY — base headings (override the M3 Roboto-shaped defaults)
   ══════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--cream);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h1 {
  font-size: clamp(40px, 6.5vw, 76px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
h1 em { font-style: italic; color: var(--gold); font-weight: 400; }
h2 { font-size: clamp(26px, 3.5vw, 42px); font-weight: 700; }
h3 { font-size: clamp(18px, 2vw, 22px); font-weight: 700; }

.section-label {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.section-sub {
  font-size: 16px;
  color: var(--sub);
  max-width: 460px;
  line-height: 1.7;
}


/* ══════════════════════════════════════════════════════════════════════
   6. BUTTONS
   ══════════════════════════════════════════════════════════════════════ */

.btn-primary {
  background: var(--gold); color: var(--bg);
  font-family: var(--sans); font-weight: 700; font-size: 13px;
  padding: 15px 36px; border-radius: var(--radius-md); border: none;
  text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer; transition: all var(--ease-default);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover {
  background: var(--gold-lt); transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(201, 169, 110, 0.3);
}
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-ghost {
  background: transparent; color: var(--text);
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  padding: 15px 36px; border-radius: var(--radius-md);
  border: 1px solid var(--border); text-decoration: none;
  letter-spacing: 0.02em; cursor: pointer;
  transition: all var(--ease-default);
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.btn-ghost:hover { border-color: var(--border-gold); background: var(--gold-dim); }

.btn-green {
  background: var(--green); color: var(--cream);
  font-family: var(--sans); font-weight: 700; font-size: 13px;
  padding: 12px 28px; border-radius: var(--radius-md); border: none;
  text-decoration: none; cursor: pointer;
  transition: all var(--ease-default); box-shadow: var(--shadow-green);
}
.btn-green:hover { background: var(--green-lt); transform: translateY(-1px); }


/* ══════════════════════════════════════════════════════════════════════
   7. FORMS
   ══════════════════════════════════════════════════════════════════════ */

.form-group { margin-bottom: var(--sp-4); text-align: left; }
.form-group label {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--sub); margin-bottom: 6px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.form-input {
  width: 100%; background: var(--bg3);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 12px 16px; color: var(--cream);
  font-size: 14px; font-family: var(--sans);
  outline: none; transition: border-color var(--ease-default);
}
.form-input:focus { border-color: rgba(201, 169, 110, 0.4); }
.form-input::placeholder { color: var(--muted); }
select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6358' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}


/* ══════════════════════════════════════════════════════════════════════
   8. CARDS
   ══════════════════════════════════════════════════════════════════════ */

.card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-7);
  transition: border-color var(--ease-default), transform var(--ease-default);
}
.card:hover { border-color: var(--border-gold); }
.card-interactive:hover { transform: translateY(-2px); }
.card-green { border-color: var(--border-green); }
.card-green:hover { border-color: rgba(0, 103, 71, 0.4); }


/* ══════════════════════════════════════════════════════════════════════
   9. SHARED NAV — used by all public pages (.site-nav)
   Markup contract:
     <nav class="site-nav">
       <a class="nav-brand" href="/"><img src="/icon.png" alt="…" /> BookATeeTime</a>
       <div class="nav-links">
         <a href="/install">Install</a>
         <a href="/privacy" class="active">Privacy</a>
         <a href="/member" class="nav-accent">Member Portal</a>
       </div>
       <a href="#cta" class="nav-cta">Request Access</a>   <!-- optional -->
     </nav>
   ══════════════════════════════════════════════════════════════════════ */

.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5) var(--sp-12);
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.site-nav .nav-brand {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--serif); font-weight: 700; font-size: 18px;
  color: var(--cream); letter-spacing: 0.01em; text-decoration: none;
}
.site-nav .nav-brand img,
.site-nav .nav-logo {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-green); object-fit: cover;
}
.site-nav .nav-links { display: flex; gap: var(--sp-8); align-items: center; }
.site-nav .nav-links a {
  color: var(--sub); text-decoration: none;
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  transition: color var(--ease-default);
}
.site-nav .nav-links a:hover,
.site-nav .nav-links a.active { color: var(--cream); }
.site-nav .nav-links a.nav-accent { color: var(--gold); }
.site-nav .nav-cta {
  background: var(--gold); color: var(--bg); font-weight: 700; font-size: 12px;
  padding: 9px 22px; border-radius: var(--radius-sm); text-decoration: none;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: all var(--ease-default); box-shadow: var(--shadow-gold);
}
.site-nav .nav-cta:hover { background: var(--gold-lt); transform: translateY(-1px); }
.site-nav .nav-right {
  display: flex; align-items: center; gap: var(--sp-4);
}


/* ══════════════════════════════════════════════════════════════════════
   10. SHARED FOOTER — used by all public pages (.site-footer)
   Markup contract:
     <footer class="site-footer">
       <span>© 2026 BookATeeTime · Morning Game</span>
       <div class="footer-links">
         <a href="/">Home</a> <a href="/install">Install</a> …
       </div>
     </footer>
   ══════════════════════════════════════════════════════════════════════ */

.site-footer {
  border-top: 1px solid var(--border);
  text-align: center;
  padding: var(--sp-10) var(--sp-6);
  color: var(--muted);
  font-size: 12px;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
}
.site-footer span { color: var(--sub); }
.site-footer a {
  color: var(--muted); text-decoration: none;
  transition: color var(--ease-default);
}
.site-footer a:hover { color: var(--gold); }
.site-footer .footer-links {
  display: flex; gap: var(--sp-5); flex-wrap: wrap; justify-content: center;
}


/* ══════════════════════════════════════════════════════════════════════
   11. STATUS INDICATORS & BADGES
   ══════════════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 5px 14px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-gold {
  background: var(--gold-dim); border: 1px solid rgba(201, 169, 110, 0.2);
  color: var(--gold);
}
.badge-green {
  background: var(--green-dim); border: 1px solid rgba(0, 103, 71, 0.2);
  color: var(--green-lt);
}
.badge-error {
  background: rgba(197, 48, 48, 0.1); border: 1px solid rgba(197, 48, 48, 0.2);
  color: var(--error);
}
.badge-pulse::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; animation: ds-pulse 2s infinite;
}
@keyframes ds-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }


/* ══════════════════════════════════════════════════════════════════════
   12. CODE / LOG BLOCKS
   ══════════════════════════════════════════════════════════════════════ */

.code-block {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.code-block-bar {
  background: var(--bg3); padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 11px; color: var(--muted); letter-spacing: 0.04em;
}
.code-block-bar .dot { width: 9px; height: 9px; border-radius: 50%; }
.code-block-bar .dot-r { background: #9B2C2C; }
.code-block-bar .dot-y { background: var(--warning); }
.code-block-bar .dot-g { background: var(--green); }
.code-block-body {
  padding: var(--sp-5) var(--sp-6);
  font-family: var(--mono); font-size: 12px; line-height: 2;
}


/* ══════════════════════════════════════════════════════════════════════
   13. ANIMATIONS
   ══════════════════════════════════════════════════════════════════════ */

@keyframes ds-fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ds-slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade   { animation: ds-fadeIn 0.6s ease both; }
.animate-slide  { animation: ds-slideUp 0.8s ease both; }
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }


/* ══════════════════════════════════════════════════════════════════════
   14. RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .site-nav { padding: var(--sp-4) var(--sp-5); }
  .site-nav .nav-links { display: none; }
  .site-nav .nav-cta { font-size: 11px; padding: 8px 16px; }
}

@media (max-width: 640px) {
  h1 { font-size: clamp(32px, 8vw, 48px); }
  h2 { font-size: clamp(22px, 5vw, 32px); }
}