/*
  Livestock Overview v2. Design tokens.

  Extracted from index.html on 2026-05-28 as part of the self-contained restructure.
  These values mirror the Nofence design system tokens. Names use the nf- prefix so
  they map 1:1 to the Figma variable set.

  Lines marked `nf-audit: skip` are intentional placeholders that should be ignored
  by the design-system audit tool (heat-state tints + phone-bezel chrome).
*/

/* === FONT (self-hosted variable Inter) === */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/InterVariable.woff2') format('woff2-variations');
}

/* === TOKENS === */
:root {
  /* Backgrounds */
  --nf-bg-primary: #FFFFFF;
  --nf-bg-card: #FAFAFA;
  --nf-bg-secondary: #E9EAEB;
  --nf-bg-section: #F5F5F5;
  --nf-bg-dark: #181D27;
  --nf-bg-brand: #5FA526;
  --nf-bg-brand-hover: #4C841E;
  --nf-bg-brand-soft: #DDEDC9;
  --nf-bg-brand-subtle: #EFF6E9;
  --nf-bg-warning-soft: #FEF0C7;
  --nf-bg-warning-solid: #F79009;
  --nf-bg-success-solid: #079455;
  --nf-bg-heat-soft: #FBE7EF; /* nf-audit: skip heat tint proxy */

  /* Text */
  --nf-text-primary: #212722;
  --nf-text-secondary: #414651;
  --nf-text-tertiary: #535862;
  --nf-text-placeholder: #717680;
  --nf-text-brand-primary: #0F4030;
  --nf-text-brand-link: #396317;
  --nf-text-warning: #B54708;
  --nf-text-white: #FFFFFF;
  --nf-text-heat: #C8336D; /* nf-audit: skip heat tint proxy */

  /* Borders */
  --nf-border-primary: #D5D7DA;
  --nf-border-secondary: #E9EAEB;
  --nf-border-brand-subtle: #BFDBA8;
  --nf-border-heat: #F3B7CE; /* nf-audit: skip heat tint proxy */

  /* Radius */
  --nf-radius-sm: 6px;
  --nf-radius-md: 8px;
  --nf-radius-lg: 12px;
  --nf-radius-xl: 16px;

  /* Shadow */
  --nf-shadow-sm: 0 1px 2px rgba(10,13,18,.05);
  --nf-shadow-fab: 0 8px 16px rgba(10,13,18,.18), 0 2px 4px rgba(10,13,18,.08);

  /* Layout (phone scaffold) */
  --nf-safe-top: 47px;
  --nf-safe-bottom: 34px;
  --nf-bottom-nav: 48px;

  /* Phone bezel (prototype chrome only, not a design-system token) */
  --nf-phone-bezel-inner: #1a1a1a; /* nf-audit: skip phone bezel */
  --nf-phone-bezel-outer: #2a2a2a; /* nf-audit: skip phone bezel */

  /* === Added 2026-05-28: resolved from UX Arena pasture-card token bindings === */

  /* Info (utility-blue-light tones). used for "Collar config" pill, status callouts */
  --nf-bg-info-soft: #F0F9FF;     /* Colors/Blue light/50 */
  --nf-border-info: #B9E6FE;      /* Colors/Blue light/200 */
  --nf-text-info: #026AA2;        /* Colors/Blue light/700 */

  /* Meta (utility-purple tones). used for "Herd in pasture" pill, grouping/tagging */
  --nf-bg-meta-soft: #F4F3FF;     /* Colors/Purple/50 */
  --nf-border-meta: #D9D6FE;      /* Colors/Purple/200 */
  --nf-text-meta: #5925DC;        /* Colors/Purple/700 */

  /* Destructive / error. used for alert badges with warning counts */
  --nf-bg-error-solid: #D92D20;   /* Status UI Colors/Error UI/600 */
  --nf-bg-error-soft: #FEE4E2;    /* Status UI Colors/Error UI/50, mirrors --nf-bg-warning-soft pattern */
  --nf-border-error: #F04438;     /* Status UI Colors/Error UI/500 */
  --nf-text-error: #B42318;       /* Status UI Colors/Error UI/700 */

  /* === Added 2026-05-30: a11y focus indicator (WCAG AA). Required for keyboard nav. === */
  /* Used by :focus-visible across every interactive twin (article-card, profile-account-tile, */
  /* collar-marker, fab, list-link, secondary-navigation, bottom-nav, etc.) */
  --nf-focus-ring: 2px solid var(--nf-bg-brand);
  --nf-focus-ring-offset: 2px;

  /* === Added 2026-05-30: map-overlay tokens (resolve hardcoded hex in pasture-polygon) === */
  /* Pasture-polygon default state */
  --nf-map-overlay-fill: #FFD66B;                  /* Colors/Warning/200, semi-transparent fill */
  --nf-map-overlay-fill-opacity: 0.40;
  --nf-map-overlay-stroke: #C49B26;                /* Colors/Warning/600, dashed boundary */
  --nf-map-overlay-stroke-opacity: 0.9;
  /* Pasture-polygon active state. Used when the user selects a pasture on the map. */
  --nf-map-overlay-fill-active: #5FA526;           /* Brand green, signals selected */
  --nf-map-overlay-fill-active-opacity: 0.30;
  --nf-map-overlay-stroke-active: #4C841E;         /* Brand green darker, dashed boundary */

  /* === Added 2026-06-04: Series C pasture overlay (proxies -> nearest existing tokens) === */
  --nf-pasture-boundary: var(--nf-text-white);        /* solid white field boundary */
  --nf-pasture-ungrazed: var(--nf-bg-secondary);      /* #E9EAEB grey scrim = ungrazed */
  --nf-pasture-grazed: var(--nf-bg-brand);            /* #5FA526 green = grazed / active */
  --nf-pasture-exclusion: var(--nf-bg-warning-solid); /* #F79009 orange exclusion zone */

  /* === Added 2026-06-03: Series C accuracy pass. Resolved from Figma published variables (REST). === */
  /* These exact DS values were used by the Card / Status / Notification components but were not yet */
  /* in this local tokens.css subset. Names mirror the Figma variable names. Flagged to James. */
  --nf-text-strong: #181D27;          /* Product UI Neutrals/900: card identifier text */
  --nf-text-placeholder-alt: #D5D7DA; /* Product UI Neutrals/300: optional-name placeholder */
  --nf-icon-muted: #94979C;           /* Product UI Neutrals/400: secondary identifier icons */
  --nf-bg-warning-subtle: #FFFAEB;    /* Colors/Warning/50: badge background */
  --nf-text-warning-strong: #DC6803;  /* Colors/Warning/600: badge text + icon */
  --nf-success-500: #17B26A;          /* Success UI/500: battery level fill */
  --nf-chart-line-mid: #7FB751;       /* FLAG: Series C activity chart mid-green (Figma 198:6224). No exact DS token; nearest --nf-bg-brand #5FA526. */
  --nf-pasture-draw: var(--nf-bg-brand);  /* Pasture-designer draw colour. Repointed from teal proxy to brand green (#5FA526) for DS consistency. */
  --nf-fence-draw: var(--nf-text-info);   /* FLAG: pasture-designer fence-line colour (stroke only, no fill). Proxy = info blue #026AA2 to read distinct from pasture green. Confirm with James. */
  --nf-chart-green-soft: #9FC97D;         /* FLAG: Series C donut/ring chart mid-light green segment (Figma Stat Card 3534:6430). Sits between --nf-chart-line-mid #7FB751 and --nf-border-brand-subtle #BFDBA8. Confirm with James. */
}

/* === BASE === */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--nf-bg-secondary);
  color: var(--nf-text-primary);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}