/* Theme scope */
[data-theme="theme-citrix"], .theme-citrix {
  /* === FONT FAMILIES === */
  --font-family-base: "Public Sans", sans-serif;
  --font-family-heading: "Funnel Display", sans-serif;
 
  /* === FONT WEIGHTS === */
  /* Funnel Display weights */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
 
  /* === FONT SIZE SCALE === */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.3125rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.8125rem;
  --font-size-4xl: 2.125rem;
  --font-size-5xl: 2.5rem;
 
  /* === LINE HEIGHT === */
  --line-height-xs: 1.125rem;
  --line-height-sm: 1.25rem;
  --line-height-md: 1.375rem;
  --line-height-lg: 1.5rem;
  --line-height-xl: 1.6875rem;
  --line-height-2xl: 1.875rem;
  --line-height-3xl: 2.1875rem;
  --line-height-4xl: 2.5rem;
  --line-height-5xl: 2.875rem;

   /* spacing  */
  --spacing-2xs: 0.25rem; /* 4px */
  --spacing-xs: 0.5rem; /* 8px */
  --spacing-sm: 0.75rem; /* 12px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.25rem; /* 20px */
  --spacing-xl: 1.5rem; /* 24px */
  --spacing-2xl: 2rem; /* 32px */
  --spacing-3xl: 2.25rem; /* 36px */
  --spacing-4xl: 2.5rem; /* 40px */
  --spacing-5xl: 2.75rem; /* 44px */
  --spacing-6xl: 3rem; /* 48px */

  /* Corner Radius (4-point grid) */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.5rem; /* 8px */
  --radius-lg: 0.75rem;
  --radius-xl: 1rem; /* 16px */
  --radius-chip: var(--radius-md);
  --radius-button: var(--radius-md);
  --radius-tag: 0 var(--radius-md) 0 var(--radius-md);
 
  --shadow-rest: 0 0 0.25rem rgba(0, 0, 0, 0.2);
  --shadow-raised: 0 0.5rem 2.5rem rgba(0, 0, 0, 0.05);

  /* === CITRIX PRIMARY COLORS === */
  --brand-primary-cobalt-50: #0045DB;
  --brand-primary-cobalt-70: #00236E;
  --brand-primary-mint-40: #71FD95;
  --brand-primary-slate-20: #98B8BE;
  --brand-primary-jasper-80: #2E5957;
  --brand-primary-aether-20: #D6EDFF;
  --brand-primary-canvas-20: #F3EEE8;
  --brand-primary-jasper-100: #172B29;
 
  /* === CITRIX SECONDARY COLORS === */
  --brand-secondary-cobalt-70: #00236E;
  --brand-secondary-cobalt-60: #0034A4;
  --brand-secondary-cobalt-50: #0045DB;
  --brand-secondary-cobalt-40: #336AE2;
  --brand-secondary-cobalt-30: #8CB0FF;
 
  --brand-secondary-aether-20: #D6EDFF;
  --brand-secondary-aether-10: #EFF8FF;
 
  --brand-secondary-canvas-30: #F3EEE8;
  --brand-secondary-canvas-10: #F8F7F6;
 
  --brand-secondary-jasper-100: #172B29;
  --brand-secondary-jasper-90: #234341;
  --brand-secondary-jasper-80: #2E5957;
 
  --brand-secondary-slate-20: #98B8BE;
  --brand-secondary-slate-10: #ADC6CB;
 
  --brand-secondary-mint-50: #55BE70;
  --brand-secondary-mint-40: #71FD95;
  --brand-secondary-mint-30: #8DFDAA;
  --brand-secondary-mint-20: #ADFEB9;
  --brand-secondary-mint-10: #C2FFD0;
 
  --brand-neutral-grey-10: #EBECEC;
  --brand-neutral-grey-20: #D5D9D9;
  --brand-neutral-grey-30: #C1C6C6;
  --brand-neutral-grey-40: #ACB3B2;
  --brand-neutral-grey-50: #97A09F;
  --brand-neutral-grey-60: #828D8C;
  --brand-neutral-grey-70: #6E7A79;
  --brand-neutral-grey-80: #596765;
  --brand-neutral-grey-90: #445453;
  --brand-neutral-grey-100: #2F413F;
 
  /* === NEUTRAL COLORS === */
  --brand-neutral-white: #FFFFFF;
  --brand-neutral-black: #000000;

  /** fixed colors */
  --primary-color: var(--brand-primary-cobalt-50);
  --secondary-color: var(--brand-primary-jasper-100);
  --ternary-color: var(--brand-primary-cobalt-70);
  --accent-color: var(--brand-primary-cobalt-70);
 
  /* status colors */
  --status-success: #007A1E;
  --status-success-bg: #E5F2E8;
  --status-warning: #AD5105;
  --status-warning-bg: #F9EEE5;
  --status-error: #CC2424;
  --status-error-bg: #F9E9E9;
  --status-info: #015BAF;
  --status-info-bg: #E6F1F7;

 
  /* Text Colors */
  --color-text-primary: var(--brand-primary-cobalt-50);
  --color-text-secondary: var(--brand-primary-jasper-100);
  --color-text-tertiary: var(--brand-primary-cobalt-70);
  --color-text-muted: var(--brand-neutral-grey-60);
  --color-text-subdued: var(--brand-neutral-grey-80);
  --color-text-strong: var(--brand-neutral-grey-100); /* strong/dark supporting text */
  --color-text-disabled: var(--brand-neutral-grey-10);
  --color-text-inverse: var(--brand-neutral-white);
  --color-text-default: var(--brand-neutral-black);

  --color-text-success: var(--status-success);
  --color-text-warning: var(--status-warning);
  --color-text-error: var(--status-error);
  --color-text-info: var(--status-info);

  --color-text-chip: var(--brand-primary-cobalt-70);
  --color-text-tag: var(--brand-neutral-black);
  --color-text-subtle: var(--brand-neutral-grey-70); /* subtle/secondary text */
  --color-text-accent: var(--brand-secondary-cobalt-40); /* accent text on light backgrounds — eyebrow, subtitle */
  --color-text-accent-dark: var(--brand-secondary-cobalt-30); /* accent text on dark backgrounds — eyebrow, subtitle */
  --color-text-jasper: var(--brand-secondary-jasper-80); /* jasper text accent — card labels, tag text */

  /* link colors - light theme */
  --color-link-default: var(--brand-neutral-black);
  --color-link-hover: var(--brand-primary-cobalt-50);
  --color-link-pressed: var(--brand-primary-cobalt-70);
  --color-link-disabled: var(--brand-neutral-grey-50);
 
  /* link colors - dark theme */
  --color-link-default-dark: var(--brand-neutral-white);
  --color-link-hover-dark: var(--brand-secondary-mint-10);
  --color-link-pressed-dark: var(--brand-primary-mint-40);
  --color-link-disabled-dark: var(--brand-neutral-grey-50);

  /* Background Colors */
  --bg-page: var(--brand-neutral-white);
  --bg-surface: var(--brand-neutral-white);
  --bg-surface-subtle: var(--color-cool-white);
  --bg-primary: var(--brand-primary-cobalt-50);
  --bg-primary-subtle: var(--brand-primary-aether-20);
  --bg-secondary-subtle: var(--brand-secondary-aether-10); /* secondary light surface */
  --bg-secondary-subtle-mid: var(--brand-secondary-aether-20); /* secondary mid-light surface */
  --bg-loader-dot: var(--brand-secondary-mint-50); /* Citrix animated loader dot colour */
  --bg-disabled-subtle: var(--brand-neutral-grey-10);
  --bg-header: var(--brand-neutral-white);
  --bg-footer: var(--brand-neutral-black);
  --bg-blog: #F2EDE8; /* blog listing & detail page background */
  --bg-breadcrumb: rgba(243, 238, 232, 0.5);
  --bg-muted: var(--brand-neutral-grey-10); /* muted surface — image placeholders */
  --bg-inverse: var(--brand-neutral-black);
  --bg-chip: var(--brand-secondary-aether-10);
  --bg-tag: var(--brand-primary-mint-40);
  --bg-nav-secondary: var(--brand-secondary-cobalt-60);

  /* component specific background colors */
  --bg-canvas: var(--brand-primary-canvas-20); /* warm off-white — use across hero banners, cards, sections */
  --bg-secondary-canvas: var(--brand-secondary-canvas-10); /* lighter warm off-white — use across sections, columns */
  --bg-mint: var(--brand-secondary-mint-10); /* mint green surface — cards, tag backgrounds */
  --bg-hero-dark: var(--brand-primary-jasper-80); /* hero banner dark/earthy variant background */
  --bg-deep: var(--brand-primary-jasper-100); /* deepest dark surface — hero jasper/dark variant */
  --bg-mega-menu: var(--brand-secondary-canvas-10);
  --bg-banner-primary: var(--brand-secondary-mint-10); /* announcement banner — theme-primary default */
  --bg-banner-primary-hover: var(--brand-secondary-mint-20); /* announcement banner — theme-primary hover */
  --bg-banner-secondary: var(--brand-secondary-aether-20); /* announcement banner — theme-secondary default */
  --bg-banner-secondary-hover: var(--brand-secondary-cobalt-30); /* announcement banner — theme-secondary hover */
 
  /* Border Colors */
  --border-default: var(--brand-neutral-grey-30);
  --border-light: var(--brand-neutral-grey-10);
  --border-strong: var(--brand-primary-cobalt-50);
  --border-interactive: var(--brand-primary-cobalt-50);
  --border-focus: var(--brand-primary-cobalt-70);
  --border-disabled: var(--brand-neutral-grey-80);
  --border-subtle: var(--brand-neutral-grey-20);
  --border-accent: var(--brand-primary-mint-40);
  --border-inverse: var(--brand-neutral-white);
  --border-footer-divider: var(--brand-neutral-grey-90); /* footer nav accordion divider */
  --border-divider: var(--brand-neutral-grey-40); /* section/column row divider */
  --border-menu: var(--brand-secondary-slate-20); /* mega-menu column separator */
 
  /* Action/Interactive States - light mode */
  /* Primary (solid) — all 5 states */
  --action-primary-bg: var(--brand-primary-cobalt-50);
  --action-primary-bg-hover: var(--brand-secondary-cobalt-60);
  --action-primary-bg-focused: var(--brand-secondary-cobalt-60);
  --action-primary-bg-pressed: var(--brand-primary-cobalt-70);
  --action-primary-bg-disabled: var(--brand-neutral-grey-80);
  --action-primary-text: var(--brand-neutral-white);
  --action-primary-text-disabled: var(--brand-neutral-white);
  --action-primary-focus-ring: var(--border-focus);

  /* Secondary (ghost / outline) — all 5 states */
  --action-secondary-bg: transparent;
  --action-secondary-text: var(--brand-primary-cobalt-50);
  --action-secondary-text-hover: var(--brand-secondary-cobalt-60);
  --action-secondary-text-focused: var(--brand-secondary-cobalt-60);
  --action-secondary-text-pressed: var(--brand-primary-cobalt-70);
  --action-secondary-text-disabled: var(--brand-neutral-grey-80);
  --action-secondary-border: var(--border-interactive);
  --action-secondary-border-hover: var(--brand-secondary-cobalt-60);
  --action-secondary-border-focused: var(--brand-secondary-cobalt-60);
  --action-secondary-border-pressed: var(--brand-primary-cobalt-70);
  --action-secondary-border-disabled: var(--border-disabled);
  --action-secondary-focus-ring: var(--border-focus);
  --action-focus-ring-dark: var(--brand-secondary-mint-30); /* focus ring for dark backgrounds */

  /* Tertiary (text-only / no border) — all 5 states */
  --action-tertiary-bg: transparent;
  --action-tertiary-text: var(--brand-primary-cobalt-50);
  --action-tertiary-text-hover: var(--brand-secondary-cobalt-60);
  --action-tertiary-text-focused: var(--brand-secondary-cobalt-60);
  --action-tertiary-text-pressed: var(--brand-primary-cobalt-70);
  --action-tertiary-text-disabled: var(--brand-neutral-grey-80);
  --action-tertiary-focus-ring: var(--border-focus);

  /* Shared disabled (legacy / convenience aliases) */
  --action-disabled-bg: var(--brand-neutral-grey-80);
  --action-disabled-text: var(--brand-neutral-white);
  --action-disabled-border: var(--brand-neutral-grey-80);

  /* Action/Interactive States - dark mode */
  --action-primary-bg-dark: var(--brand-neutral-white);
  --action-primary-bg-hover-dark: var(--brand-secondary-mint-10);
  --action-primary-bg-pressed-dark: var(--brand-secondary-mint-40);
  --action-primary-bg-disabled-dark: var(--brand-neutral-grey-50);
  --action-primary-text-dark: var(--brand-primary-jasper-100);
  --action-primary-border-dark: var(--brand-neutral-white);

  --action-secondary-bg-dark: transparent;
  --action-secondary-bg-hover-dark: var(--brand-secondary-mint-10);
  --action-secondary-text-dark: var(--brand-neutral-white);
  --action-secondary-border-dark: var(--brand-neutral-white);

  --action-tertiary-bg-dark: transparent;
  --action-tertiary-text-dark: var(--brand-neutral-white);

  --action-disabled-bg-dark: var(--brand-neutral-grey-50);
  --action-disabled-text-dark: var(--brand-primary-jasper-100);
  --action-disabled-border-dark: var(--brand-neutral-grey-50);

 
  --shadow-default: var(--shadow-rest);
  --shadow-elevated: var(--shadow-raised);

  /*opacity */
  --opacity-reset: 1; /* Reset opacity */
  --opacity-light: 0.2; /* Light opacity */
  --opacity-muted: 0.7;
  --opacity-hover: 0.8; /* Hover state opacity */
  --opacity-disabled: 0.5;
  --opacity-faded: 0.6; /* Faded text/icon opacity */
  --opacity-hover-strong: 0.9; /* Strong hover state opacity */
  --opacity-select: var(--opacity-hover);

  /* z-index */
  --z-index-dropdown: 1;
  --z-index-tooltip: 2;
  --z-index-popover: 5;
  --z-index-sticky: 50;
  --z-index-header: 99;
  --z-index-modal: 200;
  --z-index-skip-link: 201;
  --z-index-consent: 300;
  
  /* Transition */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
 
  /** conatiner widths */
  --content-container-width: 85rem;
}