/* =============================================================
   Ceylon Ember · design tokens for Ceylinco Tours
   Load this stylesheet FIRST among theme styles. Every colour, face
   and size in the theme must reference these tokens. Never paint a
   raw hex in a template or in style.css: add a token here instead.
   Load-order constraint: Bootstrap 4 also defines --teal and --red on
   :root, so this sheet must appear AFTER the Bootstrap CDN link in
   the document or those two tokens lose the cascade.
   ============================================================= */

/* Display face: "Roxale Story" resolves punctuation from these
   unicode-range rules; letterforms fall through to Cormorant Garamond
   in the --font-display stack. */
@font-face {
  font-family: "Roxale Story";
  src: url("https://fonts.gstatic.com/s/cormorantgaramond/v21/co3umX5slCNuHLi8bLeY9MK7whWMhyjypVO7abI26QOD_v86GnM.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00A1-00BF, U+2010-2027, U+2030-205E;
}
@font-face {
  font-family: "Roxale Story";
  src: url("https://fonts.gstatic.com/s/cormorantgaramond/v21/co3smX5slCNuHLi8bLeY9MK7whWMhyjYrGFEsdtdc62E6zd58jD-iNM8.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00A1-00BF, U+2010-2027, U+2030-205E;
}

:root {
  /* Primary · Heritage Ink */
  --ink-deepest: #0F0E0C;
  --ink: #181613;
  --ink-raised: #2C2A26;
  --ink-muted: #48453F;

  /* Secondary · Harbour Teal */
  --teal-deep: #0C4652;
  --teal: #115E6B;
  --teal-bright: #3E8B99;
  --teal-tint: #B6D6DC;
  --teal-wash: #E3EFF1;

  /* Accent · Ceylinco Red (use 5 to 10 percent only) */
  --red-deep: #A6141E;
  --red: #D81E28;
  --red-soft: #ECB6BA;

  /* Neutrals · warm, sand-based */
  --ivory: #FAF7F1;
  --linen: #F1EADF;
  --stone: #DBD4C8;
  --slate: #6B6960;

  /* Semantic aliases */
  --bg: var(--ivory);
  --surface: var(--linen);
  --border: var(--stone);
  --text: var(--ink);
  --text-muted: var(--slate);
  --link: var(--teal);
  --btn-primary-bg: var(--ink);
  --btn-primary-fg: var(--ivory);
  --btn-secondary-bg: var(--teal);
  --btn-secondary-fg: var(--ivory);
  --accent: var(--red);

  /* Derived · overlays and elevation (ink-based, never pure black) */
  /* Deep enough that a photograph reads as atmosphere behind text, not
     as a subject competing with it. */
  --overlay-ink-deep: rgba(15, 14, 12, 0.93);
  --overlay-ink-strong: rgba(15, 14, 12, 0.62);
  --overlay-ink: rgba(15, 14, 12, 0.42);
  --overlay-ink-soft: rgba(15, 14, 12, 0.18);
  --shadow-card: 0 1px 2px rgba(15, 14, 12, 0.06), 0 8px 24px rgba(15, 14, 12, 0.08);
  --shadow-raised: 0 2px 6px rgba(15, 14, 12, 0.10), 0 16px 40px rgba(15, 14, 12, 0.14);

  /* Type */
  --font-display: "Roxale Story", "Cormorant Garamond", Georgia, serif;
  --font-body: "DM Sans", "Segoe UI", -apple-system, sans-serif;

  /* Type scale (px / line-height per brand sheet) */
  --size-display-l: 52px;   --lh-display-l: 1.0;
  --size-display-m: 34px;   --lh-display-m: 1.1;
  --size-display-s: 26px;   --lh-display-s: 1.0;
  --size-pull-quote: 26px;
  --size-lede: 18px;        --lh-lede: 1.7;
  --size-body: 16px;        --lh-body: 1.65;
  --size-caption: 13px;     --lh-caption: 1.5;
  --size-eyebrow: 11px;

  /* Shape */
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-pill: 999px;
}

/* ---- Base ------------------------------------------------- */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400; /* one display weight only, matches Roxale Story */
  color: var(--text);
}

a { color: var(--link); }
a:hover { color: var(--teal-deep); }

::selection { background: var(--teal-tint); color: var(--ink); }

/* ---- Type scale ------------------------------------------- */

.display-l {
  font-family: var(--font-display);
  font-size: var(--size-display-l);
  line-height: var(--lh-display-l);
  font-weight: 400;
  text-transform: uppercase;   /* Display L is set in CAPITALS */
  letter-spacing: 0.01em;
}

.display-m {
  font-family: var(--font-display);
  font-size: var(--size-display-m);
  line-height: var(--lh-display-m);
  font-weight: 400;
}

.display-s {
  font-family: var(--font-display);
  font-size: var(--size-display-s);
  line-height: var(--lh-display-s);
  font-weight: 400;
}

.pull-quote {
  font-family: var(--font-display);
  font-size: var(--size-pull-quote);
  line-height: 1.35;
  font-style: italic; /* italic is reserved for pull quotes */
  font-weight: 400;
}

.lede {
  font-size: var(--size-lede);
  line-height: var(--lh-lede);
  font-weight: 400;
}

.caption {
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  color: var(--text-muted);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--size-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}

/* The single most important thing in a view carries a thin red rule. */
.red-rule {
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
}

/* ---- Accessibility base ----------------------------------- */

:focus-visible {
  outline: 2px solid var(--teal-bright);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Responsive type -------------------------------------- */

@media (max-width: 767px) {
  :root {
    --size-display-l: 36px;
    --size-display-m: 28px;
    --size-display-s: 22px;
    --size-pull-quote: 22px;
  }
}