/* ============================================================================
   VOLANTE — Colors & Type foundations
   High-end consultancy. Dark-first, metallic gold, futuristic-luxury.
   Aesthetic reference: gold-on-black shield mark + "DarkStar" dark theme DNA.

   Fonts are loaded from Google Fonts (see @import). These are documented
   SUBSTITUTIONS approximating the brand wordmark + a true-dark theme:
     - Jost          → geometric, Futura-like display matching the wide,
                       evenly-stroked VOLANTE wordmark (perfect-circle "O").
     - Manrope       → clean modern grotesque for body / UI.
     - JetBrains Mono→ technical / data / dashboard numerals + code.
   If you have the brand's licensed fonts, swap the @font-face/vars below.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------------------------------------------------------------- COLOR */
  /* — Metallic gold (the brand signature). The mark is a metal gradient,
       so gold is expressed BOTH as flat tokens and as a gradient. — */
  --gold-deep:      #8A6B22;   /* shadow / antique edge of the metal      */
  --gold:           #C9A24B;   /* PRIMARY brand gold — flat use           */
  --gold-bright:    #E3C271;   /* lit face of the metal                   */
  --gold-champagne: #F6EBC4;   /* specular highlight / near-white gold    */
  --gold-ink:       #1A1305;   /* text/icon color ON gold surfaces        */

  /* The metallic sweep — use for the mark, key headlines, hairline rules. */
  --grad-gold: linear-gradient(
      105deg,
      #8A6B22 0%,
      #C9A24B 26%,
      #F6EBC4 50%,
      #C9A24B 74%,
      #7E5F1C 100%);
  /* A calmer vertical gold for fills (buttons, chips). */
  --grad-gold-soft: linear-gradient(180deg, #E3C271 0%, #C9A24B 55%, #A37E2C 100%);

  /* — True-dark surface ramp (slightly warm-neutral black, dark-FIRST). — */
  --bg:        #0A0A0B;   /* page base — the "void"                      */
  --surface-1: #111113;   /* raised section / large panels               */
  --surface-2: #18181B;   /* cards                                       */
  --surface-3: #202024;   /* card hover / inset wells / inputs           */
  --surface-4: #2A2A30;   /* highest elevation, menus                    */

  /* — Hairlines & dividers (light-on-dark, very restrained). — */
  --line:        rgba(255,255,255,0.08);  /* default divider             */
  --line-strong: rgba(255,255,255,0.14);  /* card border                 */
  --line-gold:   rgba(201,162,75,0.38);   /* gold hairline / focus edge  */

  /* — Foreground / text ramp. Pure white is used sparingly. — */
  --fg:        #F5F5F4;   /* primary text / headlines                    */
  --fg-strong: #FFFFFF;   /* max-emphasis on imagery                     */
  --fg-muted:  #A1A19C;   /* secondary text, captions                    */
  --fg-faint:  #6B6B66;   /* meta, disabled, placeholder                 */

  /* — Semantic (kept desaturated to sit inside the dark luxury world). — */
  --success: #6FBF8E;
  --warning: #E3C271;   /* reuses brand gold family                      */
  --danger:  #D9786B;
  --info:    #7FA6C9;

  /* — Glows & shadows (luxury = soft depth + a faint gold bloom). — */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.65);
  --glow-gold: 0 0 0 1px rgba(201,162,75,0.30), 0 8px 40px rgba(201,162,75,0.16);

  /* ----------------------------------------------------------------- TYPE */
  --font-display: 'Jost', 'Century Gothic', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Display tracking — the wordmark lives on WIDE tracking. */
  --track-hero:   0.18em;   /* eyebrows, the VOLANTE wordmark feel        */
  --track-tight:  -0.01em;  /* big headlines                              */
  --track-body:    0;

  /* Type scale (1.250 major-third-ish, tuned for big dark heroes). */
  --fs-display: clamp(3rem, 7vw, 6rem);   /* hero mega-text              */
  --fs-h1: clamp(2.25rem, 4.5vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.65;

  /* -------------------------------------------------------------- LAYOUT */
  --radius-sm: 4px;
  --radius:    8px;    /* default card / button radius — restrained       */
  --radius-lg: 14px;
  --radius-pill: 999px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --maxw: 1240px;        /* content container                            */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);  /* calm, expensive ease-out */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 420ms;          /* slow, deliberate luxury timing               */
}

/* ============================ SEMANTIC ELEMENT STYLES ==================== */
/* Optional opinionated defaults — include this file and you get the look.   */

.v-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-hero);
  text-transform: uppercase;
  color: var(--gold-bright);
}

.v-display {
  font-family: var(--font-display);
  font-weight: 300;               /* the wordmark is LIGHT + wide         */
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg);
  text-wrap: balance;
}

h1, .v-h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--track-tight); color: var(--fg); }
h2, .v-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--fg); }
h3, .v-h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--fg); }
h4, .v-h4 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--fg); letter-spacing: 0.02em; }

p, .v-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-muted); }
.v-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--fg-muted); font-family: var(--font-body); }
.v-small { font-size: var(--fs-sm); color: var(--fg-muted); font-family: var(--font-body); }

.v-mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.02em; }
code, .v-code { font-family: var(--font-mono); font-size: 0.9em; color: var(--gold-bright); background: var(--surface-3); padding: 0.12em 0.4em; border-radius: var(--radius-sm); }

/* The signature: gold metallic text fill for hero accents. */
.v-gold-text {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}