/* ============================================================
   CTE Vars (v6) — CANONICAL GLOBAL DESIGN + LAYOUT TOKENS
   File: wp-content/mu-plugins/site-core/themes/cte-vars.css

   Purpose:
   - Single source of truth for stable --cte-* CSS variables
   - Brand palette + neutrals + layout geometry + taxonomy pill colors
   - Safe to edit: values only (no selectors, no layout logic)

   Notes:
   - Hot Topics (header pills) consumes --cte-pill-* via themes/header/cte-hot-topics.css
   - Singles pills will be migrated to consume these vars (future patch)
   ============================================================ */

:root{

  /* ============================================================
     BRAND COLORS (CTE)
     ============================================================ */

  /* === CTE_GINA_BRAND_ORANGE_V1 === */
  --cte-brand-orange: #DF6D27;

  /* CTE base */
  --cte-orange-500: #E64D00;  /* base */
  --cte-orange-600: #CC4400;  /* hover/deeper */
  --cte-blue-600:   #004DBF;  /* base */
  --cte-blue-700:   #003F9C;  /* hover/deeper */

  /* Brand tints (hex, predictable rendering everywhere) */
  --cte-orange-050: #FFF2EC;
  --cte-orange-100: #FFE9DF;
  --cte-orange-150: #FFD7C7;
  --cte-orange-200: #FFC2A8;

  --cte-blue-050:   #EEF4FF;
  --cte-blue-100:   #E8F0FF;
  --cte-blue-150:   #D6E6FF;
  --cte-blue-200:   #C2DAFF;

  /* Stable component aliases */
  --cte-accent:      var(--cte-orange-500);
  --cte-accent-deep: var(--cte-orange-600);

  /* ============================================================
     NEUTRALS / UI TOKENS
     ============================================================ */

  /* Neutral ramp (ink → paper) */
  --cte-ink:        #0F172A;  /* near-black for headings */
  --cte-text:       #111827;  /* body text */
  --cte-muted:      #475569;  /* secondary text */
  --cte-muted-2:    #64748B;  /* tertiary */
  --cte-border:     #CBD5E1;  /* default border */
  --cte-divider:    rgba(0,0,0,.08);
  --cte-surface:    #FFFFFF;
  --cte-bg:         #F4F4F4;

  /* Focus ring token (used by components) */
  --cte-focus: rgba(230,77,0,.55);

  /* ============================================================
     CORE LAYOUT FRAME
     ============================================================ */

  /* Kadence exposes --global-content-width reliably */
  --cte-site-width: var(--global-content-width, 1290px);

  /* Shared horizontal padding used by header / content / footer */
  --cte-frame-pad: 14px;
  --cte-frame-pad-sm: 8px;

  /* Sidebar positioning nudges */
  --sidebar-pad-left: 0px;
  --sidebar-shift: 12.86px;

  /* ============================================================
     WALLPAPERS / RAILS (GLOBAL, NON-AD-SPECIFIC)
     Geometry only. Placement logic lives in CSS.
     ============================================================ */

  /* Sold creative dimensions */
  --cte-rail-w: 300px;
  --cte-rail-h: 1050px;

  /* Breathing room between content+sidebar block and rails */
  --cte-rail-gap: 14px;

  --cte-rail-scale: 1;
  --cte-rail-min-scale: 0.25;
  --cte-rail-max-scale: 1;

  /* ============================================================
     VIEWPORT METRICS (SET BY JS: cte-viewport.js)
     Fallbacks keep layout sane before JS executes
     ============================================================ */

  /* Layout viewport width (EXCLUDES scrollbar) */
  --cte-vw: 100vw;

  /* Scrollbar width (diagnostic / future use) */
  --cte-scrollbar: 0px;

  

  /* ============================================================
     PILL GEOMETRY + MOTION TOKENS (v1)  [CTE_PILL_GEOMETRY_TOKENS_V1]
     - Single source of truth for pill size/shape/typography/animation
     - Used by: Hot Topics pills + Singles pills (and any future pill systems)
     ============================================================ */

  --cte-pill-gap: 8px;

  --cte-pill-pad-y: 6px;
  --cte-pill-pad-x: 10px;

  --cte-pill-radius: 10px;

  --cte-pill-font-size: 12px;
  --cte-pill-font-weight: 700;
  --cte-pill-line-height: 1;

  --cte-pill-border-width: 1px;

  --cte-pill-transition: background-color .14s ease, border-color .14s ease, color .14s ease;

  /* ============================================================
     HOT TOPICS UI TOKENS (v1)  [CTE_HOT_TOPICS_UI_TOKENS_V1]
     - Keeps header bar dimensions consistent and variable-driven
     ============================================================ */

  --cte-hot-topics-top-rule-width: 4px;
  --cte-hot-topics-gap-x: 12px;
  --cte-hot-topics-gap-y: 10px;
  --cte-hot-topics-top-rule: var(--cte-brand-orange) !important;

  --cte-hot-topics-label-gap: var(--cte-frame-pad, 14px);
  --cte-hot-topics-toggle-size: 26px;
  --cte-hot-topics-toggle-radius: 8px;

  --cte-hot-topics-label-slot-h: 26px;


  /* ============================================================
     TAXONOMY PILL VARS (v2)
     - Canonical colors for ALL pill systems (header + singles + etc.)
     - RULE: only CTE orange + blue are brand
     - All others are industrial neutrals
     ============================================================ */

  /* Default fallback (neutral) */
  --cte-pill-default-bg:     #F2F4F7;
  --cte-pill-default-border: #CBD5E1;
  --cte-pill-default-text:   #0F172A;

  /* Topic — CTE ORANGE (brand anchor) */
  --cte-pill-topic-bg:       #FFE9DF;
  --cte-pill-topic-border:   #E64D00;
  --cte-pill-topic-text:     #0F172A;

  /* Video Type — CTE BLUE (brand anchor) */
  --cte-pill-video_type-bg:     #E8F0FF;
  --cte-pill-video_type-border: #004DBF;
  --cte-pill-video_type-text:   #0F172A;

  /* Industry — oxidized steel */
  --cte-pill-industry-bg:     #F5F2EC;
  --cte-pill-industry-border: #8A6F3B;
  --cte-pill-industry-text:   #0F172A;

  /* Operation / Process — graphite */
  --cte-pill-operation_process-bg:     #F1F3F5;
  --cte-pill-operation_process-border: #4B5563;
  --cte-pill-operation_process-text:   #0F172A;

  /* Product Category — machine blue-gray */
  --cte-pill-product_category-bg:     #EEF2F6;
  --cte-pill-product_category-border: #5B6B7C;
  --cte-pill-product_category-text:   #0F172A;

  /* Magazine Column — structural slate */
  --cte-pill-magazine_column-bg:     #F0F2F5;
  --cte-pill-magazine_column-border: #374151;
  --cte-pill-magazine_column-text:   #0F172A;

  /* Optional future tokens */
  /* Pinned (People & Companies) — alias Topic (CTE Orange) */
  --cte-pill-pinned-bg:     var(--cte-pill-topic-bg);
  --cte-pill-pinned-border: var(--cte-pill-topic-border);
  --cte-pill-pinned-text:   var(--cte-pill-topic-text);

  --cte-pill-extra-bg:     #F2F4F7;
  --cte-pill-extra-border: #CBD5E1;
  --cte-pill-extra-text:   #0F172A;

  /* ============================================================
     HOT TOPICS CHIP DRIFT TOKENS (v1)
     - All chips start from the same grey base
     - Each taxonomy drifts toward a target hue (tiny amount)
     - Border is slightly stronger drift + slightly darker (ink)
     - Text stays black (cte-ink)
     ============================================================ */

  /* Base chip grey */
  --cte-hot-chip-bg-base: #F3F4F6;     /* glassy grey on white */
  --cte-hot-chip-bd-base: #E5E7EB;     /* very light grey border base */

  /* Drift strengths (tune here) */
  --cte-hot-chip-bg-hue:  4.5%;        /* background drift amount */
  --cte-hot-chip-bd-hue:  6.5%;        /* border drift amount (stronger than bg) */
  --cte-hot-chip-bd-ink:  4.5%;        /* darken border slightly with ink */

  /* Default drift target (if data-tax missing) */
  --cte-hot-chip-drift-default: #64748B;  /* muted slate */

  /* Drift targets (ONLY Orange / Blue / Red family) */
  --cte-hot-chip-drift-topic:         var(--cte-orange-500);
  --cte-hot-chip-drift-pinned:        var(--cte-orange-500);

  --cte-hot-chip-drift-video_type:    var(--cte-blue-600);
  --cte-hot-chip-drift-operation_process: #2563EB; /* alt blue shade */

  --cte-hot-chip-drift-industry:      #B91C1C;      /* deep red */
  --cte-hot-chip-drift-product_category: #DC2626;  /* red (slightly brighter) */

  --cte-hot-chip-drift-magazine_column: var(--cte-orange-500);   /* alt orange shade */


  /* ============================================================
     SHORTCUTS + GENERIC PILL TOKENS (v1)  [GINA_SHORTCUTS_PILLS_V1]
     - Shortcuts (chip/pill bars) sit on CTE orange
     - Pills are light grey by default
     - Active/current pill becomes white
     ============================================================ */

  --cte-shortcuts-bg: var(--cte-brand-orange);
  --cte-pill-ui-bg: #E9ECEF;
  --cte-pill-ui-bg-active: #FFFFFF;
  --cte-pill-ui-border: var(--cte-brand-orange);
  --cte-pill-ui-border-active: rgba(15,23,42,.16);
  --cte-pill-ui-text: var(--cte-ink);
  /* ============================================================
     GINA PALETTE + SHORTCUTS/PILLS VARS (v1)  [CTE_GINA_PALETTE_AND_SHORTCUT_VARS_V1]
     Canonical:
       --cte-brand-orange: #E64D00
       --cte-brand-blue:   #004DBF
     Proof mode (current): EVERYTHING orange (bg/border/text/hover/active)
     ============================================================ */


  /* Shortcuts bar background */
  --cte-shortcuts-bar-bg: var(--cte-brand-orange);
  /* Global pill colors (cards/shortcuts/etc.) */
  --cte-pill-bg:          #F3F4F6;
  --cte-pill-border:      #E5E7EB;
  --cte-pill-text:        var(--cte-ink);
  --cte-pill-bg-hover:    #F3F4F6;
  --cte-pill-border-hover:rgba(15,23,42,.18);
  --cte-pill-text-hover:  var(--cte-ink);
  --cte-pill-bg-active:   #FFFFFF;
  --cte-pill-border-active:#CBD5E1;
  --cte-pill-text-active: var(--cte-ink);
  /* Hot Topics (header) */
  --cte-hot-topics-bar-bg:      var(--cte-shortcuts-bar-bg);
  --cte-hot-topics-label-color: #FFFFFF;
  --cte-hot-topics-toggle-bg:   var(--cte-orange-500);
  --cte-hot-topics-toggle-border: var(--cte-orange-500);
  --cte-hot-topics-toggle-text: #FFFFFF;
  /* Singles pills (explicit, but currently same as global for proof) */
  --cte-singles-pill-bg:          #F3F4F6;
  --cte-singles-pill-border:      #E5E7EB;
  --cte-singles-pill-text:        var(--cte-ink);
  --cte-singles-pill-bg-hover:    var(--cte-brand-orange);
  --cte-singles-pill-border-hover:var(--cte-brand-orange);
  --cte-singles-pill-text-hover:  #FFFFFF;
  --cte-singles-pill-bg-active:   #FFFFFF;
  --cte-singles-pill-border-active:#CBD5E1;
  --cte-singles-pill-text-active: var(--cte-ink);

  --cte-singles-bar-bg: transparent;

  --cte-hot-topics-pill-lift: 1px;
  --cte-hot-topics-pill-lift-ms: 120ms;

  --cte-hot-topics-lift-headroom: var(--cte-hot-topics-pill-lift, 0px);

/* === HEADER CARD (desktop) === */
--cte-header-card-border: rgba(0,0,0,.08);
--cte-header-card-shadow: 0 10px 28px rgba(0,0,0,.10);

/* === HOT TOPICS TOGGLE BUTTON === */
--cte-hot-topics-toggle-bg: rgba(0,0,0,.02);
--cte-hot-topics-toggle-border: rgba(15,23,42,.14);
--cte-hot-topics-toggle-text: rgba(0,0,0,.72);
/* === HOT TOPICS UNDER-HEADER SEPARATORS (v1) === */
--cte-hot-topics-divider-color: rgba(0,0,0,.06);
--cte-hot-topics-shadow: 0 2px 4px rgba(0,0,0,.04);

}