/* ===========================================================================
   Fantail & Turtle — tenant theme for ib-assistant.
   Sits on top of the vendored @cruxms/design tokens and components (vendor/cruxms-design/).
   It overrides tokens and adds a few rules. It never redefines a component.

   Scoped to :root[data-tenant-theme="fantail"], which out-ranks a bare :root, so stylesheet
   load order cannot silently defeat it (the failure mode ADOPTION.md warns about).
   Set <html data-tenant-theme="fantail"> from the tenant row; do not hardcode it.

   Source of the brand values: fantailandturtle.co.nz child-theme CSS and rendered pages, 2026-10-08.
   Light theme only.
   =========================================================================== */

/* Montserrat, self-hosted (SIL OFL, licence in assets/fonts/). Two weights only: 600 and 700, for headings. */
@font-face { font-family: 'Montserrat'; font-weight: 600; font-style: normal; font-display: swap; src: url('/assets/fonts/montserrat-600.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-style: normal; font-display: swap; src: url('/assets/fonts/montserrat-700.woff2') format('woff2'); }

:root[data-tenant-theme="fantail"] {
  color-scheme: light;

  /* ---- Brand, verbatim from the venue site ---- */
  --ft-green:      #173d32;   /* deep green: the one primary action, headings, logo */
  --ft-beige:      #faf8f3;   /* page background */
  --ft-grey:       #d8d8d8;   /* site grey: dividers, disabled */
  --ft-coral:      #f86565;   /* DECORATIVE accent only: fails contrast as text (2.98:1 on white) */
  --ft-coral-text: #c8433f;   /* coral for any text or icon that must be read: 4.57:1 on beige */

  /* ---- Neutrals ---- */
  --bg:           var(--ft-beige);
  --surface:      #ffffff;
  --surface-sunk: #f1ede2;
  --border:       #e4dfd2;    /* warm hairline, decorative */
  --border-2:     #76827b;    /* control borders: 4.00:1 on white, 3.77:1 on beige */

  --ink:          #1f2a26;
  --text:         #1f2a26;    /* 13.96:1 on beige */
  --text-muted:   #56625b;    /* 6.01:1 on beige */
  --text-faint:   #5b665f;    /* 5.64:1 on beige */
  --neutral-text: #56625b;

  /* ---- Primary = brand green ---- */
  --primary:      var(--ft-green);
  --primary-d:    #0f2b23;
  --primary-pale: #e3ece6;
  --focus-ring:   rgba(23, 61, 50, .5);

  /* The single product here is IB, so its module accent is the brand green. */
  --ib:           var(--ft-green);
  --ib-pale:      var(--primary-pale);
  --sc:           var(--ft-green);
  --sc-pale:      var(--primary-pale);

  /* Semantic colours are NOT rebranded: green/amber/red must keep their meaning.
     Brand green is much darker than --success, and every status carries an icon and a word as well. */

  /* ---- Square corners, as on the site ---- */
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;           /* pills (badges, source chips, the mic) keep --r-full */

  /* ---- Quiet elevation: the site is almost flat ---- */
  --shadow-1: 0 1px 2px rgba(31, 42, 38, .06);
  --shadow-2: 0 4px 10px rgba(31, 42, 38, .08);
  --shadow-3: 0 12px 28px rgba(31, 42, 38, .12);

  /* ---- Type: Montserrat is the closest free match to the site's Gotham (licensed) ---- */
  --font-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Comfortable, not compact: Travis reads this on a phone between tasks ---- */
  --tap-min: 48px;
}

/* Headings: uppercase, as on the site. Montserrat only at 20px and above, weights 600 and 700. */
:root[data-tenant-theme="fantail"] .display,
:root[data-tenant-theme="fantail"] h1,
:root[data-tenant-theme="fantail"] h2 {
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ft-green);
}
:root[data-tenant-theme="fantail"] .display,
:root[data-tenant-theme="fantail"] h1 { font-weight: 700; }

/* Buttons: flat rectangles, uppercase labels, 1px border, inverse on hover (as on the site). */
:root[data-tenant-theme="fantail"] .btn {
  min-height: var(--tap-min);
  padding: 0 24px;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .8125rem;
  box-shadow: none;
}
:root[data-tenant-theme="fantail"] .btn-primary {
  background: var(--ft-green);
  color: var(--ft-beige);
  border-color: var(--ft-green);
  box-shadow: none;
}
:root[data-tenant-theme="fantail"] .btn-primary:hover {
  background: var(--ft-beige);
  color: var(--ft-green);
  border-color: var(--ft-green);
  box-shadow: none;
}
:root[data-tenant-theme="fantail"] .btn-secondary {
  background: transparent;
  color: var(--ft-green);
  border-color: var(--ft-green);
  box-shadow: none;
}
:root[data-tenant-theme="fantail"] .btn-secondary:hover {
  background: var(--ft-green);
  color: var(--ft-beige);
  box-shadow: none;
}
:root[data-tenant-theme="fantail"] .btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Brand details */
:root[data-tenant-theme="fantail"] .ft-logo      { display: block; height: 28px; width: auto; }
:root[data-tenant-theme="fantail"] .ft-mark      { height: 40px; width: 40px; }
:root[data-tenant-theme="fantail"] .ft-rule      { border: 0; border-top: 1px solid var(--border); }
:root[data-tenant-theme="fantail"] .ft-accent-bar { height: 3px; background: var(--ft-coral); width: 48px; }
:root[data-tenant-theme="fantail"] .ft-accent-text { color: var(--ft-coral-text); }