/* ============================================================
   BRIGHTLY RIDES — Core Design Tokens
   Luxury transportation · Miami | Orlando
   Black + metallic gold, inscriptional serif + geometric sans.
   ============================================================ */

/* ---- Fonts (per Brightly Rides brand guide: Playfair Display + Montserrat) ---- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ============ BRAND COLOR ============ */
  --ink-900: #0A0A0A;   /* NEGRO — primary ground */
  --ink-850: #0F0F0F;
  --ink-800: #141414;   /* raised surface */
  --ink-750: #1A1A1A;
  --ink-700: #202020;   /* card */
  --ink-600: #2A2A2A;   /* hairline-heavy surface */
  --ink-500: #393939;   /* borders / dividers */
  --ink-400: #555555;   /* muted strokes */
  --true-black: #000000;

  /* DORADO CHAMPAGNE ramp (#D4AF37 primary) */
  --gold-100: #F7EBB8;  /* champagne highlight */
  --gold-200: #ECD98F;
  --gold-300: #E0C463;
  --gold-400: #D4AF37;  /* PRIMARY brand gold — dorado champagne */
  --gold-500: #BB962B;
  --gold-600: #9A7A20;  /* antique gold */
  --gold-700: #6F5816;  /* bronze shadow */
  --gold: var(--gold-400);

  /* Metallic gradient — for the wordmark, rules, premium accents */
  --gold-sheen: linear-gradient(135deg, #F7EBB8 0%, #E0C463 26%, #D4AF37 52%, #9A7A20 78%, #6F5816 100%);
  --gold-sheen-h: linear-gradient(90deg, #6F5816 0%, #D4AF37 22%, #F7EBB8 50%, #D4AF37 78%, #6F5816 100%);
  --gold-line: linear-gradient(90deg, rgba(212,175,55,0) 0%, var(--gold-400) 50%, rgba(212,175,55,0) 100%);

  /* VERDE OLIVO accent (#4B532E) — sparing use only */
  --sage-400: #6E7544;
  --sage-500: #4B532E;
  --sage: var(--sage-500);

  /* GRIS PLATA */
  --silver: #B8B8B8;

  /* Text */
  --fg-1: #FAF7EF;   /* warm white — primary text on dark */
  --fg-2: #C9C4B8;   /* secondary */
  --fg-3: #8E8A80;   /* muted / captions */
  --fg-4: #5E5B54;   /* faint */
  --fg-gold: var(--gold-300);
  --fg-on-gold: #1A1305; /* text on a gold fill */

  /* Light-mode surfaces (used on a few marketing sections) */
  --paper: #F7F3EA;       /* warm ivory */
  --paper-2: #EFE9DB;
  --ink-on-paper: #1A1813;
  --ink-on-paper-2: #5A554B;

  /* Semantic */
  --success: #6FAE6A;
  --warning: #D9A441;
  --danger:  #C8584B;
  --info:    #6E92B8;

  /* ============ TYPOGRAPHY ============ */
  --font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;  /* titles & logotype */
  --font-serif:   'Playfair Display', 'Garamond', Georgia, serif;           /* editorial / pull-quotes */
  --font-sans:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;        /* UI + labels + body */

  /* Type scale (1.250 major-third) */
  --t-display: 64px;
  --t-h1: 48px;
  --t-h2: 36px;
  --t-h3: 27px;
  --t-h4: 21px;
  --t-body-lg: 18px;
  --t-body: 16px;
  --t-sm: 14px;
  --t-xs: 12px;
  --t-overline: 12px;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.55;

  /* Letter-spacing — Playfair needs far less tracking than Cinzel */
  --ls-display: 0.01em;   /* Playfair display lockups */
  --ls-overline: 0.34em;  /* MIAMI | ORLANDO style labels */
  --ls-label: 0.18em;
  --ls-body: 0.005em;

  /* ============ SPACING (8pt) ============ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ============ RADII — restrained, near-square luxury ============ */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* ============ ELEVATION ============ */
  --sh-1: 0 1px 2px rgba(0,0,0,0.40);
  --sh-2: 0 6px 18px rgba(0,0,0,0.45);
  --sh-3: 0 18px 48px rgba(0,0,0,0.55);
  --sh-gold: 0 8px 28px rgba(212,175,55,0.22);
  --ring-gold: 0 0 0 1px rgba(212,175,55,0.55);
  --hairline: 1px solid var(--ink-500);
  --hairline-gold: 1px solid rgba(212,175,55,0.40);

  /* ============ MOTION ============ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* refined ease-out */
  --ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 480ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

.br-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg-1);
}

.br-h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); text-transform: uppercase; color: var(--fg-1); }
.br-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-h2); line-height: var(--lh-snug); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-1); }
.br-h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-h3); line-height: var(--lh-snug); letter-spacing: 0.01em; color: var(--fg-1); }
.br-h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-h4); line-height: var(--lh-snug); color: var(--fg-1); }

.br-overline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--gold-300);
}

.br-body-lg { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-body-lg); line-height: var(--lh-normal); color: var(--fg-2); }
.br-body    { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-body); line-height: var(--lh-normal); color: var(--fg-2); }
.br-serif-body { font-family: var(--font-serif); font-weight: 400; font-size: 20px; line-height: 1.5; color: var(--fg-2); }
.br-sm      { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-sm); line-height: var(--lh-normal); color: var(--fg-3); }
.br-label   { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-2); }

/* Gold metallic text treatment */
.br-gold-text {
  background: var(--gold-sheen-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-400);
}

/* The signature gold hairline rule flanking RIDES-style labels */
.br-rule {
  height: 1px;
  background: var(--gold-line);
  border: 0;
}