/*
 * F-Fix public brand system (2026-07-29).
 *
 * Shared foundation for every public-facing page (customer / vendor /
 * technician surfaces reached from a LINE link) so they read as one
 * product with the marketing site (ffix-web) instead of carrying over
 * the sibling B2B system's look.
 *
 * Source of truth for the tokens below: ffix-web/src/lib/brandColor.mjs
 * (brand blue #2653F1 + derived tint/shade ramp, blue-tinted ink/paper)
 * and ffix-web/src/styles/global.css (fonts, bubble-shape utilities,
 * focus states). Fonts are self-hosted from static/fonts/ — no external
 * font requests (@font-face src below, not @import from a CDN).
 *
 * This file is additive: pages keep their own layout/behavioural markup
 * and JS untouched. Each page's embedded <style> block is edited to
 * consume these variables/classes instead of the old ad-hoc palette.
 */

/* ---------------------------------------------------------------------
 * Self-hosted fonts. Only the weights actually used ship (see
 * static/fonts/*/LICENSE for the SIL OFL text each family ships under).
 * --------------------------------------------------------------------- */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/kanit/kanit-thai-400.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/kanit/kanit-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/kanit/kanit-thai-500.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/kanit/kanit-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/kanit/kanit-thai-600.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/kanit/kanit-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/kanit/kanit-thai-700.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/kanit/kanit-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/kanit/kanit-thai-800.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/kanit/kanit-latin-800.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-thai/ibm-plex-sans-thai-thai-400.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-thai/ibm-plex-sans-thai-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-thai/ibm-plex-sans-thai-thai-500.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-thai/ibm-plex-sans-thai-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-thai/ibm-plex-sans-thai-thai-600.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-thai/ibm-plex-sans-thai-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto-sans-sc/noto-sans-sc-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/noto-sans-sc/noto-sans-sc-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/noto-sans-sc/noto-sans-sc-700.woff2') format('woff2');
}

/* ---------------------------------------------------------------------
 * Color tokens. Brand blue #2653F1 is the one constant; the ramp and
 * ink/paper below are the same values ffix-web derives from it
 * (see brandColor.mjs for the mix() math + contrast notes).
 * --------------------------------------------------------------------- */
:root {
  --ffx-brand-50:  #EDF1FE;
  --ffx-brand-100: #DAE3FD;
  --ffx-brand-200: #B9C9FA;
  --ffx-brand-300: #92A8F6;
  --ffx-brand-400: #5A79F4;
  --ffx-brand-500: #2653F1;
  --ffx-brand-600: #2148CE;
  --ffx-brand-700: #1A38A9;
  --ffx-brand-800: #142984;
  --ffx-brand-900: #0E1B60;
  --ffx-ink:  #050A1D;
  --ffx-paper: #F8FAFF;

  --ffx-font-display: 'Kanit', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ffx-font-body: 'IBM Plex Sans Thai', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Chinese stack — one definition, consumed by the :lang(zh) rules below and
     available to any page that needs it for its own display-face elements. */
  --ffx-font-cjk: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}

/* Per-script type system — kept in step with ffix-web/src/styles/global.css's
   2026-07-30 pass (this file's stated source of truth), so the app pages and
   the marketing site render the same script the same way.
     - Thai (default, no override): Kanit display / IBM Plex Sans Thai body.
     - Chinese: the reader's own platform CJK face FIRST (PingFang SC on
       Apple, Microsoft YaHei on Windows, the OS face elsewhere). A real
       device almost always has a better native CJK face installed than
       anything we can ship, and it costs nothing to load. Noto Sans SC —
       self-hosted above — stays as the safety net, never the first choice.
   Deliberately narrower than global.css's pass: typeface selection only. The
   site also loosens Chinese line-height/letter-spacing globally, which is
   right for long-form marketing prose but would silently re-flow every
   Chinese app page in this repo (forms, LINE-embedded pages, the vendor
   guide), so that part is left to whoever tests those pages.

   Kanit carries no CJK glyphs at all, so display-face elements need the
   override too, or the biggest text on a Chinese page falls through Kanit's
   own fallback tail. Pages with display-face elements that are neither a
   heading nor a form control (a styled card title, say) should opt in with
   the `.ffx-display` class rather than restating the stack. */
:lang(zh),
:lang(zh) body, :lang(zh) p, :lang(zh) li, :lang(zh) dt, :lang(zh) dd,
:lang(zh) td, :lang(zh) th, :lang(zh) summary, :lang(zh) label,
:lang(zh) input, :lang(zh) button,
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3, :lang(zh) h4,
:lang(zh) .ffx-display {
  font-family: var(--ffx-font-cjk);
}

/* ---------------------------------------------------------------------
 * Shared shape/utility classes — the asymmetric "speech bubble" motif
 * from ffix-web (one corner squared off so a rounded block reads as a
 * message, not a generic rounded-rect card), plus a focus-visible ring
 * that meets WCAG 2.4.11 on both light and dark surfaces.
 * --------------------------------------------------------------------- */
.ffx-shape-bubble {
  border-radius: 1.5rem 1.5rem 1.5rem 0.3rem;
}
.ffx-shape-bubble-alt {
  border-radius: 1.5rem 1.5rem 0.3rem 1.5rem;
}
.ffx-shape-bubble-sm {
  border-radius: 0.9rem 0.9rem 0.9rem 0.2rem;
}

:focus-visible {
  outline: 3px solid var(--ffx-brand-700);
  outline-offset: 2px;
  border-radius: 2px;
}
.ffx-on-brand :focus-visible,
.ffx-on-brand:focus-visible {
  outline-color: var(--ffx-brand-200);
}

/* Horizontal brand lockup (bubble glyph + "F-Fix" wordmark) for page
   chrome — mirrors ffix-web's BrandMark.astro. NOT the square app-icon
   tile; that stays as the favicon only (see ffx-mark.svg / favicon links
   added per-page). `currentColor` so `.ffx-mark--light` / the default
   dark-on-paper case both work from one rule set. */
.ffx-brandmark {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--ffx-font-display);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  color: var(--ffx-ink);
}
.ffx-brandmark svg {
  height: 0.9em;
  width: auto;
  flex-shrink: 0;
  color: var(--ffx-brand-500);
}
.ffx-brandmark.ffx-brandmark--on-brand {
  color: var(--ffx-paper);
}
.ffx-brandmark.ffx-brandmark--on-brand svg {
  color: var(--ffx-paper);
}

/* Minimum tap-target guard: most users arrive from LINE on a phone. Any
   element opting into this class gets a real 44px hit area even if its
   visible content is smaller. */
.ffx-tap-target {
  min-height: 44px;
  min-width: 44px;
}