/* Design tokens — colors, spacing, typography. Single source of truth.
   Goal: every view in the portal pulls visual constants from this file so
   no rule-by-rule drift creeps in. If a number isn't here, it shouldn't
   appear anywhere else either. */

:root {
  /* === BRAND === */
  --ashley-orange: #F68C2C;     /* CTAs, contest accents, brand tag */
  --primary-blue: #3F738D;      /* primary action / focus */
  --icy-blue: #DBECF1;          /* hover states, soft fills */
  --navy: #003B4A;              /* primary text, table headers, total bars */
  --navy-hover: #00526A;        /* hover on dark surfaces */
  --navy-border: #00303D;       /* heavy dividers on dark surfaces */
  --transition-blue: #1A5A6E;
  --sidebar-width: 240px;

  /* === SURFACES (table rows / panels) ===
     Tints get progressively lighter as you descend the hierarchy:
     navy -> region tint -> market tint -> store white. This is what makes
     the Detailed Report's nested groups feel like nested groups instead
     of a wall of similar greys. */
  --row-region-bg: #DCE6EC;
  --row-region-bg-hover: #C9D6DE;
  --row-market-bg: #ECF1F4;
  --row-market-bg-hover: #DDE5EA;
  --row-store-bg: #FFFFFF;
  --row-store-bg-hover: #F4F7F9;
  --table-header-bg: #EFF3F6;
  --table-border: #D5DAE0;
  --light-bg: #F7F7F7;

  /* === SIGNAL (delta cells, status pills) ===
     Deeper than the previous mint/pink so the up/down direction reads at
     a glance even on a dense grid. Text colors stay dark for contrast. */
  --signal-green-bg: #BBF0D2;
  --signal-green-bg-soft: #DCF7E5;
  --signal-green-text: #065f46;
  --signal-red-bg: #FBC8C9;
  --signal-red-bg-soft: #FCE0E1;
  --signal-red-text: #991b1b;
  --signal-yellow-bg: #FCE9A4;
  --signal-yellow-text: #854d0e;
  --success-green: #16a34a;
  --danger-red: #dc2626;

  /* === TYPOGRAPHY ===
     Three sizes everywhere: 11px UI labels (caps), 13px body, 17px page
     titles. KPI values fluid via clamp. Font stack same as before. */
  --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-label: 11px;
  --fs-body:  13px;
  --fs-title: 17px;
  --fs-kpi:   clamp(20px, 1.65vw, 28px);

  /* === GEOMETRY === */
  --radius: 8px;
  --radius-pill: 24px;

  /* Combined height of the sticky chrome bar (.top-bar 44px + .shared-filter-
     bar ~44px + a couple px of separator). Used by every sticky table thead
     so column headers pin BELOW the chrome instead of disappearing under it. */
  --chrome-h: 92px;
  --pad-row:  6px 8px;     /* table cells */
  --pad-card: 12px 14px;   /* tile padding */
  --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);

  /* === EVENT-WINDOW CHIPS (BTR / contest views) ===
     Pill-shaped buttons that select a comparison window in the BTR view
     (Baseline / Inv-Invite / BTR Event / Post Event / past events).
     Active state mirrors the preset-btn idiom but the hover/idle state needs
     to read as a softer "current event group" tone vs the "past events"
     group, so we expose two distinct sets here rather than reusing
     --primary-blue. The contest landing tints (--contest-soft) double as the
     "active window column" highlight in the BTR window-comparison grid. */
  --contest-soft:        #FFF5E5;   /* active-event chip idle / active-col bg */
  --contest-soft-border: #FCD9A8;   /* hairline around contest-soft chips */
  --contest-past:        #EEF3F6;   /* past-event chip idle */
  --contest-past-border: #C8D4DC;
  --contest-val:         #F0FDF4;   /* validation/qualified-win column */

  /* === SEGMENT TINTS (East/West region badges in BTR Store Scorecard) ===
     East borrows the brand icy-blue family; West uses a soft amber to read
     as "the other one" without colliding with signal-yellow used in goal
     coloring. Kept as their own tokens so we can reuse them in any future
     region-badge surface. */
  --region-east-bg:   #DBECF1;
  --region-east-text: #1F4E5E;
  --region-west-bg:   #FBE7C6;
  --region-west-text: #82581C;
}