/* ===========================================================================
   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:   var(--ft-green);   /* solid: 10:1 on beige (the old 50% tint was under 3:1) */

  /* 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. */

  /* ---- Soft corners (Mark, 2026-10-08: the square, flat look of the site did not suit an app) ---- */
  --r-sm: 12px;        /* fields */
  --r-md: 16px;        /* cards, the ask box */
  --r-lg: 24px;        /* large panels; buttons, badges and chips are pills (--r-full) */

  /* ---- Visible but gentle elevation, tinted with the brand ink ---- */
  --shadow-1: 0 1px 2px rgba(31, 42, 38, .08), 0 2px 6px rgba(31, 42, 38, .06);
  --shadow-2: 0 6px 16px rgba(31, 42, 38, .12), 0 2px 4px rgba(31, 42, 38, .06);
  --shadow-3: 0 16px 36px rgba(31, 42, 38, .16), 0 4px 8px rgba(31, 42, 38, .08);
  --shadow-inset: inset 0 2px 4px rgba(31, 42, 38, .10);   /* fields: they read as hollows you type into */

  /* ---- 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: sentence case (Mark, 2026-10-24: capitals are harder to read). 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: none;
  letter-spacing: 0;
  color: var(--ft-green);
}
:root[data-tenant-theme="fantail"] .display,
:root[data-tenant-theme="fantail"] h1 { font-weight: 700; }

/* Buttons: pills with a soft shadow that lifts on hover and presses on click (the vendored system supplies the lift and the
   press). Sentence-case labels. */
:root[data-tenant-theme="fantail"] .btn {
  min-height: var(--tap-min);
  padding: 0 28px;
  justify-content: center;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: .9375rem;
  border-radius: var(--r-full);
}
:root[data-tenant-theme="fantail"] .btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ft-green) 90%, white) 0%, var(--ft-green) 100%);
  color: var(--ft-beige);
  border-color: var(--primary-d);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .16);
}
:root[data-tenant-theme="fantail"] .btn-primary:hover {
  background: linear-gradient(180deg, var(--ft-green) 0%, var(--primary-d) 100%);
  color: var(--ft-beige);
  border-color: var(--primary-d);
  box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255, 255, 255, .12);
  transform: translateY(-1px);
}
:root[data-tenant-theme="fantail"] .btn-secondary {
  background: var(--surface);
  color: var(--ft-green);
  border-color: var(--ft-green);
  box-shadow: var(--shadow-1);
}
:root[data-tenant-theme="fantail"] .btn-secondary:hover {
  background: var(--primary-pale);
  color: var(--ft-green);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
:root[data-tenant-theme="fantail"] .btn:active { transform: translateY(1px); box-shadow: var(--shadow-1); }
:root[data-tenant-theme="fantail"] .btn:disabled { box-shadow: none; transform: none; }
:root[data-tenant-theme="fantail"] .btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Fields: rounded, with an inset so they look like hollows; a clear green ring on focus. */
:root[data-tenant-theme="fantail"] input:not([type="checkbox"]):not([type="radio"]),
:root[data-tenant-theme="fantail"] textarea,
:root[data-tenant-theme="fantail"] select {
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-inset);
  background: var(--surface);
}
:root[data-tenant-theme="fantail"] .ask textarea { border-radius: var(--r-md); }
:root[data-tenant-theme="fantail"] input:not([type="checkbox"]):not([type="radio"]):focus,
:root[data-tenant-theme="fantail"] textarea:focus,
:root[data-tenant-theme="fantail"] select:focus {
  border-color: var(--ft-green);
  box-shadow: var(--shadow-inset), 0 0 0 4px var(--primary-pale);
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Cards: lifted off the beige page. */
:root[data-tenant-theme="fantail"] .card { box-shadow: var(--shadow-1); }

/* 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); }