/* ==========================================================================
   PodUp Theme — LIGHT values
   MIRROR of dark-theme.css: SAME variable names, LIGHT values.
   Edit a value here → changes LIGHT theme only.
   Edit the same var in dark-theme.css → changes DARK theme only.
   Keep both files' key lists identical (same order) so they diff cleanly.
   ========================================================================== */

:root {
    /* ---- Surfaces ---- */
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surface-2: #f5f8fa;
    --color-border: #e5e7eb;
    --color-border-soft: #eef0f2;
    --color-dim: #d1d5db;

    /* ---- Text ---- */
    --color-text: #374151;
    --color-text-secondary: #6b7280;
    --color-text-muted: #9ca3af;

    /* ---- Primary (brand blue) ---- */
    --color-primary: #44a7ce;
    --color-primary-light: #bae5f6;
    --color-primary-dark: #056285;
    --color-icon-gold: #C2A032;
   --color-icon-commanColor: #44a7ce;
    --color-on-primary: #1a1305;
    --gradient-primary: linear-gradient(135deg, #09BBF0 0%, #0469E7 100%);
    --gradient-primary-comman: linear-gradient(135deg, #09BBF0 0%, #0469E7 100%);


    /* ---- Accents ---- */
    --color-accent-seafoam: #4CBAA6;
    --color-accent-skyblue-bright: #44A7CE;
    --color-accent-skyblue: #9FE4FF;
    --color-accent-orange: #C8642D;
    --color-accent-purple: #6366F1;
    --color-accent-purple-bg: rgba(99, 102, 241, .10);

    /* ---- Graph / category palette ---- */
    --color-graph-teal: #4CBAA6;
    --color-graph-blue: #44A7CE;
    --color-graph-rust: #C8642D;
    --color-graph-gold: #E0C080;

    /* ---- Semantic (text) ---- */
    --color-success: #4CBAA6;
    --color-warning: #E0C080;
    --color-error: #C8642D;
    --color-info: #8BDEFF;
    --color-on-success: #06231e;

    /* ---- Semantic surfaces (alerts / badges) ---- */
    --color-success-bg: rgba(76, 186, 166, .15);
    --color-success-border: rgba(76, 186, 166, .3);
    --color-warning-bg: rgba(176, 132, 44, .08);
    --color-warning-border: rgba(176, 132, 44, .25);
    --color-error-bg: rgba(200, 100, 45, .08);
    --color-error-border: rgba(200, 100, 45, .25);
    --color-info-bg: rgba(139, 222, 255, .08);
    --color-info-border: rgba(139, 222, 255, .25);

    /* ---- Typography (theme-independent — keep equal in both files) ---- */
    --font-primary: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-secondary: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 13px;
    --font-size-md: 14px;
    --font-size-lg: 18px;
    --font-size-xl: 22px;
     --font-size-title:30px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* ---- Radius (theme-independent) ---- */
   --radius-none: 0px;
   --radius-2: 2px;
    --radius-small: 3px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-10: 10px;
    --radius-12: 12px;
    --radius-14: 14px;
    --radius-16: 16px;
    --radius-20: 20px;
    --radius-24: 24px;
    --radius-30: 30px;
    --radius-lg: 50px;
    --radius-pill: 999px;
    --radius-card: var(--radius-12);      /* used by quick-wizard.css */

    /* ---- Shadows ---- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .10);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .16);

    /* ---- Interaction ---- */
    --focus-ring: 0 0 0 2px rgba(176, 132, 44, .15);
    --selected-ring: 0 0 0 3px rgba(224, 192, 128, .2);
    --selected-bg: rgba(224, 192, 128, .06);

    /* ---- Buttons ---- */
    --btn-radius: var(--radius-lg);
    --btn-padding: 9px 24px;
    --btn-font-weight: var(--font-weight-semibold);
    --btn-font-size: var(--font-size-md);
    --btn-letter-spacing: 0;
    --btn-primary-bg: var(--gradient-primary);
    --btn-primary-bg-hover: var(--gradient-primary);
    --btn-primary-color: #FFF;
    --btn-primary-shadow: 0 2px 10px rgba(176, 132, 44, .30);
    --btn-primary-shadow-hover: 0 6px 20px rgba(224, 192, 128, .55);
    --btn-secondary-bg: transparent;
    --btn-secondary-color: var(--color-accent-skyblue-bright);
    --btn-secondary-border: 1.5px solid var(--color-primary);
    --btn-secondary-bg-hover: rgba(68, 167, 206, .12);
    --btn-secondary-shadow-hover: 0 0 18px rgba(68, 167, 206, .40);   /* guideline: symmetric glow on hover */
    --btn-accent-bg: var(--gradient-primary);
    --btn-accent-bg-hover: var(--gradient-primary);
    --btn-accent-color: #ffffff;
    --btn-disconnect-bg: #ffffff;
    --btn-disconnect-border: #CFDEE3;
    --btn-disconnect-color: #F15248;

    --btn-actionItem-bg: var(--gradient-primary);
    --btn-actionItem-bg-hover : var(--gradient-primary);
    --btn-actionItem-color : #fff;
    --btn-actionItem-border : transform;

   /* Button variants (colours). Mirror of light; these variants are overridden in dark by theme.css. */
    --btn-orange-bg: linear-gradient(135deg, #09BBF0 0%, #0469E7 100%);
    --btn-orange-bg-hover: linear-gradient(135deg, #0469E7 0%, #09BBF0 100%);
    --btn-red-bg-hover: #d1372c;
    --btn-lightgray-bg: linear-gradient(180deg, #FDFDFD 0%, #F3F4F5 100%);
    --btn-lightgray-bg-hover: linear-gradient(180deg, #F3F4F5 0%, #FDFDFD 100%);
    --btn-lightgray-shadow: 0px 2px 2px rgba(81, 110, 134, 0.04);

    /* ---- Form inputs ---- */
    --input-bg: var(--color-surface);
    --input-color: var(--color-text);
    --input-border: 1px solid var(--color-border);
    --input-radius: var(--radius-md);                 /* light: 8px = current form .form-control */
    --input-radius-area: 16px;
    --input-padding: 10px 18px;                          /* light: current form .form-control */
    --input-placeholder: var(--color-text-muted);
    --input-focus-border: var(--color-primary); /* focus line: blue in light theme */
    --input-focus-ring: 0px none;
    --input-bg-dark: var(--color-surface);
    --input-bg-border-dark: 1px solid var(--color-border);
    --input-color-dark: var(--color-text);
    --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    /* Native <select> caret — same chevron the select2 widget shows, so bare
       selects read as dropdowns too (feedback P0.2). */
    --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    /* ---- Form controls (checkbox / radio / switch) ---- */
    --form-accent: #24AAE0;
    --form-knob: #ffffff;
    --radio-primary: #2D90D0;
    --switch-off-bg: var(--color-dim);
    --switch-on-bg: var(--radio-primary);
    --switch-knob: #ffffff;
    --checkbox-bg: var(--color-surface-2);          /* unchecked box surface (dark) */
    --checkbox-border: #d6d6d6;         /* unchecked box border (dark) */
    --checkbox-checked-bg: #2D90D0;    /* checked box = brand blue */
    --checkbox-accent-color : #2D90D0;
    --checkbox-radius : var(--radius-small);

    /* Radio (native, accent-color tinted) */
    --radio-size: 18px;

    /* ---- Icon chip (neutral icon tile: list-item / step / service icons) ---- */
    --icon-chip-bg: var(--color-surface-2);
    --icon-chip-border: var(--color-border);
    --icon-chip-color: var(--color-text-secondary);

    /* ---- Status colours (SINGLE SOURCE — every status badge/label, all pages) ---- */
    --status-completed: var(--color-accent-seafoam);        /* Completed / Done / Ready */
    --status-processing: var(--color-accent-orange);        /* In-process / Processing */
    --status-pending: var(--color-accent-skyblue-bright);   /* Pending / Draft */
    --status-error: var(--wizard-rust-red);                 /* Error / Failed */

    /* ---- Tabs ---- */
    --tab-color: var(--color-text-secondary);
    --tab-active-bg: rgba(45, 144, 208, .15);
    --tab-active-color: #2D90D0;
    --tab-radius: 8px;

    /* ---- Pagination — new palette (light) ---- */
    --pagination-bgcolor-light-new: #FFF;
    --pagination-bordercolor-light-new: #e5e5e5;
    --pagination-textcolor-active-light-new: #24aae0;
    --pagination-textcolor-light-new: #414141;

    --pagination-size: 40px;
    --pagination-radius: var(--radius-md);
    --pagination-gap: 8px;
    --pagination-bg: var(--pagination-bgcolor-light-new);
    --pagination-color: var(--pagination-textcolor-light-new);
    --pagination-border: 1px solid var(--pagination-bordercolor-light-new);
    --pagination-hover-border: var(--pagination-bordercolor-light-new);
    --pagination-hover-color: var(--pagination-textcolor-light-new);
    --pagination-active-bg: var(--pagination-bgcolor-light-new);
    --pagination-active-color: var(--pagination-textcolor-active-light-new);
    --pagination-disabled-color: var(--color-text-muted);
    --pagination-nav-bg: transparent;
    --pagination-nav-color: var(--color-text-secondary);
    --pagination-nav-hover-color: var(--color-text);
    --pagination-prev-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'%3E%3Cpath d='M6 1L1 6L6 11' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --pagination-next-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'%3E%3Cpath d='M1 1L6 6L1 11' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    /* ---- Modals / popups ---- */
    --modal-bg: #ffffff;
    --modal-text: #0A0A0B;
    --modal-title: #0A0A0B;
    --modal-muted: #58585F;
    --modal-close-bg: #e5e7eb;
    --modal-close-bg-hover: #d1d5db;

    /* ---- Cards / surfaces (module cards) ---- */
    --studio-card-bg: #FFFFFF;
    --studio-card-border: #E1E8EA;
    --filemanager-bg: #ffffff;
    --filemanager-text: var(--color-text);
    --filemanager-border: var(--color-border);
    --social-info-bg: #ffffff;

    /* ---- Thumbnail-listing action icons (.thumbnaillisting_wrap .single_action a) ---- */
    --single-action-bg: #F3F6F8;
    --single-action-color: #7FA2BA;
    --single-action-hover-color: #224154;

    /* ---- Loader overlay veil (.new-social-loader etc.) ---- */

    /* ---- Scheduler calendar "add" (+) affordance on future days ---- */
    --calendar-add-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='12' fill='%23ffffff' stroke='%23D9E3EA'/%3E%3Cpath d='M13 7v12M7 13h12' stroke='%2324AAE0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

    /* ---- Tags input (.bootstrap-tagsinput) ----
       Same field colour as the select2 multi-select used by Blog Category
       (--input-bg-dark, which is --color-surface here) so Tags and Category
       read as the same control. Chips inside are --lightInformation. */
    --tagsinput-bg: var(--input-bg-dark);
    --tagsinput-border: var(--color-border);
    --tagsinput-text: var(--color-text);

    /* ---- Form Builder (jQuery formBuilder: /crmform, Interview Questions) ----
       MIRROR of dark-theme.css — same keys, light values. The plugin's skin in
       app-style.css hardcoded a blue-on-white palette with no theme hooks; these
       values keep light on-brand (neutral surfaces + the light accent) instead of
       the old #DEEDF6 / #1F84C2 blues. Rules live in theme.css. */
    --fb-palette-bg: #FFFFFF;                           /* control list surface   */
    --fb-palette-item-bg: #FFFFFF;                      /* draggable field chip   */
    --fb-palette-item-hover-bg: #F5F8FA;
    --fb-palette-item-text: var(--color-text);
    --fb-palette-item-hover-text: var(--color-text);
    --fb-palette-border: var(--color-border);
    --fb-palette-icon: var(--color-primary);

    --fb-stage-bg: transparent;                         /* canvas behind cards    */
    --fb-card-bg: #FFFFFF;                              /* one field on the stage */
    --fb-card-border: var(--color-border);
    --fb-card-hover-border: var(--color-primary);
    --fb-card-shadow: 0 1px 2px rgba(9, 25, 36, .06);
    --fb-card-hover-shadow: var(--shadow-md);

    --fb-heading-text: var(--color-text);               /* header-field <h1>      */
    --fb-label-text: #6b7280;                           /* .field-label           */

    --fb-edit-bg: #F8FAFB;                              /* expanded edit panel    */
    --fb-edit-border: var(--color-border);
    --fb-edit-label-text: #6b7280;
    --fb-option-row-bg: #FFFFFF;                        /* .sortable-options rows */

    --fb-action-bg: transparent;                        /* per-card icon buttons  */
    --fb-action-border: var(--color-border);
    --fb-action-color: #6b7280;
    --fb-action-hover-bg: #F5F8FA;
    --fb-action-hover-color: var(--color-primary);
    --fb-action-danger-color: var(--color-error);

    /* ---- Misc text ---- */
    --help-note-text: #46545A;
    --credit-text: #737373;
    --credit-label: #555555;
    --credit-count: #2D2B2B;
    /* Credit coin glyph (images/coin.png) is baked at #B0842C = dark's
       --color-primary, so light theme recolours it to the light accent #44a7ce:
       brightness(0) flattens it to black (alpha kept), the rest lifts that black
       to blue. Solved output #45a7ce — 1/255 off, visually identical. */
    --credit-coin-filter: brightness(0) saturate(100%) invert(66%) sepia(27%) saturate(984%) hue-rotate(154deg) brightness(86%) contrast(86%);

    /* ---- Studio misc ---- */
    --icon-highlight-gradient: linear-gradient(180deg, #09BBF0 0%, #0469E7 100%);
    --studio-tab-active-bg: #16B7F9;
    --studio-tab-active-color: #ffffff;

    /* ---- Shared chrome (header + sidebar + toggle) ---- */
    --chrome-header-bg: #ffffff;
    --chrome-header-text: var(--color-text);
    --chrome-surface: #ffffff;
    --chrome-surface-hover: #f5f8fa;
    --chrome-icon: #829db3;
    --chrome-icon-hover: var(--color-primary-light);
    --chrome-toggle-border: #d9e3ea;
    --chrome-profile-surface: #ffffff;
    --chrome-profile-border: #d9e3ea;
    --chrome-profile-icon: #829db3;

    /* ---- Newsletter / Email Marketer (Mailcoach) module ----
       Mirror of the dark block in dark-theme.css. Light values keep the module's
       current appearance (white sidebar, dark text, brand accent). Consumed by
       the ".mailcoach_body" rules in theme.css. */
    --nl-sidebar-bg: #ffffff;
    --nl-sidebar-text: var(--color-text);
    --nl-sidebar-active: var(--color-primary);
    --nl-sidebar-active-bg: #f5f8fa;
    --nl-sidebar-icon: var(--color-text);
    --nl-sidebar-border: var(--color-border);
    --nl-header-bg: #ffffff;
    --nl-header-text: var(--color-text);
    --nl-content-bg: #F2F6F8;
    --nl-surface: #ffffff;
    --nl-border: var(--color-border);
    --nl-text: var(--color-text);
    --nl-text-muted: var(--color-text-muted);
    --nl-tab-active: var(--color-primary);
    --nl-tab-active-bg: #f5f8fa;

    /* ======================================================================
       LEGACY / CHROME BRIDGE — light values.
       Header + left sidebar (navigation.css) consume these. Defined here so
       LIGHT chrome is controlled from THIS file (loads after navigation.css,
       so these win). Mirror of the dark bridge in dark-theme.css.
       ====================================================================== */
    --bg: #F2F6F8;
    --whiteText: #FFFFFF;
    --whiteBg: #FFFFFF;
    --boxBg: #F5F8FA;
    --icon: #141E22;
    --lightLine: #E1E8EB;
    --darkLine: #CFDEE3;
    --textShade1: #1C2224;
    --textShade2: #46545A;
    --textShade3: #798D96;
    --textShade4: #A1ADB2;
    --primary: #24AAE0;
    --darkPrimary: #1F84C2;
    --secondary: #FF6600;
    --darkSecondary: #ED5F00;
    --lightPrimary: #F2FBFF;
    --error: #F15248;
    --success: #10B981;
    --alert: #FF9800;
    --Information: #24AAE0;
    --lightError: #FFEEE9;
    --lightSuccess: #E7F8F2;
    --lightAlert: #FFF4E5;
    --lightInformation: #F0FBFF;
    /* Left sidebar (navy) */
    --navyBlueDark: #040F17;    /* sidebar background       */
    --navyBlueLight1: #06253B;  /* active / hover / submenu */
    --navyBlueLight2: #08314F;  /* secondary hover          */
    --navyBlueLight3: #08273E;
    --navyBlueLight4: #041B2B;
    --navyTextcolor: #FFF;   /* sidebar label            */
    --navyTextC0D2: #d1d1d1;    /* submenu label            */
    --navyIcon3267: #D1D5DB;    /* sidebar/submenu icon     */
    --navyIconHover79A4: #D1D5DB;
    --navyTitleColor16B7: #16B7F9; /* group title           */
    --sidebar-icon: #D1D5DB;
    --sidebar-active-icon : #16B7F9;
    --sidebar-active-textColor : #fff;


    /* ---- Wizard left nav ---- */
    --wizard-nav-bg:            var(--color-surface);         /* sidebar background          */
    --wizard-nav-text:          var(--color-text);            /* step label                  */
    --wizard-nav-icon:          var(--color-text);            /* step number/icon             */
    --wizard-step-pending-bg:     rgba(0,0,0,0.04);            /* pending circle background    */
    --wizard-step-pending-border: rgba(0,0,0,0.18);            /* pending circle border        */
    
    --wizard-step-done:           var(--color-success);        /* done step circle             */
    --wizard-step-done-icon:      #ffffff;                     /* checkmark icon               */
    --wizard-step-skip:           var(--color-primary-light);  /* skipped step — gold          */
    --wizard-step-skip-icon:      #ffffff;   
    --wizard-active-text-new : #44a7ce;
    --wizard-active-border-new : #44a7ce ;
    --wizard-active-bg-new : rgb(68 167 206 / 10%);
    --wizard-active-num-text:     #fff;      /* completed step circle checkmark text — used by quick-wizard.css */


--wizard-step-active:         #44a7ce;          /* current step text     */
--wizard-step-active-bg:      rgba(68, 167, 206, 0.10);       /* current step row background  */
--wizard-step-active-icon: #44a7ce; /* icon color active  */
--wizard-step-active-icon-border: #44a7ce; /* icon color active  */

--wizard-complete : #374151;
--wizard-complete-bg-icon : #4CBAA6;
--wizard-complete-icon-border: #4CBAA6; /* icon color active  */
--wizard-complete-text-color : #fff;

--wizard-sidebar-item : #D1D5DB;
--wizard-sidebar-num-fg : #D1D5DB; /* rounded border and circle text */
--wizard-sidebar-num-bg : transparent;


    /* New variable */
    --deleteIcon: #B85050;
    --deleteBorder : #b8505018;
    --deleteBackground : #B85050;
    --deleteBgIcon: #fff;


    /* Icon colors list*/
    --IconLogoColor: #09BBF0;

    /* ---- Buttons ---- */
   --btn-tertiary-bg: transparent;
   --btn-tertiary-color: #FFFFFF;
   --btn-tertiary-border: 1.5px solid var(--color-primary-light);
   --btn-tertiary-bg-hover: rgba(176, 132, 44, .12);
   --btn-tertiary-shadow-hover: 0 4px 16px rgba(224, 192, 128, .30);

   --btn-quaternary-bg: #4CBAA6;
   --btn-quaternary-color: #fff;
   --btn-quaternary-border: 1.5px solid #4CBAA6;
   --btn-quaternary-bg-hover: #4CBAA6;
   --btn-quaternary-shadow-hover: 0 4px 16px rgb(146 146 146 / 40%);

   --btn-quinary-bg: #C8642D;
   --btn-quinary-color: #fff;
   --btn-quinary-border: 1.5px solid #C8642D;
   --btn-quinary-bg-hover: #C8642D;
   --btn-quinary-shadow-hover: none;
   
   /* Pagination */
   --pagination-border-color: rgba(209, 213, 219, 0.42);
   --pagination-text-color: rgba(229, 231, 235, 1);
   --pagination-text-color-2: rgba(209, 213, 219, 0.42);

   --pagination-hover-bg-color:rgba(191, 191, 191, 1);
   --pagination-hover-text-color:rgba(26, 18, 0, 1); 
   --pagination-hover-border-color: rgba(191, 191, 191, 1);

   /* heading icon */
   --icon-bg-color: linear-gradient(95deg, #08D259 3.96%, #00C09E 100%);

   /* AI Text Color */
   --light-green:#08D259;
   --light-green-contrast-30: rgba(8, 210, 89, .30);
   --light-green-contrast-15: rgba(8, 210, 189, .15);
   
   /* input */   
   --select-option-bg-hover: var(--color-primary);
   --select-option-text-hover: #ffffff;

   --WizardTextColorLogo : var(--color-text);

    /* ======================================================================
       COMPONENT CONTRACTS — geometry + typography tokens
       Mirror block: IDENTICAL keys in light-theme.css and dark-theme.css.
       Values are var()-based so they resolve to this theme's colours; change a
       value here to restyle that property for THIS (light) theme only.
       These are the single source of truth. Rules that CONSUME them live in
       theme.css and are wired component-by-component (with visual verification)
       so light rendering does NOT change until a component is deliberately
       migrated. Do not force-apply a token over existing module CSS.
       ====================================================================== */

    /* ---- Tier-1 primitives (theme-independent) ---- */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --line-tight: 1.2;
    --line-base: 1.5;
    --line-loose: 1.7;
    --border-width: 1px;
    --border-width-2: 1.5px;

    /* ---- Buttons (shape — extends existing --btn-*) ---- */
    --btn-font-family: var(--font-primary);
    --btn-height: 44px;                               /* = current .w3nbtn base */
    --btn-margin: 0;
    --btn-border-width: var(--border-width-2);

    /* ---- Forms / inputs (shape — extends existing --input-*) ---- */
    --input-font-family: var(--font-primary);
    --input-font-size: var(--font-size-md);
    --input-font-weight: var(--font-weight-regular);
    --input-height: 42px;                             /* = current form .form-control */
    --input-margin: 0;
    --input-border-width: var(--border-width);
    --form-label-color: var(--textShade2);            /* light #46545A / dark #D1D1D1 */
    --seo-label-color: var(--textShade2);             /* SEO tab Title/Description/URL labels (light — current) */
    --form-label-font-size: var(--font-size-md);      /* 14px = current */
    --form-label-font-weight: var(--font-weight-regular); /* 400 = current */
    --form-label-margin: 0 0 12px 0;                  /* = current */
    --form-gap: var(--space-4);

    /* ---- Titles / headings (values = current look) ---- */
    --title-font-family: var(--font-primary);
    --title-color: var(--textShade1);                 /* current heading colour (bridge: light #1C2224 / dark #fff) */
    --title-font-weight: var(--font-weight-semibold); /* 600 = current h4/h5 */
    --title-letter-spacing: normal;
    --title-line-height: 1.125;                       /* = current h4/h5 */
    --title-h4-size: 1.6rem;                          /* = current h4 */
    --title-h4-margin: 0 0 24px 0;                    /* = current h4 */
    --title-h5-size: 1.4rem;                          /* = current h5 */
    --title-h5-margin: 0 0 16px 0;                    /* = current h5 */
    --title-page-size: 3.0rem;                        /* = current .page_titlemn h2 */
    --title-page-color: var(--textShade1);
    /* Available (not yet wired — contextual headings) */
    --title-margin: 0 0 var(--space-3);
    --title-h1-size: var(--font-size-xl);
    --title-h2-size: var(--font-size-lg);
    --title-h3-size: 16px;
    --title-h6-size: var(--font-size-sm);
    --label-color: var(--color-text-secondary);
    --label-font-size: var(--font-size-md);
    --label-font-weight: var(--font-weight-medium);
    --label-letter-spacing: .1em;
    --label-text-transform: capitalize;

    /* ---- Tables (values = current look) ---- */
    --table-head-bg: transparent;                    /* = current thead th */
    --table-head-color: var(--textShade1);            /* = current thead th */
    --table-head-font-size: 1.4rem;                   /* = current thead th */
    --table-head-font-weight: var(--font-weight-semibold); /* 600 = current */
    --table-head-padding: 10px 20px;                  /* = current thead th */
    --table-head-transform: none;                     /* current headers are NOT uppercase */
    --table-cell-color: var(--textShade1);            /* = current td */
    --table-cell-font-size: 1.4rem;                   /* = current td */
    --table-cell-font-weight: var(--font-weight-regular); /* 400 = current td */
    --table-cell-padding: 18px 20px;                  /* = current td */
    --table-radius: var(--radius-none);                 /* 8px = current head corners */
    --table-border: var(--border-width) solid var(--lightLine);
    --table-row-hover-bg: var(--color-surface-2);     /* dark row-hover; light has none */
    --table-stripe-bg: transparent;

    /* ---- Pagination (extends existing --pagination-*) ---- */
    --pagination-font-size: var(--font-size-md);
    --pagination-font-weight: var(--font-weight-medium);
    --pagination-border-width: var(--border-width);

    /* ---- Dropdowns / menus (values = current table row-action menu) ---- */
    --dropdown-bg: var(--whiteBg);                    /* = current (#fff) */
    --dropdown-border: none;                          /* current menu has no border */
    --dropdown-radius: 12px;                          /* = current */
    --dropdown-shadow: 0px 7px 15px 0px rgba(9, 25, 36, 0.20); /* = current */
    --dropdown-padding: 10px;                         /* = current */
    --dropdown-item-color: #0E2435;                   /* = current */
    --dropdown-item-font-size: var(--font-size-sm);   /* 12px = current */
    --dropdown-item-height: 36px;                     /* = current */
    --dropdown-item-padding: 0 12px;                  /* = current */
    --dropdown-item-radius: var(--radius-sm);         /* 6px = current */
    --dropdown-item-hover-bg: #F3F6F8;                /* = current */
    --dropdown-item-hover-color: #0E2435;             /* = current */

    /* ---- Tabs (extends existing --tab-*) ---- */
    --tab-font-size: 15px;                            /* = current .sh_tab_wrap */
    --tab-font-weight: var(--font-weight-medium);     /* 500 = current */
    --tab-padding: 6px 14px;                          /* = current .sh_tab_wrap */

    /* ---- Cards / panels (values = current .whitecardbox) ---- */
    --card-bg: var(--whiteBg);                        /* = current */
    --card-color: var(--color-text);
    --card-border: none;                              /* .whitecardbox has no border */
    --card-radius: 12px;                              /* = current */
    --card-padding: 30px;                             /* = current */
    --card-shadow: 0px 2px 4px 0px rgba(9, 25, 36, 0.10); /* = current */
    --card-header-bg: var(--color-surface-2);
    --card-header-color: var(--color-text);

    /* ---- Badges / status pills (values = current body .badge) ---- */
    --badge-font-size: var(--font-size-md);           /* 14px = current */
    --badge-font-weight: var(--font-weight-regular);  /* 400 = current */
    --badge-height: 26px;                             /* = current */
    --badge-padding: 0 12px;                          /* = current */
    --badge-radius: var(--radius-sm);                 /* 6px = current */

    /* ---- Modals / popups (geometry — extends existing --modal-*) ---- */
    --modal-radius: 10px;                             /* = current body .modal-content */
    --modal-padding: var(--space-5);                  /* 24px = current .modal-body */
    --modal-header-border: var(--border-width) solid var(--color-border);

    /* ---- Add-episode tag link (.add_episodes_wrap a) ---- */
    --add-ep-tag-height: 22px;
    --add-ep-tag-padding: 0 7px;
    --add-ep-tag-radius: 6px;
    --add-ep-tag-color: var(--primary);               /* light #24AAE0 / dark gold */

    /* ---- Permalink label (.inside-permalink strong) ---- */
    --permalink-label-color: #414141;                 /* current light */


   /* pawan new add variable */

   /* contrast */

    /* ---- Buttons ---- */
   --btn-primary-accent-shadow-hover: 0 4px 16px rgb(146 146 146 / 40%);

   --btn-secondary-bg-white:#fff;
   --btn-secondary-dark-color:#374151;
   --btn-secondary-dark-border:1.5px solid var(--color-border);
   --btn-secondary-dark-box-shadow: 0 4px 16px rgb(146 146 146 / 40%);

   /* edit btn */
   --edit-btn-color:: #2D90D0 !important;
   --edit-btn-bg-color: var(--color-graph-blue-contrast-20) !important;
   --edit-btn-border: rgb(68 167 206 / 35%) !important;

   /* input */
   /* Selected/highlighted <option>. Brand blue in light, matching the gold in
      dark-theme.css. NOTE: this token is declared twice in this file — this is
      the later (winning) declaration; the earlier one is kept in sync. */
   --select-option-bg-hover: var(--color-primary);
   --select-option-text-hover: #ffffff;
   --input-hover-border-blue: #2D90D0;
   --pill-border-color: #2D90D0;

   /* Pagination */
   --pagination-border-color: #E2E8F0;
   --pagination-text-color:#475569;
   --pagination-text-color-2:#94A3B8;

   --pagination-hover-bg-color:#326788;
   --pagination-hover-text-color:#fff; 
   --pagination-hover-border-color: #326788;

  
   /* heading icon */
   --icon-style-box-bg-color: #f5f8fa;
   /* heading icon bg color */
   --icon-style-box-border: 1.5px solid #e5e7eb;
   /* heading icon border color */
   --icon-style-box-color: #6b7280;
   /* heading icon text or svg icon color */
   --icon-style-box-border-radius: 8px;
   /* heading icon 12px border-radius */
   --icon-style-box-base-color: #44A7CE;

   /* AI Text Color */
   --badge-highlight-text-color: #1f84c2;
--badge-highlight-border-color: rgba(36, 171, 224, .2);
--badge-highlight-bg-color: rgba(36, 171, 224, .1);
--badge-highlight-border-radius: 5px;


   /* plan box */
   --plan-box-bg: transparent;
   --plan-box-border-color:#D1D5DB;
   --plan-box-icon-bg-color:#F3F4F6;
   --plan-box-icon-text-color:#2D90D0;
   --plan-box-icon-border-color: #D1D5DB;
   --plan-box-heading-color:#111827;
   --plan-box-text-color:#4B5563;

   --plan-box-hover-bg: rgba(45, 144, 208, .15);
   --plan-box-hover-border-color:#2D90D0;
   --plan-box-hover-icon-bg-color:#9BDAF6;
   --plan-box-hover-icon-text-color:#2D90D0;
   --plan-box-hover-icon-border-color: #2D90D0;
   --plan-box-hover-heading-color:#2D90D0;
   --plan-box-hover-text-color:#4B5563;
   
   /* font-size */
   --font-size-xxl: 24px;
   --font-size-30: 30px;
   --font-size-16: 16px;

    /* ---- Stripe Config Banner ---- */
    --stripe-banner-bg: var(--tab-active-bg);
    --stripe-banner-border: var(--tab-active-color);
    --stripe-banner-text: var(--color-text);


     /* pawan podup seo modules new component start */
    --sidebar-step-d-active-tab-bg-color:#fff;
    --sidebar-step-d-active-tab-text-color:#374151;
    --sidebar-step-d-active-tab-border-color:#d1d1d1;
    --sidebar-step-d-active-tab-label-color:#374151;

    --sidebar-step-active-tab-bg-color:#e4f4fb;
    --sidebar-step-active-tab-text-color:#44A7CE;
    --sidebar-step-active-tab-border-color: #44A7CE;
    --sidebar-step-active-tab-label-color:#44A7CE;

    --sidebar-step-completed-tab-bg-color:#4CBAA6;
    --sidebar-step-completed-tab-text-color:#FFFFFF;
    --sidebar-step-completed-tab-border-color:#4CBAA6;
    --sidebar-step-completed-tab-label-color:#4CBAA6;
    
   --checkbox-d-select-bg-color: transparent;
   --checkbox-d-select-border-color: #e5e7eb;
   --checkbox-select-bg-color: #44A7CE;
   --checkbox-select-border-color: #44A7CE;

    --color-light-blue-bg: #f2f6f8;
    /* pawan podup seo modules new component end */
    

    /* ---- AI generation loader / progress ring (mirror; light keeps blue) ---- */
    --loader-track: #F3F6F8;
    --loader-fill-1: #0689F4;
    --loader-fill-2: #06DEF6;
    --loader-fill-3: #0689F4;
    --loader-overlay-bg: rgba(255, 255, 255, 0.6);
    --loader-message-color: #0E2435;

    /* ---- AI result action buttons (mirror; light keeps original look) ---- */
    --result-action-bg: #F3F6F8;
    --result-action-border: transparent;
    --result-action-color: #7FA2BA;
    --result-action-hover-bg: #F3F6F8;
    --result-action-hover-color: #224154;
    --result-action-hover-border: transparent;
    --result-action-save-bg: linear-gradient(180deg, #25EF77 0%, #07BDB2 100%);
    --result-action-save-bg-hover: linear-gradient(0deg, #25EF77 0%, #07BDB2 100%);
    --result-action-save-color: #FFFFFF;
    --result-action-save-shadow: none;
    --result-action-delete-bg: #F3F6F8;
    --result-action-delete-color: #224154;

    /* ── ProRepurposer wizard tokens (shared by all wizards) — LIGHT ── */
    /* Accent (selected/active/tabs/outline-buttons/gold-brand) + hyperlinks.
       Sky-blue in light, gold in dark. rgba tints via color-mix on these. */
    --wizard-accent: #44A7CE;
    --wizard-accent-hover: #3590B5;
    --wizard-link: #44A7CE;
    --wizard-link-hover: #3590B5;

    /* ---- Wizard Tabs variables (active = solid fill) ---- */
    --wiz-tab-bg-color: transparent;
    --wiz-tab-border-color: #e1e1e1;
    --wiz-tab-text-color: var(--color-text-secondary);
    --wiz-tab-active-bg-color: #44A7CE;
    --wiz-tab-active-border-color: #44A7CE;
    --wiz-tab-active-text-color: #fff;
    --wiz-tab-border-radius:var(--radius-pill);

    /* Blue / success (no close global twin) */
    --wizard-blue: #2563eb;
    --wizard-blue-50: #eff6ff;
    --wizard-success: #059669;
    --wizard-success-hover: #047857;

    /* Brand hues */
    --wizard-sky-blue-dark: #3590B5;
    --wizard-gold-yellow: #FFB814;
    --wizard-sky-bright: #16b7f9;
    --wizard-sedge-green: #87A07A;
    --wizard-rust-red: #B34A3A;
    --wizard-icon-color: #C9915A;

    /* Status text */
    --wizard-success-text: #2E8A78;
    --wizard-danger-text: #b91c1c;
    --wizard-warn-text: #09BBF0;
    --wizard-brand-success-text: #2E8A78;
    --wizard-warn-text-lightdark-goldblue: #44A7CE;

    /* Misc constants */
    --wizard-on-sky-deep: #0d3a5c;
    --wizard-status-neutral: #A2A2A2;
    --wizard-danger-strong: #dc2626;
    --wizard-text-offwhite: #e2e2e2;
    /* Font */
    --wizard-font-weight-extrabold: 800;
    --wizard-font-size-3xl: 26px;
    /* Sidebar item */
    --wizard-sidebar-item-skipped: #fbbf24;
    --wizard-sidebar-item-skipped-ink: #78350f;
    --wizard-sidebar-num-bg: transparent;
    --wizard-sidebar-num-fg: #828282;


    /* warning alert message */
   --alert-warning-box-border : #C8642D;
   --alert-warning-box-bg : rgba(217, 119, 6, 0.08);
   --alert-warning-box-title : #09BBF0;
   --alert-warning-box-subtitle : var(--color-text-secondary);
   --alert-warning-box-icon-bg : #C8642D ;
   --alert-warning-box-icon-color : #fff ;

   --upload-box-bg: #f5f8fa;
   --upload-box-border-color: #d1d5db;
   --upload-box-icon-bg-color: #44a7ce1a;
   --upload-box-icon-text-color: #44a7ce;
   --upload-box-icon-border-color: #44a7ce1a;
   --upload-box-heading-color: #374151;
   --upload-box-text-color: #6b7280;

   --gridentbox-new :linear-gradient(98deg, #354B68 -16.08%, #364C69 43.99%, #275565 103.26%);

   /* New variable for all podup backend pages */
   --card-box-bgcolor : transparent;
   --card-box-radiusnew : var(--radius-none);
   --car-padding-pages-new : 0px;

   /* ---- Engager / Social Inbox module (/socialinbox) — LIGHT (current look) ---- */
   --engager-panel-bg: #ffffff;                     /* left accounts / list / chat panels */
   --engager-panel-shadow: 0 2px 4px 0 rgba(9,25,36,.1);
   --engager-border: #D9E3EA;                       /* card + row dividers */
   --engager-inner-bg: #F3F6F8;                     /* chat bubble + reply textarea */
   --engager-active-bg: linear-gradient(95deg, rgb(7 223 246 / 24%) 3.96%, rgb(7 138 244 / 24%) 100%); /* selected row */
   --engager-notif-bg: rgba(31, 132, 194, 0.10);    /* notification count badge = blue tint (red is reserved for errors) */
   --engager-notif-color: #1F84C2;
   --engager-thread-line: #888888;                  /* reply thread connector line */
   --engager-heading: var(--textShade1);
   --engager-text-muted: var(--textShade2);
   --engager-toggle-bg: rgba(31, 132, 194, 0.15);   /* collapse hamburger chip (current) */
   --engager-toggle-icon: #000000;                  /* hamburger icon (current) */

   --red-error-border: #dc2626;
   --red-error-textColor: #dc2626;
   --red-error-IconColor: #dc2626;

   /* update new variable for box new color */
   --bgbluebgdarkgray : #EDF9FF;
   --borderprimary-box : #44a7ce;
   --boxtitle2 : #005C84;
   --claimbtn-box2 : #005C84;
   --claimbtn-box-text2 : #FFF;

   /* cancel-funnel loader spinner (blue in light) */
   --cancel-loader-color : #0689F4;

   /* Header apps menu (#mmodule-menu) — mirror of dark. Light keeps the stock
      white panel / blue icons, so both filters are none. */
   --appsmenu-toggle-filter: none;
   --appsmenu-panel-bg: #FFFFFF;
   --appsmenu-panel-border: 1px solid #E6EDF2;
   --appsmenu-panel-shadow: 2px 6px 20px rgba(0, 0, 0, .06);
   --appsmenu-item-color: #0A0A0B;
   --appsmenu-item-hover-bg: rgba(36, 171, 224, .10);
   --appsmenu-item-hover-color: #1F84C2;
   --appsmenu-icon-filter: none;

   /* Mailcoach / Email Integrator help box — x-mailcoach::help = .alert.alert-info
      (e.g. "No campaigns yet, but you'll need a list first…"). Blue in light. */
   --mc-help-bg: #EDF9FF;
   --mc-help-border: #44A7CE;
   --mc-help-text: #005C84;
   --mc-help-link: #1F84C2;

   /* colorforleft-sidebar-locked */
   --bgcolor-featureslock : #040f17;
   --color-title-locked : #fff;
   --color-title-secondary : #d1d1d1;

   /* recorder new variables start */
   --btn-default-new-bgcolor : #FFF;
   --btn-default-text-color : #829DB3;
   --btn-default-icon-color : #fff;
   --btn-default-border : #D9E3EA;

   --prejoin-select-big-bgcolor : #FFF;
   --prejoin-select-big-iconcolor : #374151;
   --prejoin-select-big-textcolor : #000;
   --prejoin-checkboxnew : #44a7ce;
   --prejoin-checkbox-border : #7a7a7a;
   /* prejoin checkbox / radio states (brand: gold when selected) */
   --prejoin-checkbox-bg : #FFFFFF;
   --prejoin-checkbox-border-idle : #C9D3DB;
   --prejoin-checkbox-border-hover : #9FB0BC;
   --prejoin-checkbox-tick : #FFFFFF;
   --prejoin-checkbox-focus-ring : rgba(176, 132, 44, .30);

   --recorder-textcolor : #374151;
   --recorder-bgcolor : #374151;
   --recorder-bordercolor : #fff;
   --recorder-iconcolornew : #000;
   --recorder-iconcolornew-header : #000;

   --recorder-bgcolor-1 : #000;
   --recorder-bgcolor-2 : #f5f5f5;
   --recorder-bgcolor-3 : #fbfbfb;
   --recorder-bgcolor-4 : #FFFF;
   --recorder-bgcolor-transparent : transparent;

   /* recorder IconBox Color*/
   --recorder-iconbox-bgcolor : #FFF;
   --recorder-iconbox-bordercolor : #d9e3ea;
   --recorder-iconbox-textcolor : #000;

   --recorder-iconbox-opacitybgcolor : #24aae02b;
   --active-toggle-recorder : #daf1fa;
   --footercenter-border : #d9e3ea;
   --recorderwhitetext : #fff;

   --recorderRedColor: #EF4444;

   /* recorder new variables end */
}