/* The « Enluminure » identity of the brand kit v3 (docs/v2/brand.md), over the pages' own styles: loaded after each page's
   <style>, it gives their custom properties the palette of the app (prototype/styles.css), light on vélin and dark on night,
   Cormorant Garamond for the titles, the system font for the text, and the kit's khatam lattice as the ground's texture. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/CormorantGaramond-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --outremer: #1B2C7A;
  --outremer-deep: #14215E;
  --outremer-glow: #3550B8;
  --or: #E2B860;
  --on-outremer: #FBF6EA;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;

  --bg-primary: #F4EDDD;
  --bg-secondary: #FBF6EA;
  --bg-card: #FBF6EA;
  --bg-card-hover: #FFFCF4;
  --text-primary: #1C1710;
  --text-secondary: #6B5A3A;
  --accent: #1B2C7A;
  --on-accent: #FBF6EA;
  --accent-glow: rgba(27, 44, 122, 0.10);
  --accent-subtle: rgba(27, 44, 122, 0.06);
  --gold: #8A6418;
  --gold-deep: #6E4F12;
  --gold-glow: rgba(226, 184, 96, 0.22);
  --border: rgba(138, 100, 24, 0.20);
  --rule-strong: rgba(138, 100, 24, 0.45);
  --nav-bg: rgba(244, 237, 221, 0.86);
  --lattice: url("/images/sabiko-khatam-gold.svg");
  --veil: rgba(244, 237, 221, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0D1230;
    --bg-secondary: #121838;
    --bg-card: #171D45;
    --bg-card-hover: #1F2652;
    --text-primary: #EFE6D0;
    --text-secondary: #B4A88C;
    --accent: #AEBBFF;
    --on-accent: #0D1230;
    --accent-glow: rgba(174, 187, 255, 0.14);
    --accent-subtle: rgba(174, 187, 255, 0.08);
    --gold: #D9B566;
    --gold-deep: #E2C27C;
    --gold-glow: rgba(226, 184, 96, 0.16);
    --border: rgba(226, 184, 96, 0.18);
    --rule-strong: rgba(226, 184, 96, 0.42);
    --nav-bg: rgba(13, 18, 48, 0.86);
    --lattice: url("/images/sabiko-khatam-ivory.svg");
    --veil: rgba(13, 18, 48, 0.6);
  }
}

/* Ground, type */
body {
  font-family: var(--font-ui);
  background-color: var(--bg-primary);
  background-image: linear-gradient(var(--veil), var(--veil)), var(--lattice);
  background-size: 192px 192px;
  color: var(--text-primary);
}
h1, h2, h3, .section-title, .nav-brand, .footer-brand {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
}
h1 { line-height: 1.04; }
h1 .highlight {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--gold);
  font-style: italic;
}
.section-label, .hero-badge {
  font-family: var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.page-container h1 { font-size: 40px; font-weight: 600; letter-spacing: 0; }
.page-container h2 { font-size: 24px; }
.page-container a, .page-container li a { color: var(--accent); }

/* Navigation and footer: the horizontal logo, the one matching the ground */
nav { background: var(--nav-bg); border-bottom: 1px solid var(--border); }
.nav-brand { gap: 0; }
.nav-brand img, .footer-brand img { display: block; height: 34px; width: auto; }
.footer-brand img { height: 30px; }
.brand-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  .brand-light { display: none !important; }
  .brand-dark { display: block !important; }
}
.nav-links a, .footer-links a, footer a { color: var(--text-secondary); }
.nav-links a:hover, .footer-links a:hover, footer a:hover { color: var(--text-primary); }
footer { border-top: 1px solid var(--border); }

/* The double gold filet with its lozenge, under a title */
.filet {
  display: flex; align-items: center; gap: 10px; width: 180px; margin: 0 auto 28px; color: var(--rule-strong);
}
.filet::before, .filet::after { content: ""; flex: 1; border-top: 1px solid currentColor; box-shadow: 0 3px 0 -2px currentColor; height: 4px; }
.filet i { width: 9px; height: 9px; background: var(--or); transform: rotate(45deg); flex: none; }

