/*
 * GRÁY brand layer.
 *
 * Loaded after tailwind.css from base.html. Defines:
 *   - Wine + champagne palette tokens (separate from the workhorse
 *     indigo/slate theme used across the day-to-day admin UI).
 *   - Jost @import for the wordmark and tagline (matches the supplied
 *     marketing logo's geometric thin sans).
 *   - Reusable .brand-wordmark / .brand-tagline / .brand-hero helpers
 *     for places that should feel premium (login, welcome,
 *     /p/services hero, 404/500). Day-to-day pages keep using indigo;
 *     these tokens are scoped to "brand moments".
 */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500&display=swap');

:root {
  /* Brand palette — wine + champagne. Deep oxblood reds with a warm
     metallic accent. Used only on brand surfaces; the rest of the
     admin keeps the existing accessibility-oriented indigo theme. */
  --brand-wine-deep:    #3A0810;
  --brand-wine-mid:     #5C0E1B;
  --brand-wine-bright:  #8B1124;
  --brand-champagne:    #C9B89D;
  --brand-cream:        #E8DBC2;
  --brand-charcoal:     #1A0508;
}

/* The wordmark itself — Jost light, all-caps, wide. Acute over the A
   is a unicode literal in the markup ("GRÁY"), not a custom path —
   keeps the file selectable text + searchable. */
.brand-wordmark {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size: 56px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--brand-champagne);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.brand-wordmark--small {
  font-size: 24px;
  letter-spacing: 0.06em;
}

.brand-wordmark--xl {
  font-size: 88px;
  letter-spacing: 0.05em;
}

.brand-tagline {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brand-cream);
  opacity: 0.85;
  margin-top: 8px;
}

/* Hero surface — wine vignette. The radial gradient mimics the
   supplied photography (red marble lit from one side). Don't use on
   day-to-day pages; reserved for login / welcome / /p/services hero. */
.brand-hero {
  position: relative;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(139, 17, 36, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(58, 8, 16, 0.55) 0%, transparent 70%),
    linear-gradient(135deg, var(--brand-wine-deep) 0%, var(--brand-charcoal) 100%);
  color: var(--brand-cream);
}

.brand-hero a {
  color: var(--brand-cream);
}

.brand-hero a:hover {
  color: var(--brand-champagne);
}

/* Phone breakpoint. The wide all-caps wordmark + tracked tagline don't
   fit on ~320–400px screens at the desktop sizes; scale down + tighten
   tracking so the brand doesn't overflow horizontally on iPhone SE,
   compact Android, narrow split-screen modes. */
@media (max-width: 480px) {
  .brand-wordmark { font-size: 36px; }
  .brand-wordmark--xl { font-size: 56px; }
  .brand-wordmark--small { font-size: 20px; }
  .brand-tagline { letter-spacing: 0.2em; font-size: 10px; }
  .brand-hero { padding-left: 16px !important; padding-right: 16px !important; }
}