/* ============================================================
   BLUE GEM REALTY — DESIGN TOKENS
   Single source of truth for color, type, spacing, and shape.
   Derived from the logo: deep coastal navy + sea teal, with a
   warm sand-gold accent for CTAs and highlights.

   USAGE: import once at the app root (frontend/src/index.js or
   public/index.html for admin). Reference everywhere via var(--*).
   Never hardcode a hex value in a component — add it here.
   ============================================================ */

:root {
  /* ---- Brand core (from logo) ---- */
  --navy:        #173A5E;  /* primary brand — "BLUE GEM" wordmark, roof/boat mark */
  --navy-deep:   #102A45;  /* darker navy — footers, headers, overlays */
  --navy-ink:    #14283D;  /* body text (navy-tinted, never pure black) */
  --teal:        #3F8F86;  /* secondary brand — "REALTY", palms, arch */
  --teal-soft:   #5FA89F;  /* lighter teal — hovers, soft fills */

  /* ---- Accent (warm sand-gold; soft coral kept as alt) ---- */
  --sand:        #C8995A;  /* primary CTA / highlight */
  --sand-deep:   #B07F3F;  /* CTA hover */
  --sand-soft:   #E4D2B0;  /* gold tints, badges */
  --coral:       #E08A6E;  /* optional alt accent (use sparingly) */

  /* ---- Neutrals (warm, coastal — not stark) ---- */
  --paper:       #FBF9F5;  /* page background (warm off-white) */
  --surface:     #FFFFFF;  /* cards, panels */
  --line:        #E7E1D6;  /* warm hairline borders */
  --muted:       #5E7283;  /* secondary text, captions */
  --muted-soft:  #8A99A6;  /* tertiary text, placeholders */

  /* ---- Tinted section backgrounds (for visual rhythm) ---- */
  --sea-tint:    #EAF2F0;  /* teal-tinted band */
  --navy-tint:   #EAF0F6;  /* navy-tinted band */
  --sand-tint:   #F6EFE2;  /* sand-tinted band */

  /* ---- Status ---- */
  --success:     #3F8F86;
  --warning:     #C8995A;
  --danger:      #C2543E;

  /* ---- Typography ---- */
  /* Display: Fraunces (characterful editorial serif). Body: Plus Jakarta Sans. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --weight-body:    400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-display: 600;  /* Fraunces optical weight for headlines */

  --fs-hero:   clamp(2.4rem, 5.5vw, 4rem);
  --fs-h1:     clamp(2rem, 4vw, 2.9rem);
  --fs-h2:     clamp(1.5rem, 3vw, 2.1rem);
  --fs-h3:     1.3rem;
  --fs-body:   1.0625rem;   /* 17px */
  --fs-small:  0.875rem;
  --fs-micro:  0.75rem;
  --lh-tight:  1.15;
  --lh-body:   1.7;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 3.5rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --section-padding: 5rem 0;       /* vertical rhythm for sections */
  --container-max: 1240px;
  --content-max: 720px;            /* text-heavy sections */

  /* ---- Shape & elevation ---- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16,42,69,0.06), 0 2px 8px rgba(16,42,69,0.05);
  --shadow:    0 6px 24px rgba(16,42,69,0.10);
  --shadow-lg: 0 18px 48px rgba(16,42,69,0.16);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.28s;

  /* ---- Gradients & photo scrims (coastal depth) ---- */
  --grad-navy:   linear-gradient(135deg, #173A5E 0%, #102A45 100%);
  --grad-sea:    linear-gradient(135deg, #173A5E 0%, #3F8F86 100%);
  --grad-sand:   linear-gradient(135deg, #C8995A 0%, #B07F3F 100%);
  /* Hero scrim: darker at the bottom so overlaid white text stays legible */
  --scrim-hero:  linear-gradient(180deg, rgba(16,42,69,0.30) 0%, rgba(16,42,69,0.34) 42%, rgba(16,42,69,0.78) 100%);
  /* Directional scrim: anchors a left-aligned hero — dark under the copy,
     clearing toward the right so the photo breathes. Layer over --scrim-hero. */
  --scrim-hero-side: linear-gradient(98deg, rgba(16,42,69,0.86) 0%, rgba(16,42,69,0.66) 32%, rgba(16,42,69,0.30) 58%, rgba(16,42,69,0) 84%);
  /* Centered hero scrim: even darkening (a touch heavier top & bottom) so a
     centered headline stays legible over any rotating background photo. */
  --scrim-hero-center: linear-gradient(180deg, rgba(16,42,69,0.58) 0%, rgba(16,42,69,0.40) 45%, rgba(16,42,69,0.60) 100%);
  --scrim-card:  linear-gradient(180deg, rgba(16,42,69,0) 35%, rgba(16,42,69,0.82) 100%);
}