/* ==================================================================
   Unified Design Tokens — Empass brand
   ================================================================== */
:root {
  /* === Fonts === */
  --font-heading: "Roboto Condensed", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-heading-weight: 350;          /* Main Title */
  --font-heading-thin-weight: 100;     /* Sub Title (Thin) */
  --font-body: "Roboto Slab", Georgia, "Times New Roman", serif;
  --font-body-weight: 250;             /* Content (Light) */
  --font-logo: "Candara Light", Candara, "Trebuchet MS", "Segoe UI", system-ui, sans-serif;

  /* Base sizing */
  --base-size: 62.5%;
  --base-font-size: 1.8rem;
  --space: 3.2rem;
  --vspace-btn: var(--space);

  /* Type scale */
  --text-scale-ratio: 1.2;
  --text-size: var(--base-font-size);
  --text-xs: calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
  --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
  --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
  --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
  --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
  --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
  --text-display-1: calc(var(--text-xxxl) * var(--text-scale-ratio));
  --text-display-2: calc(var(--text-display-1) * var(--text-scale-ratio));
  --text-display-3: calc(var(--text-display-2) * var(--text-scale-ratio));

  /* === Brand palette from guide === */
  --brand-logo: #C89B5E;  /* Logo colour, which is apparently the background colours */
  --brand-title: #E5D1B9; /* Title colour */
  --brand-bg:   #434444;  /* Background */
  --brand-1:    #D3B289;  /* Other */
  --brand-2:    #948E8F;  /* Other */
  --brand-3:    #AFABAC;  /* Other */
  --brand-ink:  #24364A;  /* Deep accent / ink */

  /* Map to generic slots used by adapters/components */
  --color-1: var(--brand-logo);   /* primary */
  --color-2: var(--brand-title);  /* secondary */
  --color-3: var(--brand-1);      /* accent */

  /* Text & surfaces */
  --color-bg: var(--brand-bg);
  --color-text: var(--brand-title);     /* readable on #434444 */
  --color-text-muted: var(--brand-3);   /* softer text */
  --color-border: var(--brand-2);
  --color-placeholder: var(--brand-3);
  --color-text-dark: #ffffff;
  --color-text-light: var(--brand-3);

  /* Buttons (defaults + primary) */
  --color-btn: var(--brand-ink);                 /* default button bg */
  --color-btn-text: #ffffff;
  --color-btn-hover: var(--brand-logo);          /* hover to gold */
  --color-btn-hover-text: #111;

  --color-btn-primary: var(--brand-logo);        /* primary = gold */
  --color-btn-primary-text: #ffffff;
  --color-btn-primary-hover: var(--brand-title); /* lighter hover */
  --color-btn-primary-hover-text: #111;

  --color-btn-stroke: var(--brand-title);
  --color-btn-stroke-text: var(--brand-title);
  --color-btn-stroke-hover: var(--brand-title);
  --color-btn-stroke-hover-text: #111;

  /* Header & Nav */
  --header-height: 7.2rem;
  --header-bg: transparent;
  --header-link: rgba(229, 209, 185, 0.75); /* title color @ 75% */
  --header-link-hover: #E5D1B9;
  --header-link-active: #E5D1B9;

  /* Footer */
  --footer-bg: #1e1f1f;   /* deep accent footer */
  --footer-text: #ffffff;
  --footer-heading: #E5D1B9;
  --footer-sep: rgba(255,255,255,.12);

  /* Radii */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;
  
}

:root{
  /* section surfaces */
  --section-bg-strong: var(--brand-ink);      /* deep blue */
  --section-bg-soft: color-mix(in srgb, var(--brand-ink) 12%, var(--color-bg));
}