/*
 * ============================================================
 *  THEMBIAN  —  Brand Tokens
 *  Single source of truth for all brand design decisions.
 *
 *  HOW TO USE
 *  ----------
 *  Reference any token in your CSS with var(--token-name).
 *  Example:  background: var(--navy);
 *            font-family: var(--serif);
 *
 *  To update the brand, change values HERE only.
 *  Every component that references a token updates automatically.
 * ============================================================
 */

:root {

  /* ── Colour Palette ────────────────────────────────────────── */

  /* Primary */
  --navy:       #0f2e71;   /* Deep navy — primary brand colour    */
  --navy-mid:   #1a3a8f;   /* Mid navy — hover/gradient stop      */
  --navy-dark:  #091929;   /* Darkest navy — footer background    */
  --blue:       #1a5276;   /* Accent blue                         */

  /* Accent */
  --teal:       #0F6E56;   /* Teal — CTAs, highlights             */
  --teal-l:     #ddf2ea;   /* Light teal — backgrounds            */

  /* Gold */
  --gold:       #d4923a;   /* Gold — primary accent colour        */
  --gold-dark:  #a06820;   /* Dark gold — hover states            */
  --gold-hover: #b8932e;   /* Gold hover — buttons, nav CTA       */
  --gold-l:     #fdf1e0;   /* Light gold — section backgrounds    */

  /* Neutrals */
  --ink:        #0d0d0d;   /* Primary text                        */
  --ink-2:      #1a1a1a;   /* Secondary text                      */
  --ink-3:      #444444;   /* Body copy, muted                    */
  --ink-4:      #777777;   /* Labels, captions                    */
  --rule:       #d0ccc4;   /* Dividers, borders                   */
  --page:       #fafaf8;   /* Page background                     */
  --white:      #ffffff;   /* Pure white                          */

  /* Surface tints */
  --surface-1:  #f8f5f0;   /* Lightest warm surface               */
  --surface-2:  #f5f1ea;   /* Warm off-white — card hover         */
  --surface-3:  #f0ede6;   /* Service list borders                */

  /* ── Typography ───────────────────────────────────────────── */

  --serif:  "Cormorant Garamond", Georgia, serif;
  --sans:   "Libre Franklin", sans-serif;

  /* ── Logo asset paths ─────────────────────────────────────── */
  /*
   *  These paths are relative to index.html.
   *  Update if you move the assets folder.
   */
  --logo-nav:   url("assets/logo-nav.png");   /* 280 × 84 px  — nav & footer */
  --logo-hero:  url("assets/logo-hero.png");  /* 420 × 126 px — hero panel   */

  /* ── Spacing scale ────────────────────────────────────────── */

  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  64px;
  --space-2xl: 96px;
  --space-3xl: 100px;

  /* ── Layout ───────────────────────────────────────────────── */

  --max-width: 1200px;

  /* ── Transition ───────────────────────────────────────────── */

  --transition: 0.2s;

}