/* ==========================================================================
   OWN VOYAGE — design tokens
   Merged from the design system's tokens/ (colors, typography, spacing,
   shape, backgrounds). Font paths retargeted to /assets/fonts/. Only the
   faces actually used are shipped (Bobby Jones Soft + Poppins 400/600/700/800).
   ========================================================================== */

:root {
  /* ---- Colour: brand base ---- */
  --navy-900: #01202F;
  --navy-800: #023047;
  --navy-700: #0B4460;
  --deep-teal-600: #126783;
  --teal-500: #219EBC;
  --teal-400: #4FB5CE;
  --teal-100: #D3ECF3;
  --seafoam-300: #B3D7D1;
  --seafoam-100: #DCEDEA;
  --mist-50: #E9EEEA;
  --yellow-400: #FFB703;
  --yellow-200: #FFD970;
  --yellow-50: #FFF4D6;
  --orange-500: #FB8500;
  --orange-600: #D96F00;
  --orange-50: #FFEBD4;
  --green-600: #178A3C;
  --green-50: #DDF1E2;
  --white: #FFFFFF;

  /* ---- Colour: paper ---- */
  --paper: #F7F9FB;
  --paper-rule: #BCD0E4;
  --paper-margin: #E9A7A7;

  /* ---- Colour: neutrals (navy-tinted) ---- */
  --ink-900: #023047;
  --ink-700: #126783;
  --ink-500: #5A7A8C;
  --ink-300: #A9BCC7;
  --ink-150: #D6E0E6;
  --ink-50: #F1F5F7;

  /* ---- Colour: semantic ---- */
  --text-strong: var(--navy-800);
  --text-body: var(--deep-teal-600);
  --text-muted: var(--ink-500);
  --text-on-dark: var(--white);
  --text-on-accent: var(--navy-800);
  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-sunken: var(--mist-50);
  --surface-dark: var(--navy-800);
  --surface-highlight: var(--yellow-400);
  --border-strong: var(--navy-800);
  --border-soft: var(--ink-150);
  --accent-primary: var(--orange-500);
  --accent-primary-hover: var(--orange-600);
  --accent-secondary: var(--teal-500);
  --accent-sun: var(--yellow-400);
  --focus-ring: var(--teal-500);
  --success: var(--green-600);
  --success-bg: var(--green-50);
  --warning: var(--yellow-400);
  --warning-bg: var(--yellow-50);
  --danger: #C8432B;
  --danger-bg: #FBE3DD;
  --info: var(--teal-500);
  --info-bg: var(--teal-100);

  /* ---- Typography: font families ---- */
  --font-display: "Bobby Jones Soft", "Poppins", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Typography: font weights ---- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* ---- Typography: display scale (Bobby Jones Soft, tight leading) ---- */
  --fs-display-xl: clamp(64px, 9vw, 144px);
  --fs-display-l: clamp(48px, 6.5vw, 96px);
  --fs-display-m: clamp(36px, 4.5vw, 64px);
  --fs-display-s: clamp(28px, 3vw, 40px);
  --lh-display: 0.92;
  --ls-display: 0.01em;

  /* ---- Typography: headings (Poppins) ---- */
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --lh-heading: 1.2;

  /* ---- Typography: body ---- */
  --fs-body-l: 20px;
  --fs-body: 17px;
  --fs-body-s: 15px;
  --fs-caption: 13px;
  --fs-overline: 13px;
  --lh-body: 1.55;
  --lh-tight: 1.3;
  --ls-overline: 0.14em;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --content-max: 1200px;
  --content-narrow: 760px;
  --gutter: clamp(20px, 4vw, 48px);
  --paper-line: 32px;

  /* ---- Shape ---- */
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --border-w: 2px;
  --border-w-thick: 3px;
  --shadow-sticker-s: 2px 3px 0 var(--navy-800);
  --shadow-sticker: 4px 5px 0 var(--navy-800);
  --shadow-sticker-l: 6px 8px 0 var(--navy-800);
  --shadow-soft: 0 6px 20px rgba(2, 48, 71, 0.10);
  --shadow-lift: 0 12px 32px rgba(2, 48, 71, 0.16);
  --tilt-s: -1.5deg;
  --tilt-m: -3deg;
  --tilt-l: 4deg;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;

  /* ---- Background ---- */
  --bg-lined-paper: url("/assets/img/backgrounds/lined-paper.jpg");
}

/* ---- Fonts (woff2, subset to Latin + used punctuation) ---- */
@font-face {
  font-family: "Bobby Jones Soft";
  src: url("/assets/fonts/BobbyJonesSoft.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Paper backgrounds (helper classes) ---- */
.ov-paper {
  background-color: var(--paper);
  background-image: var(--bg-lined-paper);
  background-size: 100% auto;
  background-position: top center;
}
.ov-paper-ruled {
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--paper-line) - 1px),
    var(--paper-rule) calc(var(--paper-line) - 1px),
    var(--paper-rule) var(--paper-line)
  );
}