/* ============================================================
   GYPSY REVERIE — COLORS & TYPE
   Ferocious. Elegant. Alive.
   ============================================================
   Source: uploads/Gypsy Reverie Brand Guidelines.pdf
   ============================================================ */

/* -- Webfont imports ---------------------------------------- */
/* TAN Nightingale (display) — local OTF, official brand font  */
/* Portal (subhead) — local OTF, official brand font           */
/* Playfair Display (body) — local variable TTF, official      */
@font-face {
  font-family: "TAN Nightingale";
  src: url("./fonts/TAN-NIGHTINGALE-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Portal";
  src: url("./fonts/Portal.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("./fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("./fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ----- BRAND COLORS (verbatim from guidelines) ----------- */
  --gr-obsidian:      #101518; /* near-black, primary ground   */
  --gr-black-cherry:  #4A1528; /* deep wine                    */
  --gr-red-velvet:    #8C1D18; /* rich red                     */
  --gr-merlot:        #952A0A; /* burnt red-brown              */
  --gr-vermillion:    #B92A1C; /* hot red                      */
  --gr-scarlet:       #B8390C; /* fire-orange red              */
  --gr-spark:         #FB941B; /* flame orange                 */
  --gr-candleglow:    #FAC736; /* gold / candlelight           */
  --gr-ivory:         #F5EFE6; /* warm off-white               */

  /* ----- COLOR RANGE (tints/shades; ~25/50/75% mixes) ------ */
  --gr-obsidian-25:   #4D5256;
  --gr-obsidian-50:   #898C8E;
  --gr-obsidian-75:   #C5C7C8;
  --gr-obsidian-d50:  #08090B;

  --gr-black-cherry-25: #76505F;
  --gr-black-cherry-50: #A48B96;
  --gr-black-cherry-75: #D2C5CB;
  --gr-black-cherry-d50: #25090E;

  --gr-candleglow-25: #FBD161;
  --gr-candleglow-50: #FCDD8C;
  --gr-candleglow-75: #FDE9B7;
  --gr-candleglow-d50: #B8901E;

  --gr-spark-25:      #FCA744;
  --gr-spark-50:      #FDBA6D;
  --gr-spark-d25:     #C76F0F;

  --gr-ivory-d10:     #E6DFD2; /* hairline on ivory            */

  /* ----- SEMANTIC COLOR ROLES ------------------------------ */
  --bg:               var(--gr-obsidian);    /* default ground */
  --bg-deep:          #15191D;               /* warmed deep ground (no pure black) */
  --bg-wine:          var(--gr-black-cherry);
  --bg-ivory:         var(--gr-ivory);

  --fg-1:             var(--gr-ivory);       /* primary text on dark */
  --fg-2:             #C9C2B6;               /* secondary text on dark */
  --fg-3:             #8C857A;               /* tertiary / metadata */
  --fg-on-ivory-1:    var(--gr-obsidian);    /* primary text on ivory */
  --fg-on-ivory-2:    #3A3F43;
  --fg-on-ivory-3:    #6B6F73;

  --accent:           var(--gr-candleglow);  /* primary accent — gold */
  --accent-hot:       var(--gr-spark);       /* secondary accent — flame */
  --accent-deep:      var(--gr-red-velvet);  /* deep accent — red velvet */

  --border:           rgba(245, 239, 230, 0.12); /* hairline on dark */
  --border-strong:    rgba(245, 239, 230, 0.24);
  --border-on-ivory:  rgba(16, 21, 24, 0.12);

  /* ----- TYPE FAMILIES ------------------------------------- */
  --font-display:     "TAN Nightingale", "Playfair Display", Georgia, serif;
  --font-portal:      "Portal", "Tenor Sans", "Optima", serif;        /* decorative — use LOWERCASE only */
  --font-subhead:     "Portal", "Tenor Sans", Optima, serif; /* small caps / labels / nav (uppercase OK) */
  --font-body:        "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono:        "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* ----- TYPE SCALE (1920 reference, fluid via clamp) ------ */
  --fs-display-xl:    clamp(56px, 8.5vw, 152px); /* hero "GYPSY REVERIE" */
  --fs-display-lg:    clamp(44px, 6vw, 104px);
  --fs-display-md:    clamp(36px, 4.4vw, 72px);
  --fs-h1:            clamp(36px, 4vw, 64px);
  --fs-h2:            clamp(28px, 2.8vw, 44px);
  --fs-h3:            clamp(22px, 2vw, 30px);
  --fs-subhead:       clamp(13px, 1vw, 16px);   /* spaced caps */
  --fs-body-lg:       clamp(18px, 1.3vw, 22px);
  --fs-body:          clamp(15px, 1vw, 17px);
  --fs-meta:          13px;

  /* ----- LINE HEIGHT --------------------------------------- */
  --lh-tight:         1.0;
  --lh-display:       1.05;
  --lh-heading:       1.15;
  --lh-body:          1.55;
  --lh-loose:         1.75;

  /* ----- LETTER SPACING ------------------------------------ */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-caps:    0.22em;   /* subheading caps look */
  --tracking-mega:    0.32em;   /* hero subhead "FEROCIOUS. ELEGANT. ALIVE." */

  /* ----- SPACING (8pt base, with extras for editorial) ----- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;
  --sp-11: 192px;

  /* ----- RADII --------------------------------------------- */
  --r-0: 0px;        /* default — most surfaces are sharp */
  --r-1: 2px;        /* hairline rounding for tags        */
  --r-2: 4px;
  --r-pill: 999px;

  /* ----- ELEVATION / GLOW (warm, never blue) -------------- */
  --shadow-1: 0 1px 0 0 rgba(0,0,0,0.4);
  --shadow-2: 0 12px 32px -12px rgba(0,0,0,0.7);
  --shadow-3: 0 28px 64px -20px rgba(0,0,0,0.8);
  --glow-candle: 0 0 0 1px rgba(250,199,54,0.22), 0 0 32px -4px rgba(250,199,54,0.45);
  --glow-spark:  0 0 0 1px rgba(251,148,27,0.30), 0 0 36px -6px rgba(251,148,27,0.55);
  --glow-velvet: 0 0 48px -12px rgba(140,29,24,0.55);

  /* ----- MOTION (controlled, never bouncy) ---------------- */
  --ease-candle:  cubic-bezier(0.22, 0.61, 0.36, 1);   /* slow rise */
  --ease-strike:  cubic-bezier(0.7, 0, 0.2, 1);        /* attack    */
  --dur-1: 160ms;
  --dur-2: 280ms;
  --dur-3: 480ms;
  --dur-slow: 900ms;
}

/* -- BASE -------------------------------------------------- */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* -- SEMANTIC TYPE STYLES --------------------------------- */
.gr-display-xl,
.gr-display-lg,
.gr-display-md,
.gr-h1, .gr-h2, .gr-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.gr-display-xl { font-size: var(--fs-display-xl); line-height: 0.95; }
.gr-display-lg { font-size: var(--fs-display-lg); }
.gr-display-md { font-size: var(--fs-display-md); }
.gr-h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); }
.gr-h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
.gr-h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); }

.gr-subhead {
  font-family: var(--font-subhead);
  font-size: var(--fs-subhead);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-2);
  font-weight: 400;
}

.gr-eyebrow {
  font-family: var(--font-portal);
  font-size: 18px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  font-weight: 400;
}

.gr-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--fg-1); font-style: italic; font-weight: 400; }
.gr-body    { font-size: var(--fs-body);    line-height: var(--lh-body); color: var(--fg-1); }
.gr-meta    { font-size: var(--fs-meta);    line-height: var(--lh-heading); color: var(--fg-3); font-family: var(--font-subhead); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

/* In-text link — underline, candleglow on hover */
.gr-link {
  color: var(--fg-1);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent);
  transition: color var(--dur-1) var(--ease-candle);
}
.gr-link:hover { color: var(--accent); }

/* CTA arrow link */
.gr-link-arrow {
  font-family: var(--font-subhead);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--fs-subhead);
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.gr-link-arrow .arrow {
  display: inline-block;
  transition: transform var(--dur-2) var(--ease-strike);
}
.gr-link-arrow:hover .arrow { transform: translateX(6px); }