/* ============================================================
   MoonClerk Brand Theme
   Mirrors /src/styles/variables/*.scss from www.moonclerk.com
   Drop-in for every Phase 1 + Phase 2 hi-fi page.
   Update production values here and every page inherits.
   ============================================================ */

/* Fonts — Graphik (licensed). Served locally from /assets/fonts. */
@font-face {
  font-family: 'Graphik';
  src: url('../assets/fonts/Graphik-Regular-Web.woff2') format('woff2'),
       url('../assets/fonts/Graphik-Regular-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('../assets/fonts/Graphik-RegularItalic-Web.woff2') format('woff2'),
       url('../assets/fonts/Graphik-RegularItalic-Web.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('../assets/fonts/Graphik-Medium-Web.woff2') format('woff2'),
       url('../assets/fonts/Graphik-Medium-Web.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('../assets/fonts/Graphik-MediumItalic-Web.woff2') format('woff2'),
       url('../assets/fonts/Graphik-MediumItalic-Web.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Color — from variables/colors.scss ---------- */
  --white: #fff;
  --black: #000;

  --aqua--00: #eef8f8;
  --aqua--20: #ccede9;
  --aqua--40: #aee2dd;
  --aqua--60: #0f766e;   /* primary */
  --aqua--80: #01585c;   /* dark   */
  --aqua--100: #00363b;

  --gray--00: #f8f8fb;
  --gray--20: #f0f1f5;
  --gray--40: #c9ced7;
  --gray--50: #6b7783;
  --gray--60: #414e5a;
  --gray--80: #22313e;
  --gray--100: #101e28;

  --colorPrimary: var(--aqua--60);
  --colorSecondary: var(--gray--80);

  /* ---------- Legacy aliases (keep existing pages working) ---------- */
  /* Teals — old CSS may reference --teal / --teal-dk / --teal-bg */
  --teal: var(--aqua--60);
  --teal-dk: var(--aqua--80);
  --teal-bg: var(--aqua--00);
  /* Inks — old CSS may reference --ink / --ink-2 / --ink-3 / --ink-4 */
  --ink: var(--gray--100);
  --ink-2: var(--gray--60);
  --ink-3: var(--gray--50);
  --ink-4: var(--gray--40);
  /* Lines & backgrounds */
  --line: var(--gray--20);
  --line-2: var(--gray--20);
  --bg: var(--gray--00);
  --bg-2: var(--white);

  /* ---------- Typography — from variables/typography.scss ---------- */
  --typeFamily: 'Graphik', 'Graphik-fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                Roboto, 'Helvetica Neue', Arial, sans-serif;
  --headingColor: var(--gray--100);
  --headingLeading: 105%;
  --headingTracking: -1.5px;
  --headingWeight: 500;
  --paragraphColor: var(--gray--60);
  --paragraphLeading: 135%;
  --paragraphWeight: 400;

  /* ---------- Layout — from variables/layout.scss ---------- */
  --borderPrimary: 1px solid var(--gray--20);
  --borderSecondary: 1px solid var(--gray--60);
  --borderTertiary: 1px solid var(--colorPrimary);
  --borderRadius: 0.25rem;        /* 4px — MoonClerk cards & inputs */
  --borderRadiusPill: 10rem;      /* 160px — MoonClerk buttons */

  /* ---------- Shadows — from variables/shadows.scss ---------- */
  --shadowShallow: 1px 4px 16px rgba(0, 0, 0, 0.05);
  --shadowBase: 8px 20px 40px rgba(0, 0, 0, 0.10);
  /* Legacy aliases */
  --shadow-sm: var(--shadowShallow);
  --shadow-md: var(--shadowBase);
  --shadow-lg: var(--shadowBase);

  /* ---------- Motion — from variables/motion.scss ---------- */
  --ease-in-out: cubic-bezier(0.49, 0.025, 0.49, 1);
  --transitionShort: all 300ms var(--ease-in-out);
  --transitionBase: all 500ms var(--ease-in-out);
}

/* ============================================================
   Base typography — matches globals.js on production.
   Fluid sizing intentionally simplified to static values
   at the 1440px breakpoint for this design system.
   ============================================================ */
body {
  font-family: var(--typeFamily);
  font-weight: var(--paragraphWeight);
  color: var(--paragraphColor);
  line-height: var(--paragraphLeading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga" on;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--typeFamily);
  color: var(--headingColor);
  font-weight: var(--headingWeight);
  line-height: var(--headingLeading);
  letter-spacing: var(--headingTracking);
  margin: 0;
}

/* Keep <em> semantic — restyle to MoonClerk pattern.
   Production has no display serif; emphasis uses italic + teal. */
h1 em, h2 em, h3 em, h4 em {
  font-family: var(--typeFamily);
  font-style: italic;
  font-weight: 500;
  color: var(--colorPrimary);
}

p { color: var(--paragraphColor); line-height: var(--paragraphLeading); }

a {
  color: var(--colorPrimary);
  font-weight: var(--headingWeight);
  transition: var(--transitionBase);
}
a:hover { color: var(--aqua--80); }

/* ============================================================
   Buttons — pill shape, from atoms/button.js
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--typeFamily);
  font-weight: var(--headingWeight);
  font-size: 1rem;
  line-height: 100%;
  min-height: 44px;
  padding: 1rem 2rem;
  text-align: center;
  text-decoration: none;
  border-radius: var(--borderRadiusPill);
  border: 1px solid transparent;
  transition: var(--transitionBase);
  cursor: pointer;
  white-space: nowrap;
}
.btn-sm  { font-size: 0.875rem; padding: 0.75rem 1.5rem; }
.btn-xs  { font-size: 0.875rem; padding: 0.5rem 1rem; }
.btn-lg  { font-size: 1rem; padding: 1.125rem 2.25rem; }
.btn-xl  { font-size: 1rem; padding: 1.25rem 2.5rem; }

/* Primary — solid aqua (maps to old .btn-accent & .btn-primary) */
.btn-primary, .btn-accent {
  background-color: var(--colorPrimary);
  color: var(--white);
}
.btn-primary:hover, .btn-accent:hover {
  background-color: var(--aqua--80);
  color: var(--white);
}

/* Primary border — outline aqua */
.btn-outline {
  background-color: transparent;
  color: var(--colorPrimary);
  border-color: var(--colorPrimary);
}
.btn-outline:hover {
  background-color: var(--colorPrimary);
  color: var(--white);
}

/* Secondary — solid ink */
.btn-secondary {
  background-color: var(--colorSecondary);
  color: var(--white);
}
.btn-secondary:hover { background-color: var(--gray--100); }

/* Ghost / link — for nav "Log in" style */
.btn-ghost, .btn-link {
  background: transparent;
  color: var(--gray--60);
  border-color: transparent;
  padding-left: 1rem;
  padding-right: 1rem;
}
.btn-ghost:hover, .btn-link:hover { color: var(--colorPrimary); background: transparent; }

/* Tertiary — uppercase small link (from button.js tertiary prop) */
.btn-tertiary {
  background: transparent;
  color: var(--gray--50);
  border-color: var(--gray--40);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.875rem;
}

body:has(.cms-page) :where(a, button, input, select, textarea, [tabindex]):focus,
body:has(.cms-page) :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-style: solid !important;
  outline-width: 3px !important;
  outline-color: var(--aqua--80, #0f766e) !important;
  outline-offset: 3px !important;
}
body:has(.cms-page) :where(.primary, .secondary, .dv-chip, .dv-lang, .fb-toggle, .fb-amount-rm, .vbh-pay) {
  min-width: 44px;
  min-height: 44px;
}
body:has(.cms-page) :where(.vbh-pay) {
  min-height: 48px !important;
}
body:has(.cms-page) :where(input[type="checkbox"], input[type="radio"]) {
  min-width: 20px;
  min-height: 20px;
}
body:has(.cms-page) :where(img, video, svg, canvas, iframe) {
  max-width: 100%;
}
body:has(.cms-page) :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, a, span, button) {
  overflow-wrap: anywhere;
}
@media (max-width: 768px) {
  body:has(.cms-page) :where(.btn, .btn-lg, .btn-xl) {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    white-space: normal;
  }
}

/* ============================================================
   Card — matches small radius from layout.scss
   ============================================================ */
.card {
  background: var(--white);
  border: var(--borderPrimary);
  border-radius: var(--borderRadius);
  padding: 2rem;
  box-shadow: var(--shadowShallow);
}
.card-lg { padding: 2.5rem; }

/* ============================================================
   Utility helpers — keeps existing shared-pricing.css working
   Override aggressive radius values from Phase 1 on common shapes
   ============================================================ */