/* ============================================================
   FOUND BHUTAN — UNIVERSAL DESIGN TOKENS
   tokens.css  |  Load this FIRST before any other stylesheet
   ============================================================
   HOW TO USE IN YOUR CSS FILES:
   Instead of writing  color: #ffc21a;
   Write:              color: var(--gold);

   To change your gold colour sitewide, edit ONE line here.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Roboto:wght@300;400;500;700&display=swap');

:root {

  /* ── COLOURS ──────────────────────────────────────────── */

  /* Primary brand colours */
  --gold:           #ffc21a;   /* Primary accent — CTAs, highlights, icons */
  --gold-dark:      #e0a800;   /* Gold on hover */
  --gold-deeper:    #D77C00;   /* Darker gold — table headers, close buttons */
  --gold-pale:      rgba(255, 194, 26, 0.12);  /* Subtle gold tint backgrounds */
  --gold-border:    rgba(255, 194, 26, 0.30);  /* Gold borders */

  --navy:           #0e2d45;   /* Deepest navy — primary dark colour */
  --navy-mid:       #143d59;   /* Mid navy — navbar, footer, backgrounds */
  --navy-light:     #1a4a6e;   /* Lighter navy — hover states */

  /* Neutral colours */
  --white:          #ffffff;
  --off-white:      #f7f5f0;
  --light-bg:       #f9f9f9;
  --smoke:          whitesmoke;
  --text-dark:      #143d59;   /* Main body text (matches your existing p, li) */
  --text-mid:       #444444;
  --text-soft:      #666666;
  --text-muted:     rgba(20, 61, 89, 0.6);

  /* ── FONTS ────────────────────────────────────────────── */

  --font-body:      'Roboto', sans-serif;         /* All body text, UI, labels */
  --font-heading:   'Playfair Display', Georgia, serif;  /* All headings h1–h6 */

  /* Font sizes — fluid scale */
  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-lg:    1.125rem;   /* 18px */
  --fs-xl:    1.25rem;    /* 20px */
  --fs-2xl:   1.5rem;     /* 24px */
  --fs-3xl:   1.875rem;   /* 30px */
  --fs-4xl:   2.25rem;    /* 36px */

  /* ── SPACING ──────────────────────────────────────────── */

  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;

  /* ── LAYOUT ───────────────────────────────────────────── */

  --max-width:    1200px;
  --content-width: 90%;
  --radius-sm:    5px;
  --radius-md:    8px;
  --radius-lg:    10px;

  /* ── SHADOWS ──────────────────────────────────────────── */

  --shadow-sm:  0 2px 10px rgba(0, 0, 0, 0.07);
  --shadow-md:  0 4px 8px  rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 6px 24px rgba(0, 0, 0, 0.15);

  /* ── TRANSITIONS ──────────────────────────────────────── */

  --ease:       all 0.3s ease;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
}


/* ============================================================
   GLOBAL BASE STYLES
   Applied to every page automatically via this file
   ============================================================ */

body, html {
  font-family: var(--font-body);
  background-color: var(--white);
  color: var(--text-dark);
  padding: 0;
  margin: 0;
  height: fit-content;
}

/* Headings use Playfair Display universally */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* Anchor colour */
a {
  color: var(--gold);
  text-decoration: none;
}

a:hover {
  color: var(--gold-dark);
}

p {
  color: var(--text-dark);
  margin-bottom: 20px;
}

li {
  color: var(--text-dark);
  margin: 5px;
}

img {
  max-width: 100%;
  height: auto;
}