/* FMS design tokens — loaded first on every surface (website, control
   panel, office console, field app, print). One type family (Noto Sans),
   one interactive colour (field green), DV SOFT family colours kept out of
   interaction. Light only for now: a dark theme would redefine these
   custom properties and nothing else.
   See docs/premium-design-brief.md §4. Frozen after Phase 1. */

:root {
  color-scheme: light;

  /* FMS brand: field green */
  --brand-950: #06231f;
  --brand-900: #0d2b26;   /* deep surfaces: CTA band, app bars, field header */
  --brand-800: #063f37;   /* text on brand tints (10.4:1 on --brand-50) */
  --brand-700: #08574c;   /* hover/pressed (white on it 8.47:1) */
  --brand-600: #0b6b5d;   /* THE interactive colour (6.41:1 on white; white on it 6.41:1) */
  --brand-500: #1f8a78;   /* decoration only: charts, mockups */
  --brand-300: #8fc7b9;   /* borders on tint, glyphs on dark */
  --brand-100: #dff0ea;   /* selected rows, active nav, chips (brand-600 on it 5.43:1) */
  --brand-50:  #eff7f4;   /* hero wash, tinted sections */
  --brand-rgb: 11, 107, 93;

  /* DV SOFT family (never interactive) */
  --dv-plum: #602874;
  --dv-red: #d9294b;
  --dv-orange: #ea580c;
  --dv-hairline: linear-gradient(90deg, var(--dv-plum) 0%, var(--dv-red) 55%, var(--dv-orange) 100%);
  --gold-400: #f2b25c;    /* highlight on dark only (8.12:1 on --brand-900); never text on light (1.86:1) */
  --gold-700: #a55b00;    /* warm text on light (5.13:1) */
  --gold-50:  #fdf3e3;

  /* Neutrals (warm grey, family with HMS) */
  --ink:   #161a19;       /* 17.56:1 on white */
  --ink-2: #454f4c;       /* body/secondary 8.48:1 */
  --ink-3: #5c6662;       /* lowest text colour allowed, 5.95:1 white / 5.53:1 alt */
  --on-dark:   #ffffff;
  --on-dark-2: #c9dbd5;   /* 10.48:1 on --brand-900 */
  --on-dark-3: #9fb8b0;   /* 7.16:1 */
  --surface: #ffffff;
  --surface-alt: #f5f7f6; /* alternating sections, footer, table hover */
  --canvas: #eef1ef;      /* console page background */
  --line: #e1e5e3;        /* card and table rules */
  --line-strong: #c8ccc9; /* dividers that must be seen; field-app card borders */
  --line-input: #8a938f;  /* form control borders: 3.16:1 meets 1.4.11 */

  /* Semantic (each text/bg pair >= 4.5:1) */
  --ok: #1d7a46;     --ok-bg: #e8f5ec;      /* 4.77:1 */
  --warn: #8a5300;   --warn-bg: #fdf3e3;    /* 5.76:1, "someone is waiting" */
  --danger: #b42318; --danger-bg: #fdecea;  /* 5.75:1 */
  --info: var(--brand-600); --info-bg: var(--brand-50);

  /* Focus */
  --focus: var(--brand-600);
  --focus-on-dark: var(--gold-400);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);

  /* Type */
  --font-sans: "Noto Sans", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* Website type scale (fluid) */
  --fs-display: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem);   /* lh 1.08, ls -0.022em, 700 */
  --fs-h1:      clamp(2.125rem, 1.7rem + 1.8vw, 3rem);    /* lh 1.12, ls -0.018em, 700 */
  --fs-h2:      clamp(1.75rem, 1.45rem + 1.2vw, 2.375rem);/* lh 1.18, ls -0.014em, 600 */
  --fs-h3:      clamp(1.375rem, 1.25rem + .5vw, 1.625rem);/* lh 1.28, ls -0.01em, 600 */
  --fs-h4:      1.25rem;                                  /* lh 1.35, 600 */
  --fs-lead:    clamp(1.125rem, 1.05rem + .3vw, 1.3125rem); /* lh 1.55, 400, --ink-2 */
  --fs-body:    1rem;      /* lh 1.6 */
  --fs-sm:      .875rem;   /* lh 1.5 */
  --fs-xs:      .8125rem;  /* lh 1.45, minimum size for any text */
  --fs-eyebrow: .9375rem;  /* 600, sentence case, --brand-600; NOT uppercase mono */

  /* Console scale (fixed) */
  --fs-c-title: 1.75rem;   /* page h1, 600, ls -0.012em */
  --fs-c-h2:    1.25rem;   /* section/panel titles, 600 */
  --fs-c-body:  .875rem;   /* 14px tables and forms */
  --fs-c-label: .8125rem;  /* 600, sentence case labels and table headers */

  /* Spacing (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; --s-13: 128px;
  --section-y: clamp(56px, 2.5rem + 4vw, 112px);

  /* Grid */
  --container: 1280px;
  --gutter: 24px;          /* 16px below 860px */
  --grid-gap: 24px;
  --header-h: 56px;
  --section-nav-h: 48px;
  --tabbar-h: 64px;

  /* Radius: rounded, not bubbly */
  --r-sm: 4px;   /* tags, table chips */
  --r-md: 6px;   /* buttons, inputs, menus */
  --r-lg: 8px;   /* cards, panels, stat tiles */
  --r-xl: 12px;  /* plan cards, media frames, field cards */
  --r-2xl: 16px; /* hero visual frame */
  --r-pill: 999px; /* badges, status pills only */

  /* Elevation ramp, tinted with the deep green */
  --sh-2:  0 0 1px rgba(13,43,38,.10), 0 1px 2px rgba(13,43,38,.06);
  --sh-4:  0 0 2px rgba(13,43,38,.08), 0 2px 4px rgba(13,43,38,.08);
  --sh-8:  0 0 2px rgba(13,43,38,.08), 0 4px 8px rgba(13,43,38,.10);
  --sh-16: 0 0 2px rgba(13,43,38,.08), 0 8px 16px rgba(13,43,38,.12);
  --sh-28: 0 0 8px rgba(13,43,38,.06), 0 14px 28px rgba(13,43,38,.14);
  --sh-64: 0 0 8px rgba(13,43,38,.08), 0 32px 64px rgba(13,43,38,.18);

  /* Motion */
  --dur-1: 100ms; --dur-2: 160ms; --dur-3: 240ms;
  --ease-out: cubic-bezier(.1, .9, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
}

