/* ============================================================
   Red Sea Crown — Design Tokens
   Fonts, palette, type scale, spacing, easing, z-index.
   ============================================================ */

/* ---- Thmanyah Serif Display (self-hosted) ---- */
@font-face {
  font-family: "Thmanyah";
  src: url("../fonts/thmanyahserifdisplay-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah";
  src: url("../fonts/thmanyahserifdisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah";
  src: url("../fonts/thmanyahserifdisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah";
  src: url("../fonts/thmanyahserifdisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah";
  src: url("../fonts/thmanyahserifdisplay-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand palette ---- */
  --teal: #1d3c60;          /* primary / ink / body text */
  --teal-deep: #1d3756;     /* deepest surface */
  --teal-700: #204876;      /* lighter teal — hover, secondary surface */
  --teal-soft: #e7eef0;     /* faint teal tint background */
  --gold: #f4d293;          /* accent — borders, fills on dark, motifs */
  --gold-deep: #c9a85e;     /* gold with more contrast — hover/detail */
  --gold-soft: #f4ead0;     /* gold tint background */

  --white: #ffffff;
  --cream: #faf7f0;         /* warm off-white atmosphere */
  --muted: #4a5e66;         /* secondary text on light (AA on white) */
  --line: rgba(22, 50, 61, 0.12);
  --line-strong: rgba(22, 50, 61, 0.22);

  /* page background (animated by scroll morph) */
  --page-bg: var(--white);

  /* ---- Typography ---- */
  --font-display: "Thmanyah", "Times New Roman", serif;
  --font-body: "Thmanyah", "Segoe UI", system-ui, sans-serif;

  --text-hero: clamp(2.7rem, 1rem + 8vw, 6.5rem);
  --text-h1: clamp(2.1rem, 1rem + 4.6vw, 4rem);
  --text-h2: clamp(1.7rem, 1rem + 2.8vw, 2.9rem);
  --text-h3: clamp(1.3rem, 1rem + 1.2vw, 1.7rem);
  --text-lead: clamp(1.12rem, 1rem + 0.55vw, 1.45rem);
  --text-base: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
  --text-sm: 0.92rem;
  --text-xs: 0.8rem;

  --lh-tight: 1.08;
  --lh-snug: 1.28;
  --lh-body: 1.78;

  /* ---- Spacing ---- */
  --space-2xs: 0.4rem;
  --space-xs: 0.75rem;
  --space-sm: 1.1rem;
  --space-md: 1.75rem;
  --space-lg: 2.75rem;
  --space-xl: 4.5rem;
  --space-section: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --container: 1200px;
  --container-narrow: 880px;

  /* ---- Radii ---- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --radius-xl: 44px;
  --radius-pill: 999px;

  /* ---- Shadows (soft, layered) ---- */
  --shadow-sm: 0 2px 10px rgba(14, 33, 40, 0.05);
  --shadow-md: 0 12px 34px rgba(14, 33, 40, 0.08);
  --shadow-lg: 0 30px 70px rgba(14, 33, 40, 0.13);
  --shadow-gold: 0 18px 50px rgba(201, 168, 94, 0.28);

  /* ---- Motion ---- */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur-normal: 320ms;
  --dur-slow: 600ms;

  /* ---- z-index scale ---- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 20;
  --z-header: 30;
  --z-overlay: 40;
  --z-top: 50;
}