/*
 * Constantine Pro brand layer for the Cal.com booker (book.constantine-pro.eu).
 *
 * Served by the calcom-brand nginx container, which injects the <link> into the
 * app HTML and hides the upstream Cal.com wordmark / links. Nothing in the
 * Cal.com image is modified, so a version bump keeps this layer working.
 *
 * Palette mirrors src/styles/tokens.css of the constantine-pro.eu site:
 * light canvas #f7f9fc, white surface, navy accent #204a8e, gold #d3a449.
 * Owner rule: ASCII hyphen only in public copy, never em/en dashes.
 */

/* ---------------------------------------------------------------- tokens -- */
/* html:root / html.dark outrank the app's own :root and .dark blocks, so the
   palette survives even if the app appends its stylesheets after ours. */
html:root,
:host {
  --cp-navy: #1d4376;
  --cp-navy-hover: #17396f;
  --cp-gold: #d3a449;
  --cp-canvas: #f7f9fc;
  --cp-surface: #ffffff;
  --cp-surface-muted: #eef3f9;
  --cp-border: #d8e0eb;
  --cp-text: #101828;
  --cp-text-2: #344054;
  --cp-text-muted: #5f697a;

  /* Cal.com design tokens -> Constantine palette (light) */
  --cal-brand: var(--cp-navy) !important;
  --cal-brand-emphasis: var(--cp-navy-hover) !important;
  --cal-brand-text: #ffffff !important;
  --cal-brand-accent: var(--cp-gold) !important;
  --cal-brand-subtle: var(--cp-gold) !important;
  --brand-color: var(--cp-navy) !important;

  --cal-bg: var(--cp-surface);
  --cal-bg-subtle: var(--cp-canvas);
  --cal-bg-muted: var(--cp-surface-muted);
  --cal-bg-primary: var(--cp-navy);

  --cal-border: var(--cp-border);
  --cal-border-subtle: var(--cp-border);
  --cal-border-booker: var(--cp-border);
  --cal-border-emphasis: #b9c6d8;

  --cal-text: var(--cp-text-2);
  --cal-text-emphasis: var(--cp-text);
  --cal-text-muted: var(--cp-text-muted);
  --cal-text-subtle: var(--cp-text-muted);

  /* rounder corners, closer to the marketing site */
  --radius: 0.625rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
}

/* Site dark palette (src/styles/tokens.css :root[data-theme="dark"]) */
html.dark,
html:root[data-theme="dark"] {
  --cp-navy: #78a8f5;
  --cp-navy-hover: #a9c8fb;
  --cp-gold: #f1b43e;
  --cp-canvas: #0a1220;
  --cp-surface: #111c2e;
  --cp-surface-muted: #17243a;
  --cp-border: #293a53;
  --cp-text: #f4f7fb;
  --cp-text-2: #c8d3e1;
  --cp-text-muted: #94a4b8;

  --cal-brand: #eaaa2f !important;
  --cal-brand-emphasis: #f1b43e !important;
  --cal-brand-text: #101828 !important;
  --cal-brand-accent: #f1b43e !important;
  --cal-brand-subtle: #f1b43e !important;
  --brand-color: #eaaa2f !important;

  --cal-bg: var(--cp-surface);
  --cal-bg-subtle: var(--cp-canvas);
  --cal-bg-muted: var(--cp-surface-muted);

  --cal-border: var(--cp-border);
  --cal-border-subtle: var(--cp-border);
  --cal-border-booker: var(--cp-border);
  --cal-border-emphasis: #405473;

  --cal-text: var(--cp-text-2);
  --cal-text-emphasis: var(--cp-text);
  --cal-text-muted: var(--cp-text-muted);
  --cal-text-subtle: var(--cp-text-muted);
}

/* ------------------------------------------------------------ typography -- */
html,
body,
button,
input,
select,
textarea {
  font-family:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

/* ------------------------------------------- booker shell (card + canvas) -- */
body {
  background-color: var(--cp-canvas);
}

/* the booker card: first child of the page column, the one holding [grid-area] */
main > div > div:first-child:has(> [class~="[grid-area:meta]"]) {
  background-color: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgb(15 23 42 / 0.1);
  overflow: hidden;
}

/* ------------------------------------------------- remove Cal.com claims -- */
/* wordmark + its "powered by" link injected by the Cal.com booker */
a[href^="https://go.cal.com/"],
span:has(> div > a[href^="https://go.cal.com/"]),
span:has(> a[href^="https://go.cal.com/"]) {
  display: none !important;
}

/* --------------------------------------------------------- brand lock -- */
/* Mark + name on the canvas, mirroring the site header lock. Purely visual:
   no DOM is injected into the React tree. */
body::before {
  content: "Constantine Pro";
  position: fixed;
  top: 1.25rem;
  inset-inline-start: 1.5rem;
  z-index: 30;
  padding-inline-start: 2.75rem;
  background-image: url("/__brand/constantine-mark.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 2.125rem 2.125rem;
  color: var(--cp-text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 2.125rem;
  pointer-events: none;
}

/* On phones the card starts in the top-left corner, where the organizer avatar
   already carries the brand mark, so the fixed lock would just sit on top of
   it. Hide it there and keep the mark-only lock above 48rem. */
@media (max-width: 48rem) {
  body::before {
    display: none;
  }
}