/* Hero */
.hero-badge { background: var(--gold-glow); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--gold-deep); }
.hero-symbol { display: block; width: 132px; height: auto; margin: 0 auto 28px; animation: float 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hero-symbol { animation: none; } }
.hero-subtitle, .section-subtitle { color: var(--text-secondary); }

/* Buttons */
.btn-download, .btn, .notfound a, .contact-btn {
  background: var(--outremer); color: var(--on-outremer);
  box-shadow: inset 0 0 0 1px rgba(226, 184, 96, 0.55);
}
.btn-download:hover, .notfound a:hover, .contact-btn:hover { box-shadow: inset 0 0 0 1px var(--or), 0 6px 22px rgba(27, 44, 122, 0.25); }
.btn-appstore { background: var(--text-primary); color: var(--bg-primary); }
.btn-appstore:hover { box-shadow: 0 8px 30px rgba(27, 44, 122, 0.18); }
.btn-secondary, .btn.btn-secondary {
  background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--rule-strong); box-shadow: none;
}
.btn-secondary:hover { background: var(--bg-card-hover); }

/* Cards */
.feature-card, .faq-item, .code-box {
  background: var(--bg-card); border: 1px solid var(--border); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
.feature-card:hover, .faq-item:hover { background: var(--bg-card-hover); border-color: var(--rule-strong); }
.feature-icon, .feature-icon.green, .feature-icon.gold, .feature-icon.blue, .feature-icon.purple, .feature-icon.rose, .feature-icon.teal {
  background: var(--accent-subtle); color: var(--accent); border: 1px solid var(--border);
}
.feature-icon svg, .faq-item h3 .icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.faq-item h3 .icon { display: inline-flex; vertical-align: -5px; margin-right: 6px; color: var(--accent); }
.faq-item h3 .icon svg { width: 20px; height: 20px; }
.step-number {
  background: var(--bg-card); border: 1px solid var(--rule-strong); color: var(--gold);
  font-family: var(--font-display); font-weight: 600; font-size: 28px;
  box-shadow: 0 0 0 4px var(--bg-primary), 0 0 0 5px var(--border);
}
.code-box { color: var(--text-primary); }

/* The call to action: an outremer plate with the lattice and the double gold filet, as the app's welcome */
.cta-card {
  position: relative; background-color: var(--outremer); background-image: url("/images/sabiko-khatam-ivory.svg");
  background-size: 192px 192px; border: 1px solid rgba(226, 184, 96, 0.6); color: var(--on-outremer); overflow: hidden;
}
.cta-card::after {
  content: ""; position: absolute; inset: 6px; border: 0.6px solid rgba(226, 184, 96, 0.4); border-radius: 10px; pointer-events: none;
}
.cta-card h2 { color: var(--on-outremer); font-size: 34px; }
.cta-card p { color: rgba(251, 246, 234, 0.78); }
.cta-card .card-symbol { display: block; width: 64px; height: auto; margin: 0 auto 18px; }
.cta-card .btn-download { background: var(--or); color: #241700; box-shadow: none; position: relative; z-index: 1; }
.cta-card .btn-download:hover { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28); }

/* Single-message pages (404, invitation) */
.page-symbol { display: block; width: 96px; height: auto; margin: 0 auto 24px; }
.notfound p, .subtitle, .hint { color: var(--text-secondary); }

/* Footer copyright at full strength: the pages' opacity would drop it under 4.5:1 on the new grounds */
.footer-copy, footer p { opacity: 1; color: var(--text-secondary); }

/* Support: the contact card as a vélin card, its icons the app's */
.contact-card { background: var(--bg-card); border: 1px solid var(--rule-strong); }
.contact-icon { display: inline-flex; color: var(--accent); margin-bottom: 12px; }
.contact-icon svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-container .contact-btn { color: var(--on-outremer); }

/* Invitation: the copy button and the three steps */
button.btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.join-steps {
  text-align: left; margin: 0 auto 1.75rem; padding: 0; max-width: 300px; list-style: none; counter-reset: step;
  color: var(--text-secondary); font-size: 0.95rem; line-height: 1.5;
}
.join-steps li { counter-increment: step; display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.join-steps li::before {
  content: counter(step); flex: none; width: 24px; height: 24px; display: inline-grid; place-items: center;
  border: 1px solid var(--rule-strong); border-radius: 50%; color: var(--gold);
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
}