/* ===========================================================================
   BALOGA brand layer: the "Year" design, applied site-wide.

   The homepage (src/pages/index.astro) is the source of this look: cream
   paper, ink outlines, cobalt and lime, chunky Bricolage Grotesque, pills and
   rounded cards with hard drop shadows. Every other page was built for the
   original black/white/red design, using the same handful of tokens and
   utility idioms (--ink, --paper, --pop, .anton, .font-mono labels, border-2
   boxes). Rather than rewrite each page, this file redefines those tokens and
   idioms, so every page that links it picks up the new design at once.

   Rules are prefixed with `html` on purpose. Pages still carry their own
   inline :root / .anton definitions from the old design, and the extra type
   selector is what lets these win without !important.

   Not linked by /admin/classic-home, which keeps the original design.
   =========================================================================== */

/* ---- Brand font, served from this site --------------------------------------
   Bricolage Grotesque (SIL Open Font License), variable weight 200-800, saved
   from Google Fonts into /fonts so pages don't wait on a third-party request.
   Pages preload the latin file. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Arial, resized to Bricolage's proportions, shown for the moment before the
   real font arrives so text doesn't jump when it swaps in. Bricolage narrows
   relative to Arial as it gets heavier, so each weight band has its own scale
   (measured in the browser: 93.7% at 400, 89.7% at 600, 81% at 800). */
@font-face {
  font-family: 'Bricolage Fallback';
  font-weight: 200 549;
  src: local('Arial'), local('ArialMT');
  size-adjust: 93.7%;
  ascent-override: 99.3%;
  descent-override: 28.8%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Bricolage Fallback';
  font-weight: 550 649;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 89.7%;
  ascent-override: 103.7%;
  descent-override: 30.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Bricolage Fallback';
  font-weight: 650 749;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 85.4%;
  ascent-override: 108.9%;
  descent-override: 31.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Bricolage Fallback';
  font-weight: 750 900;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 81%;
  ascent-override: 114.8%;
  descent-override: 33.3%;
  line-gap-override: 0%;
}

html:root {
  /* The original three tokens, remapped. */
  --ink: #15131c;
  --paper: #fff8ee;
  --pop: #2b3ff5;

  /* The rest of the palette, for pages that opt into it directly. */
  --card: #ffffff;
  --muted: #5f5b6b;
  --cobalt: #2b3ff5;
  --cobalt-deep: #1b2bc4;
  --lime: #d8ff3e;
  --pink: #ffb8dc;
  --lilac: #cfc8ff;
  --tang: #ff7a2b;

  --font-brand: 'Bricolage Grotesque', 'Bricolage Fallback', ui-sans-serif, system-ui, sans-serif;
}

html body,
html .font-inter {
  font-family: var(--font-brand);
}

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

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

/* .anton was the condensed, all-caps display face. It becomes the heavy,
   tight Bricolage the homepage headlines use. */
html .anton {
  font-family: var(--font-brand);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.03em;
}

/* The old monospace micro-labels. Same role, now set in the brand face with
   tabular figures so prices and dates still line up in tables. */
html .font-mono {
  font-family: var(--font-brand);
  font-variant-numeric: tabular-nums;
}

/* Those labels used very wide tracking (0.2em to 0.3em). The homepage's small
   caps labels sit at about 0.06em, so pull every wide setting in to that. */
html [class*='tracking-['],
html .tracking-widest,
html .tracking-wider {
  letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------------------
   Shapes
   --------------------------------------------------------------------------- */

/* Square 2px boxes become rounded ones. Tables are left alone, since rounding
   a table's own border does nothing useful and fights border-collapse. */
html .border-2:not(table):not(thead):not(tbody):not(tr):not(th):not(td),
html .border-4 {
  border-radius: 14px;
}

html input.border-2,
html select.border-2,
html textarea.border-2 {
  border-radius: 12px;
}

/* Filled buttons and the display-face buttons become pills, and the filled
   accent ones sit on the homepage's hard ink shadow. */
html :is(button, a, label).anton,
html :is(button, a, label)[class*='bg-[--pop]'],
html :is(button, a, label)[class*='bg-[--ink]'] {
  border-radius: 999px;
}

html :is(button, a, label)[class*='bg-[--pop]']:not(:disabled) {
  border-color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    background-color 0.15s,
    color 0.15s;
}

html :is(button, a, label)[class*='bg-[--pop]']:not(:disabled):hover {
  transform: translateY(1px);
  box-shadow: 0 2px 0 var(--ink);
}

html :is(button, a, label)[class*='bg-[--pop]']:not(:disabled):active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--ink);
}

/* Keyboard focus: a cobalt ring on light surfaces (6.4:1 on cream), lime on
   the cobalt and ink ones, so it always clears the 3:1 contrast minimum. */
html {
  --focus-ring: var(--cobalt);
}
html :is(.hero, .about, .foot, .card-ink, .login-page) {
  --focus-ring: var(--lime);
}
html .login-page .card {
  --focus-ring: var(--cobalt);
}
html :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   The wordmark (src/components/Wordmark.astro)
   --------------------------------------------------------------------------- */

.bw-mark-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.bw-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-brand);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: inherit;
  text-decoration: none;
  text-transform: none;
}

.bw-cpa {
  border-radius: 999px;
  background: var(--cobalt);
  padding: 4px 8px 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffffff;
  transform: rotate(-6deg);
}

/* On dark backgrounds the pill flips to lime, as in the homepage footer. */
.bw-light .bw-cpa {
  background: var(--lime);
  color: var(--ink);
}

.bw-label {
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--lilac);
  padding: 3px 10px;
  font-family: var(--font-brand);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  transform: rotate(-2deg);
  white-space: nowrap;
}