/* FieldForce design tokens — drop into the child theme as assets/css/tokens.css
   Mirrors the Bricks global variables one-for-one. See 01-DESIGN-TOKENS.md. */

:root {
  /* Brand */
  --ff-red: #FF2E17;
  --ff-red-700: #D81C06;
  --ff-red-800: #B31705;
  --ff-red-tint: #FFE8E3;

  /* Ink & text */
  --ff-ink: #333333;
  --ff-body: #555555;
  --ff-muted: #666666;
  --ff-placeholder: #9A9A92;
  --ff-inactive: #8A8A8A;

  /* Surfaces */
  --ff-page: #FDFCF8;
  --ff-nav: #F1EADE;
  --ff-panel-2: #F8F3EA;
  --ff-beige: #F8F4EC;
  --ff-band: #F1EBDD;
  --ff-sand: #EAE2D3;
  --ff-sand-deep: #DCD2BF;
  /* Lighter than ff-sand, for rules *inside* a card where ff-sand reads too heavy.
     Undocumented in 01-DESIGN-TOKENS.md; used 3x in design/FieldForce Blog.dc.html. */
  --ff-hairline: #EFEAE0;
  /* The design's --line: a cool neutral rule, used inside customer cards where the warm
     sand hairline would fight the logos. Undocumented in 01-DESIGN-TOKENS.md. */
  --ff-line: #E7E7E9;
  /* Card hover border where there is no service accent to borrow. Also undocumented;
     appears only in the two blog designs, so it is deliberately not the global default. */
  --ff-sand-hover: #C4B79E;
  --ff-white: #FFFFFF;

  /* Primary action */
  --ff-navy: #0E246F;
  --ff-navy-800: #081A54;
  --ff-navy-tint: #EEF2FA;
  --ff-navy-link-hover: #5A7FBF;

  /* Data / status */
  --ff-chart-blue: #3F56A3;
  --ff-chart-blue-mid: #A1ADD6;
  --ff-chart-blue-pale: #CDD4EB;
  --ff-chart-blue-tint: #EAEDF6;
  --ff-green: #2E7D52;
  --ff-green-tint: #E9F2EC;
  --ff-green-ok: #2B7A4E;
  --ff-green-ok-tint: #E1EFE6;
  --ff-green-ok-circle: #CDE7D6;
  --ff-amber: #C9821E;
  --ff-amber-tint: #FBF1E2;
  --ff-teal: #0E6F6A;

  /* CTA band (navy-tinted) */
  --ff-cta-bg: #E9EFF5;
  --ff-cta-border: #D6E0EC;
  --ff-cta-body: #5A6472;
  --ff-cta-input-border: #C7D4E2;
  --ff-cta-success-bg: #DBEAF2;
  --ff-cta-success-circle: #C3DBEC;

  /* Type */
  --ff-font: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;

  /* Radii */
  --ff-radius-sm: 9px;
  --ff-radius-tile: 11px;
  --ff-radius-post: 12px;
  --ff-radius: 14px;
  --ff-radius-band: 16px;
  --ff-radius-panel: 22px;
  --ff-radius-pill: 999px;

  /* Shadows */
  --ff-shadow-card: 0 4px 9px -3px rgba(51, 51, 51, 0.08);
  --ff-shadow-hover: 0 12px 26px -20px rgba(51, 51, 51, 0.4);
  --ff-shadow-panel: 0 28px 56px -34px rgba(51, 51, 51, 0.28);
  --ff-shadow-menu: 0 16px 24px -14px rgba(0, 0, 0, 0.28);
  --ff-shadow-navy: 0 12px 26px -12px rgba(14, 36, 111, 0.5);

  /* Layout */
  --ff-page-max: 1920px;
  --ff-content-max: 1720px;
  --ff-gutter: 56px;
  --ff-sec-gap: 44px;
  --ff-card-pad: 22px;

  /* Spacing scale — 01-DESIGN-TOKENS.md §3. These are the ONLY spacing values the
     design uses; anything else is a mistake. Seeded into the Bricks variables
     manager by tools/seed_bricks_globals.php, so this block is the single source. */
  --ff-space-2: 2px;
  --ff-space-4: 4px;
  --ff-space-5: 5px;
  --ff-space-6: 6px;
  --ff-space-8: 8px;
  --ff-space-9: 9px;
  --ff-space-10: 10px;
  --ff-space-11: 11px;
  --ff-space-12: 12px;
  --ff-space-13: 13px;
  --ff-space-14: 14px;
  --ff-space-16: 16px;
  --ff-space-18: 18px;
  --ff-space-20: 20px;
  --ff-space-22: 22px;
  --ff-space-24: 24px;
  --ff-space-26: 26px;
  --ff-space-28: 28px;
  --ff-space-30: 30px;
  --ff-space-34: 34px;
  --ff-space-36: 36px;
  --ff-space-44: 44px;
  --ff-space-56: 56px;
}

