/* ============================================================
   MLJET HILLS — LUXURY RESIDENCES · THEME CONFIG
   Single source of truth for fonts, colours and type roles.
   Edit here to restyle the whole site globally.
   (Load this BEFORE site.css on every page.)
   ============================================================ */

/* ---- Brand font: Beverly Drive Right (the only typeface family) ---- */
@font-face{font-family:'Beverly Drive Right';src:url('/fonts/BeverlyDriveRight-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Beverly Drive Right';src:url('/fonts/BeverlyDriveRight-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Beverly Drive Right';src:url('/fonts/BeverlyDriveRight-Black.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}

:root{
  /* ============ TYPOGRAPHY ============
     Base families ------------------------------------------- */
  --font-script:'Beverly Drive Right', Georgia, serif;   /* the brand display script */
  --font-serif: Georgia, 'Times New Roman', serif;        /* editorial reading text */
  --font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Roles — change a role to restyle everywhere of that kind.
     (e.g. set --font-heading: var(--font-script) to make every heading the brand script.) */
  --font-display: var(--font-script);   /* hero word, big decorative words      */
  --font-heading: var(--font-serif);     /* section titles, villa names           */
  --font-body:    var(--font-serif);     /* paragraphs / running copy             */
  --font-link:    var(--font-sans);      /* nav + “explore” links                 */
  --font-ui:      var(--font-sans);      /* eyebrows, labels, buttons, breadcrumb */

  /* legacy aliases used inside site.css */
  --serif: var(--font-serif);
  --script: var(--font-script);
  --sans: var(--font-sans);

  /* ============ COLOUR ============ */
  /* Brand gold — extracted from the logo via scripts/extract_gold.py */
  --gold:        #e6bc6e;
  --gold-light:  #f2e4bf;
  --gold-deep:   #dda959;
  --gold-ink:    #9a7634;   /* darkened gold for text / links on the light bg */

  /* Warm Mediterranean surface (saved — the background you liked) */
  --bg:    #f1e7d4;
  --bg-2:  #e8dabf;
  --bg-3:  #e2d0b0;

  --ink:      #3b3225;      /* warm dark brown text */
  --ink-soft: #6c5f4b;
  --muted:    #8a7b62;
  --line:     rgba(59,50,37,.16);
  --pine:     #4d5d44;
  --sea:      #2f6f6a;

  /* Login card — kept neutral so it doesn't add warmth over the warm photo */
  --login-card-bg:     rgba(22,22,26,.30);
  --login-card-border: rgba(255,255,255,.20);

  /* legacy colour aliases used inside site.css */
  --champagne:       var(--gold);
  --champagne-light: var(--gold-light);
  --champagne-deep:  var(--gold-ink);
  --cream:   var(--bg);
  --cream-2: var(--bg-2);
  --cream-3: var(--bg-3);

  /* ============ MENU (top bar + slide-in drawer) ============ */
  /* Shared dark warm surface — the top bar and the open drawer use the
     same colour. Each is configurable independently below.
     Prefer a light menu? e.g. --menu-bg: rgba(250,245,235,.94); --menu-fg: var(--ink); */
  --menu-bg:   rgba(34,27,17,.92);    /* shared menu surface colour       */
  --header-bg: var(--menu-bg);        /* top bar (scrolled)               */
  --drawer-bg: var(--menu-bg);        /* slide-in menu drawer             */
  --menu-fg:   var(--gold);           /* menu links + text  (gold)        */
  --menu-line: rgba(230,188,110,.22); /* gold hairline dividers in drawer */
  --header-fg: #f4ead8;               /* top-bar icon tint                */

  /* ============ LAYOUT ============ */
  --header-h: 84px;
}