/* ==========================================================================
   NEXIFY STUDIO: brand system, shared by every page
   (the website and its booking, the staff sign-in and the dashboard)

   - BBH Bogle, self-hosted (Studio DRAMA, SIL OFL 1.1: assets/fonts/BBH-Bogle-OFL.txt)
   - the gold: light gold, rich gold and antique gold, warm and metallic, held
     at hue 38-42 so it never turns yellow or orange
   - metal gradients for text and for filled buttons, gold hairlines, focus
     rings and selection
   Page styles (css/identity.css, css/staff-gold.css) draw only from these.
   ========================================================================== */

@font-face {
  font-family: "BBH Bogle";
  src: url("../assets/fonts/bbh-bogle-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;                 /* invisible for the moment it loads, never a fallback flash */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* type */
  --font-bogle: "BBH Bogle", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-code: "Google Sans Code", ui-monospace, Consolas, monospace;

  /* the gold */
  --gold-hi: #fdefc8;          /* light gold highlight */
  --gold-1: #f0d492;           /* light gold */
  --gold-2: #dcb466;           /* rich gold */
  --gold-3: #c0923f;           /* gold */
  --gold-4: #93692b;           /* antique gold */
  --gold-5: #5a3e19;           /* deep antique */
  --gold-ink: #e3c17b;         /* solid gold for small marks and labels */
  --gold-ink-on: #1e1408;      /* dark text on gold */

  /* polished gold for text: bright lip, rich gold body, darker band, warm foot */
  --gold-text: linear-gradient(180deg, #fff2cf 0%, #f2d898 22%, #dcb466 46%, #b88a3a 70%, #e6c582 100%);
  --gold-text-hi: linear-gradient(180deg, #fffaeb 0%, #f8e3ae 24%, #e8c57d 48%, #c99c4c 72%, #f1d597 100%);
  /* gold leaf for filled buttons: light gold catching the light across a rich gold body */
  --gold-fill: linear-gradient(140deg, #fbe6b0 0%, #ecca80 24%, #d6a857 50%, #e9ca88 74%, #c4933f 100%);
  --gold-fill-hi: linear-gradient(140deg, #fff2cf 0%, #f5d998 24%, #e1b566 50%, #f2d79d 74%, #cf9f4c 100%);
  /* brushed grain laid over large metal type */
  --gold-brush: repeating-linear-gradient(90deg, rgba(255, 244, 214, 0.05) 0 1px, rgba(40, 26, 6, 0.055) 1px 2px, rgba(0, 0, 0, 0) 2px 4px);

  /* lines and light */
  --gold-line: rgba(220, 180, 102, 0.2);
  --gold-line-strong: rgba(220, 180, 102, 0.42);
  --gold-tint: rgba(220, 180, 102, 0.09);        /* selected / hovered surfaces */
  --gold-light: rgba(240, 204, 128, 0.12);       /* spotlight core */
}

html { font-synthesis: none; }                   /* one real weight: never a faux bold or italic */
::selection { background: rgba(220, 180, 102, 0.88); color: #140d05; }

/* metal text, for anything that should read as polished gold */
.gold-text {
  color: transparent;
  background-image: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
}