/* ==========================================================================
   iMarket Reporting Restyle — Design Tokens
   Load this file BEFORE the restyle stylesheet (imarket-restyle.css).
   Every value in the restyle should come from these variables.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Bitter:ital,wght@0,400;1,600&display=swap");

:root {
  /* ---- Brand ------------------------------------------------------------ */
  --ims-navy: #2E3393;          /* frame, table headers, primary navy */
  --ims-navy-deep: #262B85;     /* gradient end, secondary header rows */
  --ims-navy-field: #252A80;    /* form fields on the navy frame */
  --ims-navy-ink: #161A4A;      /* primary text on light surfaces */
  --ims-red: #D71920;           /* brand red: primary actions, 20° notch, active-nav icon */
  --ims-blue: #1AA3DD;          /* brand light blue: accents, checkbox accent, chart series */
  --ims-blue-deep: #1E6DB6;     /* gradient light end (AA-safe under white text) */
  --ims-blue-soft: #E4EEFA;     /* help chips, icon tiles, period chips */
  --ims-blue-on-navy: #BFE6F7;  /* icons/arrows on the gradient */
  --ims-sort-indicator: #7FD0F2;/* sort arrow on navy table headers */

  /* ---- Neutrals --------------------------------------------------------- */
  --ims-page: #F2F4F9;          /* content background */
  --ims-surface: #FFFFFF;       /* cards, panels, tables */
  --ims-border: #E0E4F0;        /* card/panel border */
  --ims-rule: #E7EAF3;          /* table row rules, inner dividers */
  --ims-field-border: #C5CAE0;  /* 4px fields */
  --ims-ink-2: #4E5378;         /* secondary text */
  --ims-ink-label: #3B4080;     /* instrument labels on light */
  --ims-on-navy: #D9DCF7;       /* nav text on navy */
  --ims-on-navy-strong: #FFFFFF;
  --ims-on-navy-icon: #9EA4EC;  /* nav icons on navy */
  --ims-on-navy-label: #C3C7F2; /* small caps labels on navy */
  --ims-on-gradient-label: #DCE7FB;
  --ims-neutral-pill-bg: #EEF0F6;
  --ims-neutral-outline: #A9AFC9;

  /* ---- Gradient (brand: light blue -> navy, 20° orientation) ------------- */
  --ims-gradient: linear-gradient(110deg, #1E6DB6 0%, #2E3393 55%, #262B85 100%);
  --ims-gradient-mobile: linear-gradient(160deg, #1E6DB6 0%, #2E3393 45%, #262B85 100%);
  --ims-gradient-strip: linear-gradient(110deg, #1AA3DD 0%, #2E3393 70%);   /* modal header */
  --ims-spend-segment: rgba(10, 13, 58, 0.34);                             /* darker Total Spend segment in the band */

  /* ---- Status system (Scorecard + any target-based reporting) ------------- */
  /* Green = in target, Yellow = out of target, Red = severely out of target.
     Status red is deliberately different from brand red so it never reads as a button. */
  --ims-status-good: #1E7A46;      --ims-status-good-tint: #E3F3E8;  --ims-status-good-text: #17663A;
  --ims-status-warn: #F2C230;      --ims-status-warn-tint: #FFF6D9;  --ims-status-warn-text: #7A5A00;
  --ims-status-warn-ink: #3A2C00;  /* text ON the yellow pill */      --ims-status-warn-edge: #E0A800;
  --ims-status-bad: #C4231F;       --ims-status-bad-tint: #FDECEC;   --ims-status-bad-text: #A1161B;

  /* ---- Year-over-year change cells (soft tints + arrows) ------------------ */
  --ims-yoy-better-bg: #E2F3E7;  --ims-yoy-better-text: #1C6A38;
  --ims-yoy-worse-bg: #FBE6E6;   --ims-yoy-worse-text: #A1161B;

  /* ---- Typography -------------------------------------------------------- */
  --ims-font-ui: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --ims-font-display: "Bitter", Georgia, serif;   /* page titles only, regular 400, NOT italic */

  --ims-fs-page-title: 36px;     /* 32px tablet, 26px phone */
  --ims-fs-h2: 24px;             /* 20px phone */
  --ims-fs-panel-title: 18px;
  --ims-fs-body: 15px;
  --ims-fs-body-lg: 16px;
  --ims-fs-small: 13.5px;
  --ims-fs-label: 12px;          /* instrument labels: uppercase, letter-spacing 0.12–0.14em, weight 600 */
  --ims-fs-key-result: 80px;     /* the big, bold key results (weight 700) */
  --ims-fs-key-secondary: 32px;  /* demoted line inside the band (weight 600) */
  --ims-fs-instrument: 28px;     /* supporting metric values (weight 300–400) */
  --ims-tracking-label: 0.14em;
  --ims-tracking-table-head: 0.12em;

  /* ---- Shape ------------------------------------------------------------ */
  --ims-radius-panel: 12px;      /* cards, panels, story band, modals, popovers */
  --ims-radius-control: 12px;    /* buttons, chips, toggles (pill-like) */
  --ims-radius-field: 4px;       /* selects, inputs, date field */
  --ims-radius-badge: 8px;       /* logo badge */

  /* ---- Depth ("quality materials": hairline highlight + very soft shadow) - */
  --ims-shadow-card: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(22, 26, 74, 0.05), 0 14px 28px -20px rgba(22, 26, 74, 0.35);
  --ims-shadow-band: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 18px 36px -18px rgba(22, 26, 74, 0.55);
  --ims-shadow-popover: 0 8px 24px rgba(10, 12, 40, 0.18);
  --ims-hairline-on-navy: inset 0 -1px 0 rgba(255, 255, 255, 0.12);

  /* ---- Spacing / layout -------------------------------------------------- */
  --ims-space-1: 4px;  --ims-space-2: 8px;  --ims-space-3: 12px; --ims-space-4: 16px;
  --ims-space-5: 20px; --ims-space-6: 24px; --ims-space-7: 32px; --ims-space-8: 40px;
  --ims-touch: 34px;             /* minimum hit area for every control */
  --ims-sidebar-w: 272px;
  --ims-header-h: 84px;          /* desktop navy band; 64px + 40px client line on phone */
  --ims-content-max: 1240px;
}