/* Shabel Marketing — cinematic layer.

   Sits AFTER the Organic design system's styles.css and brand.css. It does two
   things and nothing else:

   1. Retunes a handful of tokens so the light body reads as clean editorial
      paper rather than tinted glass, and adds the near-black ground the dark
      scenes are cut from. Roles, ramps and elevation shapes are untouched.
   2. Reskins .btn / .card / .tag / .table to the new chrome — pill actions in
      tracked micro-caps, hairline-bordered surfaces — so the pages that still
      carry the old markup inherit the new language without being rebuilt.

   Load order in every page's <helmet>:
     styles.css  →  brand.css  →  cinema.css
*/

:root {
  /* Light body: paper, not tinted glass */
  --color-bg: #f3f7fb;
  --color-surface: #ffffff;

  /* The dark ground the cinematic scenes are cut from */
  --cine-ink: #060d16;
  --cine-ink-2: #0c1723;
  --cine-ink-3: #142334;
  --cine-paper: #f7fafd;
  --cine-line: color-mix(in srgb, #f7fafd 14%, transparent);
  --cine-line-2: color-mix(in srgb, #16283a 12%, transparent);

  /* Micro-caps: the label voice used across every scene */
  --cine-label: 600 11px/1 var(--font-body);
  --cine-track: 0.28em;

  --color-divider: color-mix(in srgb, #0f2032 11%, transparent);
  --shadow-sm: 0 1px 2px color-mix(in srgb, #16283a 10%, transparent);
  --shadow-md: 0 6px 22px -8px color-mix(in srgb, #16283a 18%, transparent);
  --shadow-lg: 0 26px 60px -28px color-mix(in srgb, #16283a 30%, transparent);
}

/* ── Actions ─────────────────────────────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 16px 26px; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; background-image: none;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.btn-primary {
  background-color: var(--cine-paper); color: var(--cine-ink);
  border-color: var(--cine-paper); box-shadow: none;
}
.btn-primary:hover {
  background-color: var(--color-accent); border-color: var(--color-accent);
  color: var(--cine-paper); box-shadow: 0 18px 38px -20px var(--color-accent-800);
}
.btn-secondary {
  background-color: transparent; color: var(--color-text);
  border-color: var(--color-divider);
}
.btn-secondary:hover {
  border-color: var(--color-text); background-color: transparent;
  color: var(--color-text); box-shadow: none;
}
.btn-ghost { background: none; border-color: transparent; color: var(--color-accent-700); }
.btn-ghost:hover { background: none; color: var(--color-text); }
.btn-block { width: 100%; }
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
a.btn-primary, a.btn-primary:hover, a.btn-primary:focus { color: var(--cine-ink); }
a.btn-primary:hover { color: var(--cine-paper); }
a.btn-secondary, a.btn-secondary:hover, a.btn-secondary:focus { color: var(--color-text); }

/* On a dark scene the pair inverts */
[data-tone="dark"] .btn-secondary { color: var(--cine-paper); border-color: var(--cine-line); }
[data-tone="dark"] .btn-secondary:hover { border-color: var(--cine-paper); color: var(--cine-paper); }

/* ── Surfaces ────────────────────────────────────────────────────────────── */

.card {
  background: var(--color-surface);
  border: 1px solid var(--cine-line-2);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.card:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); box-shadow: var(--shadow-md); }
.card-kicker {
  font: var(--cine-label); letter-spacing: var(--cine-track);
  text-transform: uppercase; color: var(--color-accent-700);
}
.card-title { font-family: var(--font-heading); font-size: 20px; line-height: 1.25; margin: 0; }
.card-body { font-size: 14.5px; line-height: 1.65; color: var(--color-neutral-800); margin: 0; opacity: 1; }
.elev-sm, .elev-md, .elev-lg { box-shadow: none; }

.tag {
  display: inline-flex; align-items: center;
  font: var(--cine-label); letter-spacing: var(--cine-track); text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent-800);
}
.tag-accent { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent-800); }
.tag-accent-2 { background: color-mix(in srgb, var(--color-accent-2) 16%, transparent); color: var(--color-accent-2-800); }
.tag-outline { background: none; border: 1px solid var(--color-divider); color: var(--color-neutral-800); }

.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table td, .table th { padding: 14px 0; border-bottom: 1px solid var(--cine-line-2); text-align: left; }
.table tr:last-child td { border-bottom: none; }

/* ── Motion ground rules ─────────────────────────────────────────────────── */

/* Proximity snapping, so only the scenes that opt in with scroll-snap-align
   lock to the viewport — the long light sections scroll normally. */
@media (hover: hover) and (min-width: 941px) {
  html { scroll-snap-type: y proximity; }
}
[data-hscroll] { scrollbar-width: none; -ms-overflow-style: none; }
[data-hscroll]::-webkit-scrollbar { display: none; }
[data-hscroll-item]:hover img, [data-hscroll-item]:hover video { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none !important; scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}