/* Bali Aga Trips – design tokens v1 (30 Oct 2026) */
/* Load fonts in <head>:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;700&family=Source+Sans+3:wght@400;600;700&display=swap" rel="stylesheet">
*/
:root {
  /* Brand colours sampled from the logo */
  --bat-ink: #3F2507;          /* darkest outline */
  --bat-brown: #513416;        /* door + wordmark */
  --bat-wood: #875929;         /* gate walls */
  --bat-tan: #A27238;
  --bat-ochre: #BE7E2F;        /* thatched roof */
  --bat-parchment: #E7CB93;
  --bat-parchment-light: #EBD29C;

  /* UI roles */
  --color-primary: var(--bat-brown);
  --color-primary-hover: var(--bat-ink);
  --color-on-primary: #FFFFFF;
  --color-secondary: var(--bat-wood);
  --color-on-secondary: #FBF5E8;
  --color-accent: var(--bat-ochre);     /* decoration, icons, borders; not for text on light bg */
  --color-on-accent: #2B1A0B;
  --color-link: #8A5A1C;
  --color-bg: #FBF5E8;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F3E6C8;
  --color-text: #2B1A0B;
  --color-text-muted: #6B4A2A;
  --color-border: #E2CFA6;
  --color-border-strong: #A27238;
  --color-success: #1E6B45;
  --color-error: #A1281E;
  --color-focus: #BE7E2F;

  /* Type */
  --font-heading: "Zilla Slab", "Rockwell", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-caption: 0.75rem;   /* 12 */
  --fs-small: 0.875rem;    /* 14 */
  --fs-body: 1rem;         /* 16 */
  --fs-lead: 1.125rem;     /* 18 */
  --fs-h3: 1.25rem;        /* 20 */
  --fs-h2: 1.625rem;       /* 26 */
  --fs-h1: 2rem;           /* 32 */
  --fs-display: 2.5rem;    /* 40 */
  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.55;
  --ls-caps: 0.06em;

  /* Spacing (4-pt) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --container: 1120px;
  --gutter: 16px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Shadows (warm brown tint) */
  --shadow-sm: 0 1px 2px rgba(63, 37, 7, 0.08);
  --shadow-md: 0 4px 12px rgba(63, 37, 7, 0.10);
  --shadow-lg: 0 12px 28px rgba(63, 37, 7, 0.14);

  /* Components */
  --btn-height: 48px;
  --tap-min: 44px;
  --header-height: 64px;
  --sticky-bar-height: 72px;
  --transition: 150ms ease-out;
}

@media (min-width: 768px) {
  :root {
    --fs-body: 1.0625rem;  /* 17 */
    --fs-h3: 1.5rem;       /* 24 */
    --fs-h2: 2rem;         /* 32 */
    --fs-h1: 2.5rem;       /* 40 */
    --fs-display: 3.25rem; /* 52 */
    --gutter: 24px;
  }
}

body { background: var(--color-bg); color: var(--color-text); font: 400 var(--fs-body)/var(--lh-body) var(--font-body); }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; line-height: var(--lh-heading); color: var(--bat-brown); }
.eyebrow { font: 700 var(--fs-small)/1 var(--font-heading); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-link); }
.btn-primary { min-height: var(--btn-height); padding: 0 var(--space-5); border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-on-primary); font: 700 var(--fs-body)/1 var(--font-body); box-shadow: var(--shadow-sm); transition: background var(--transition); }
.btn-primary:hover { background: var(--color-primary-hover); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }