/* Raydar shared brand foundation for the five local website versions.
   Tokens come from scheduler/app/brand.css (the verified transcription of
   Pony Studio's Branding Guidelines). Every version links this file first and
   builds its own look on top; do not fork the tokens. */

/* Fonts. PP Grafier Regular is the exact file www.raydar.xyz already serves
   (licence-safe for the public site). Inter is the variable face. */
@font-face {
  font-family: "PP Grafier";
  src: url("/assets/fonts/live-site/PPGrafier-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Variable";
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Primary palette (Pony guidelines p16-17) */
  --rd-violet: #7F72FF;
  --rd-orange: #FF6E00;
  --rd-beige: #F6F3E9;
  --rd-ink: #0F0F0F;
  --rd-grey: #171717;
  --rd-white: #FFFFFF;
  --rd-blush: #E4D5D3;
  --rd-violet-gradient: linear-gradient(180deg, #8B80F9 -32.66%, #FFFFFF 172.5%);

  /* Accessible ramps */
  --rd-violet-050: #EDEBFF;
  --rd-violet-600: #645AC5;  /* 4.96:1 on beige: links, focus */
  --rd-violet-700: #574EA9;  /* 6.17:1: violet as text */
  --rd-violet-800: #4E4695;
  --rd-orange-700: #B75204;  /* large text only on beige */
  --rd-ink-2: #4A4741;
  --rd-ink-3: #716D63;       /* 4.65:1 on beige */
  --rd-muted: #959187;       /* decoration only, not body text */
  --rd-line: #E4DFD1;
  --rd-line-2: #EFEADC;

  /* The baked backgrounds of the 12 Pony clips, as Chrome decodes them
     (measured by scripts/build-web-media.cjs). A stage that holds a clip
     takes the clip's own colour so the edge disappears. */
  --rd-clip-cream: #F7F3E9;   /* header, contacts, recruiting-hand, focus-* frames */
  --rd-clip-black: #0F0F0F;   /* company-header, consulting-header, consulting-hand */
  --rd-clip-pure-black: #000000; /* contacts_second */
  --rd-clip-violet: #7F72FF;  /* contacts_first, top of consulting-group */
  --rd-clip-orange-card: #FF7900; /* the rounded card inside focus-* */

  --rd-font-display: "PP Grafier", Georgia, "Times New Roman", serif;
  --rd-font-ui: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --rd-r-card: 20px;
  --rd-r-ctl: 12px;
  --rd-r-pill: 999px;
  --rd-shadow-card: 0 1px 2px rgba(15,15,15,.03), 0 24px 48px -28px rgba(15,15,15,.16);
  --rd-ease: cubic-bezier(.2,.7,.1,1);
  --rd-focus: 0 0 0 3px var(--rd-beige), 0 0 0 5px var(--rd-violet-600);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--rd-beige);
  color: var(--rd-ink);
  font-family: var(--rd-font-ui);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0;               /* Pony rule: letter spacing 0 everywhere */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Only PP Grafier Regular ships: never let the browser fake a bold or italic. */
  font-synthesis: none;
}
img, video, svg { display: block; max-width: 100%; }
/* Never let width/height attributes stretch a Pony render. */
img { height: auto; }
a { color: inherit; }

/* Headings: Grafier Regular only, never bold, never paired with Grafier. */
.rd-display, h1, h2 {
  font-family: var(--rd-font-display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.02;
}

/* Buttons. Primary is violet with ink text (5.25:1). White text on violet or
   orange fails contrast and is not allowed. Raw orange never carries text. */
.rd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 1.4em;
  border-radius: var(--rd-r-pill);
  border: 1.5px solid transparent;
  font: 500 16px/1 var(--rd-font-ui);
  text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--rd-ease), color .2s var(--rd-ease), border-color .2s var(--rd-ease), transform .2s var(--rd-ease);
}
.rd-btn:active { transform: translateY(1px); }
.rd-btn--primary { background: var(--rd-violet); color: var(--rd-ink); }
.rd-btn--primary:hover { background: #8F84FF; }
.rd-btn--ink { background: var(--rd-ink); color: var(--rd-beige); }
.rd-btn--ink:hover { background: var(--rd-grey); }
.rd-btn--ghost { background: transparent; color: var(--rd-ink); border-color: currentColor; }
.rd-btn--ghost:hover { background: rgba(15,15,15,.06); }
.rd-on-dark .rd-btn--ghost { color: var(--rd-beige); }
.rd-on-dark .rd-btn--ghost:hover { background: rgba(246,243,233,.1); }

/* Focus is always visible (the live Nuxt pages remove it; we do not). */
/* An outline (not a box-shadow) so no component shadow can hide it, with a
   selector specific enough to win over a version's own button rules. */
html :focus-visible { outline: 3px solid var(--rd-focus-color, var(--rd-violet-600)); outline-offset: 3px; }
.rd-on-dark { --rd-focus-color: var(--rd-beige); }

.rd-skip {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--rd-ink); color: var(--rd-beige); padding: 10px 16px; border-radius: 10px;
  text-decoration: none; transition: top .2s;
}
.rd-skip:focus { top: 12px; }
.rd-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Clip stages: a box whose fill is the clip's baked colour. */
.rd-stage { position: relative; overflow: hidden; background: var(--stage, var(--rd-clip-cream)); }
.rd-stage > video, .rd-stage > img.rd-poster { width: 100%; height: 100%; object-fit: cover; }
.rd-stage--cream { --stage: var(--rd-clip-cream); }
.rd-stage--black { --stage: var(--rd-clip-black); }
.rd-stage--pure-black { --stage: var(--rd-clip-pure-black); }
.rd-stage--violet { --stage: var(--rd-clip-violet); }

/* Honesty notes that sit under an Agent Call button. */
.rd-note { font-size: 14px; line-height: 1.45; color: var(--rd-ink-3); }
.rd-on-dark .rd-note { color: rgba(246,243,233,.72); }
.rd-pending { outline: 1px dashed var(--rd-orange-700); outline-offset: 3px; }

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