@media (max-width: 859.98px) {
  :root { --gutter: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* Base type. Each surface stylesheet (product.css, app.css, print.css) still
   sets its own body size and may set its own family; this is the default
   for anything that does not. */
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm);
}
.on-dark :where(a, button, input, select, textarea, summary):focus-visible { outline-color: var(--focus-on-dark); }

/* Hidden on screen, read by assistive technology. Bootstrap ships the same
   class; this copy serves the pages that do not load Bootstrap. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* Skip link, on every layout: the first stop for a keyboard. Out of sight
   until it has focus, then a small pill over the top bar, fixed so it never
   pushes the page down. Our own rule, not Bootstrap's, so it holds even if
   Bootstrap fails to load. */
.skip-link {
  position: fixed;
  top: 6px;
  left: 8px;
  z-index: 1000;
  padding: 6px 14px;
  border-radius: var(--r-pill, 999px);
  background: var(--surface, #fff);
  color: var(--brand-700, #0b5a4f);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: 0 0 0 2px var(--focus, #1a73e8), 0 6px 18px rgba(13, 43, 38, .28);
}
.skip-link:not(:focus) {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  box-shadow: none;
}
.skip-link:focus { outline: none; }

/* Money, counts and stat values line up in columns. */
.tabular { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   Brand primitives, shared by every surface (here because tokens.css is
   the one stylesheet every layout loads).
   --------------------------------------------------------------------- */

/* The DV SOFT | FMS lockup (partials/lockup.php):
   [wordmark 28px] | [FMS over FIELD FORCE MANAGEMENT]. On a dark ground add
   .lockup-on-dark: the wordmark sits on a white chip, as in HMS. */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.1;
}
.lockup:hover { color: var(--ink); }
.lockup-wordmark { display: inline-flex; align-items: center; flex: none; }
.lockup-wordmark img { display: block; width: auto; height: 28px; }
.lockup-divider { width: 1px; height: 24px; background: var(--line-strong); flex: none; }
.lockup-product { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; }
.lockup-name { font-size: 1.1rem; font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--ink); }
.lockup-desc {
  font-size: .7rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-600);
  white-space: nowrap;
}
.lockup-sm .lockup-wordmark img { height: 24px; }
.lockup-on-dark .lockup-wordmark { padding: 6px 10px; background: #fff; border-radius: var(--r-lg); }
.lockup-on-dark .lockup-wordmark img { height: 22px; }
.lockup-on-dark .lockup-divider { background: rgba(255, 255, 255, .28); }
.lockup-on-dark .lockup-name { color: var(--on-dark); }
.lockup-on-dark .lockup-desc { color: var(--brand-300); }

/* The FMS mark (assets/img/fms-mark.svg) as an <img>. */
.fms-mark { display: inline-block; width: 32px; height: 32px; flex: none; }

/* A client's company monogram (monogram() in helpers.php): white initials
   on field green, 32px, radius 8. .monogram-lg is 48px, .monogram-sm 24px. */
.monogram {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--r-lg);
  background: var(--brand-600);
  color: #fff;
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
  line-height: 1;
  user-select: none;
}
.monogram-sm { width: 24px; height: 24px; border-radius: 6px; font-size: .6875rem; }
.monogram-lg { width: 48px; height: 48px; border-radius: var(--r-xl); font-size: 1.125rem; }
.on-dark .monogram { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }

/* An owner slot (partials/owner_slot.php): shown only when APP_ENV=local,
   so a missing fact is visible in development and absent in production. */
.owner-slot {
  margin: var(--s-4) 0;
  padding: var(--s-4) var(--s-5);
  border: 2px dashed var(--gold-700);
  border-radius: var(--r-lg);
  background: var(--gold-50);
  color: var(--ink);
  font-size: var(--fs-sm);
}
.owner-slot strong { color: var(--gold-700); }