/* --- Service accent map. Put data-accent on the page's outer section. --- */
[data-accent="blue"] {
  --svc: #3E72B0; --svc-deep: #2C5788; --svc-tint: #E4ECF7;
  --svc-pill: #DCE5F2; --svc-pill-ink: #2C5788; --svc-border: #D6E0EC; --svc-band: #EDF2F9;
  --svc-chip: rgba(62,114,176,0.15); --svc-chip-border: rgba(62,114,176,0.32);
}
[data-accent="pink"] {
  --svc: #D24A66; --svc-deep: #8E3049; --svc-tint: #FBE7EC;
  --svc-pill: #F1DEE3; --svc-pill-ink: #A8385A; --svc-border: #F0D4DC; --svc-band: #FDF3F6;
  --svc-chip: rgba(210,74,102,0.15); --svc-chip-border: rgba(210,74,102,0.32);
}
[data-accent="mint"] {
  --svc: #19A184; --svc-deep: #178168; --svc-tint: #DBF2EA;
  --svc-pill: #DDE9E3; --svc-pill-ink: #2E6B54; --svc-border: #CFE3DA; --svc-band: #EDF7F3;
  --svc-chip: rgba(25,161,132,0.15); --svc-chip-border: rgba(25,161,132,0.32);
}

/* --- Blog topic map. Put data-topic on the pill. -------------------------------
   Same shape as the service accent map above: one attribute in, two variables out,
   so the Bricks template needs no per-category settings and a category nobody has
   styled yet degrades to a neutral pill instead of disappearing.

   NOT IN THE HANDOFF: 01-DESIGN-TOKENS.md documents the three service accents and the
   chart/status colours but has no table for blog topic pills. These six values were
   measured out of design/FieldForce Blog.dc.html. Flagged for Manual v1.2. --- */
[data-topic]                  { --topic-ink: var(--ff-muted);  --topic-bg: var(--ff-beige); --pill-on: var(--ff-ink); }
[data-topic="market"]         { --topic-ink: #B31705;          --topic-bg: #F6E4E1;        --pill-on: #B31705; }
[data-topic="field"]          { --topic-ink: #6A3FA0;          --topic-bg: #EDE4F7;        --pill-on: #6A3FA0; }
[data-topic="fmcg"]           { --topic-ink: #BC5A0E;          --topic-bg: #FBEBD8;        --pill-on: #BC5A0E; }

/* --- Blog thumbnail marks -------------------------------------------------
   The gradient well carries a line mark that differs per topic: a bar chart for market
   data, a phone for field sales, a tag for FMCG. Delivered through the same [data-topic]
   attribute as the pill colours, so the template stays one element. Decorative -- it is
   the stand-in for a featured image nobody uploaded, not content. --- */
[data-topic="market"] { --topic-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23AA9E82' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='14' y='26' width='72' height='48' rx='4'/%3E%3Cline x1='14' y1='36' x2='86' y2='36'/%3E%3Crect x='24' y='52' width='6' height='12'/%3E%3Crect x='33' y='46' width='6' height='18'/%3E%3Crect x='42' y='40' width='6' height='24'/%3E%3Cpolyline points='54,56 63,48 70,52 80,42'/%3E%3C/svg%3E"); }
[data-topic="field"] { --topic-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23AA9E82' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='32' y='16' width='36' height='68' rx='6'/%3E%3Cline x1='44' y1='76' x2='56' y2='76'/%3E%3Crect x='37' y='24' width='26' height='44' rx='2'/%3E%3C/svg%3E"); }
[data-topic="fmcg"] { --topic-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23AA9E82' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M54 18 H30 a5 5 0 0 0-5 5 V47 a5 5 0 0 0 1.5 3.5 L52 76 a3 3 0 0 0 4 0 L78 54 a3 3 0 0 0 0-4 z'/%3E%3Ccircle cx='41' cy='33' r='4'/%3E%3C/svg%3E"); }

/* --- Post badges (ff_badge + ff_most_read). Also measured, not documented. ---
   `new` and `most-read` are solid fills; `guide` is the only outlined pill. --- */
[data-badge]                  { --badge-ink: var(--ff-muted);  --badge-bg: var(--ff-beige); --badge-border: transparent; --pill-on: var(--ff-ink); }
[data-badge="new"]            { --badge-ink: #FFFFFF;          --badge-bg: #D81C06;        --pill-on: #D81C06; }
[data-badge="most-read"]      { --badge-ink: #FFFFFF;          --badge-bg: #245C99;        --pill-on: #245C99; }
[data-badge="guide"]          { --badge-ink: #8A6D2E;          --badge-bg: #FBF5E6;        --badge-border: #E4D3A6; --pill-on: #8A6D2E; }

/* --pill-on is the SELECTED sidebar filter pill's fill. It is a third value, not a reuse:
   for new/most-read it happens to equal --badge-bg, but for guide the pill fills with the
   text colour (#8A6D2E) and its --badge-bg is the pale parchment. Declared per entry so
   nothing has to guess which one applies. */

/* --- Page surface: warm cream + a 5% fractal-noise tile. Don't drop the texture. --- */
body {
  background-color: var(--ff-page);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  color: var(--ff-ink);
  font-family: var(--ff-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ff-red); color: var(--ff-white); }
input::placeholder { color: var(--ff-placeholder); }

/* --- The red accent word inside every H1 --- */
.ff-accent { color: var(--ff-red); }

/* --- Decorative animations --- */
@keyframes ffGrow  { from { transform: scaleY(0.12); } to { transform: scaleY(1); } }
@keyframes ffBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* prefers-reduced-motion is handled in site.css, against the .ff-bar / .ff-live-dot
   classes that actually carry these animations. An attribute selector on [style]
   was matching nothing, because the animation is applied by class, not inline. */