/* stylelint-disable max-line-length */

/* Theme scope */
[data-theme="theme-netscaler"], .theme-netscaler {
  /* === FONT FAMILIES === */
  --font-family-base: "Public Sans", sans-serif;

  /* === FONT 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 === */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.5rem; /* 8px */
  --radius-lg: 0.75rem;
  --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 rgb(0 0 0 / 20%);
  --shadow-raised: 0 0.5rem 2.5rem rgb(0 0 0 / 5%);

  /* ===================================
     NETSCALER BRAND COLOR PALETTE
     Source: Figma — Netscaler Master File
     Node: 3566-12347
     =================================== */

  /* === NETSCALER PRIMARY COLORS === */
  --brand-primary-cobalt-50: #0045DB;
  --brand-primary-cobalt-70: #00236E;
  --brand-primary-mint-40: #71FD95;
  --brand-primary-jasper-80: #2E5957;
  --brand-primary-aether-20: #D6EDFF;
  --brand-primary-slate-20: #98B8BE;

  /* === NETSCALER 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-cobalt-30: #D6EDFF;

  --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-secondary-cool-grey-10: #D6EDFF;
  --brand-secondary-cool-grey-20: #D5D9D9;
  --brand-secondary-cool-grey-30: #C1C6C6;

  /* === NETSCALER BUTTON COLOURS (Light Theme — Figma node 10221-5888) === */
  --brand-dependable-blue-1: #0c8ce2;  /* Primary button default + focused state */
  --brand-deep-blue: #0970b4;           /* Blog detail links, pagination next-btn */
  --brand-bright-blue: #0f73ff;         /* Primary button hover state */
  --brand-blue-2: #99d4fa;              /* Primary button pressed state (light bg + black text) */
  --brand-blue-3: #def5ff;              /* Pagination inactive page number background (Figma node 13052-20572) */
  --brand-grey-1: #8c8c8c;             /* Button disabled state / inactive nav text */
  --brand-grey-10: #ebecec;           /* Default border, disabled bg, subtle bg */
  --brand-grey-20: #d5d9d9;           /* Default border, muted bg (matches --brand-secondary-cool-grey-20) */
  --brand-purple-100: #7c49ea;        /* Chip / tag text color */
  --brand-purple-tint: #f2f2f2;       /* Chip / tag background */
  --brand-teal: #19c49a;              /* CTA section teal variant */
  --brand-cta-jasper: #172c29;        /* CTA section deep jasper variant */
  --brand-warm-white: #f8f7f6;        /* Mega menu background */
  --brand-blue-tint-2: #dbeaff;        /* Announcement banner — aether default */
  --brand-purple-tint-2: #e5dbfb;      /* Announcement banner — aether hover */
  --brand-green-tint-2: #d1f3eb;       /* Announcement banner — mint default */
  --brand-green-tint-1: #8be1cc;       /* Announcement banner — mint hover */

  /* --- Neutrals --- */
  --brand-neutral-white: #fff;
  --brand-neutral-black: #000;

  /* --- Extended Netscaler Palette --- */
  --brand-charcoal: #7d91aa;
  --brand-orange: #ff8c02;
  --brand-rose: #fa5944;
  --brand-blue-tint-1: #93c0ff;
  --brand-grey-tint-1: #bdc7c4;
  --brand-grey-tint-2: #e5e9ee;
  --brand-orange-tint-1: #ffc580;
  --brand-orange-tint-2: #ffe8cc;
  --brand-purple-tint-1: #8da3f4;
  --brand-rose-tint-1: #fcaba1;
  --brand-rose-tint-2: #fededa;

  /* ===================================
     SEMANTIC TOKENS
     =================================== */

  /* Fixed brand colors */
  --primary-color: var(--brand-primary-cobalt-50);   /* #0045DB — primary interactive/CTA color */
  --secondary-color: var(--brand-secondary-jasper-100); /* #172B29 — dark teal for text/footer */
  --ternary-color: var(--brand-jasper-90);    /* #234341 */
  --accent-color: var(--brand-mint-40);       /* #71FD95 — NetScaler mint accent */

  /* Status colors */
  --status-success: #007a1e;
  --status-success-bg: #e5f2e8;
  --status-warning: #c25700;
  --status-warning-bg: #f9eee5;
  --status-error: #c62828;
  --status-error-bg: #f9e9e9;
  --status-info: #0175af;
  --status-info-bg: #e6f1f7;

  /* Text Colors */
  --color-text-primary: var(--brand-neutral-black);         /* #000 — headings, titles, author names */
  --color-text-secondary: var(--brand-neutral-black);        /* #000 — body text, dates */
  --color-text-tertiary: var(--brand-mint-50);     /* #55BE70 — accent category labels */
  --color-text-muted: var(--brand-neutral-black);      /* #000 — muted text */
  --color-text-subdued: var(--brand-jasper-80);   /* #2E5957 — subdued label text */
  --color-text-strong: var(--brand-neutral-black);
  --color-text-disabled: var(--brand-grey-20);
  --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-neutral-black);      /* #000 — chip text */
  --color-text-tag: var(--brand-purple-100);        /* #7C49EA — tag text */
  --color-text-subtle: var(--brand-grey-1);
  --color-text-accent: var(--brand-primary-cobalt-50);             /* #0045DB — accent text on light backgrounds */
  --color-text-accent-dark: var(--brand-cobalt-30);        /* accent text on dark backgrounds */
  --color-text-jasper: var(--brand-jasper-80);             /* supporting label/tag text */

  /* Link colors — light theme */
  --color-link-default: var(--brand-deep-blue);  /* #0970b4 — Default state */
  --color-link-hover: var(--brand-deep-blue);    /* #0970b4 — Hover state */
  --color-link-pressed: var(--brand-deep-blue);  /* #0970b4 — Pressed state */
  --color-link-disabled: var(--brand-grey-1);    /* #8c8c8c — Disabled state */

  /* Link colors — dark theme */
  --color-link-default-dark: var(--brand-neutral-white);      /* white — Default state */
  --color-link-hover-dark: var(--brand-deep-blue);            /* #0970b4 — Hover state */
  --color-link-pressed-dark: var(--brand-deep-blue);          /* #0970b4 — Pressed state */
  --color-link-disabled-dark: var(--brand-grey-1);            /* #8c8c8c — Disabled state */

  /* Background Colors */
  --color-cool-white: var(--brand-grey-10);
  --bg-page: var(--brand-neutral-white);
  --bg-surface: var(--brand-neutral-white);
  --bg-surface-subtle: var(--brand-aether-20);
  --bg-primary: var(--brand-deep-blue);           /* #0c8ce2 — CTA button bg, avatar bg, active page number bg */
  --bg-primary-subtle: #DEF5FF;    /* #DEF5FF — subtle blue surface */
  --bg-secondary-subtle: var(--brand-blue-3);        /* #def5ff — inactive pagination page number bg, dots bg */
  --bg-secondary-subtle-mid: var(--brand-cobalt-30);   /* #8CB0FF — mid-weight secondary surface */
  --bg-loader-dot: var(--brand-primary-cobalt-50);
  --bg-disabled-subtle: var(--brand-grey-20);
  --bg-header: var(--brand-neutral-white);
  --bg-footer: var(--brand-secondary-jasper-100);           /* #172B29 — dark teal footer */
  --bg-breadcrumb: rgb(214 237 255 / 50%);
  --bg-muted: var(--brand-grey-20);
  --bg-inverse: var(--brand-secondary-jasper-100);          /* #172B29 — dark inverse surface */
  --bg-chip: #def5ff;              /* #DEF5FF — chip background */
  --bg-tag: var(--brand-purple-tint);               /* #F2F2F2 — tag background */

  /* Component specific backgrounds */
  --bg-canvas: var(--brand-grey-10);                 /* light grey surface */
  --bg-secondary-canvas: var(--brand-aether-20);     /* lighter secondary surface */
  --bg-mint: var(--brand-mint-10);                   /* light mint surface — cards, tags */
  --bg-hero-dark: var(--brand-jasper-90);            /* hero banner dark variant */
  --bg-deep: var(--brand-secondary-jasper-100);                /* deepest dark surface */
  --bg-mega-menu: var(--brand-warm-white);
  --bg-banner-primary: var(--brand-blue-tint-2);           /* #dbeaff — announcement banner aether default */
  --bg-banner-primary-hover: var(--brand-purple-tint-2);     /* #e5dbfb — announcement banner aether hover */
  --bg-banner-secondary: var(--brand-green-tint-2);         /* #d1f3eb — announcement banner mint default */
  --bg-banner-secondary-hover: var(--brand-green-tint-1);   /* #8be1cc — announcement banner mint hover */

  /* Border Colors */
  --border-default: var(--brand-grey-20);
  --border-light: var(--brand-grey-10);
  --border-strong: var(--brand-deep-blue);    /* #0c8ce2 — distinctive emphasis border */
  --border-interactive: var(--brand-primary-cobalt-50);       /* #0045DB — interactive/form focus border */
  --border-focus: var(--brand-primary-cobalt-50);
  --border-disabled: var(--brand-grey-1);
  --border-subtle: var(--brand-grey-20);
  --border-accent: var(--brand-mint-50);
  --border-inverse: var(--brand-neutral-white);
  --border-footer-divider: var(--brand-jasper-80);
  --border-divider: var(--brand-grey-1);
  --border-menu: var(--brand-grey-20);

  /* Action/Interactive States — light mode */

  /* Primary (solid) — all 5 states */
  --action-primary-bg: var(--brand-deep-blue);          /* #0c8ce2 — default */
  --action-primary-bg-hover: var(--brand-bright-blue);           /* #0f73ff — hover */
  --action-primary-bg-focused: var(--brand-deep-blue);   /* #0c8ce2 — focused (same as default) */
  --action-primary-bg-pressed: var(--brand-blue-2);              /* #99d4fa — pressed */
  --action-primary-bg-disabled: var(--brand-grey-1);             /* #8c8c8c — disabled */
  --action-primary-text: var(--brand-neutral-white);
  --action-primary-text-pressed: var(--brand-neutral-black);         /* pressed bg is light (#99d4fa), so text is black */
  --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-deep-blue);              /* #0c8ce2 — default text */
  --action-secondary-text-hover: var(--brand-bright-blue);         /* #0f73ff — hover text */
  --action-secondary-text-focused: var(--brand-deep-blue); /* #0c8ce2 — focused text */
  --action-secondary-text-pressed: var(--brand-blue-2);            /* #99d4fa — pressed text */
  --action-secondary-text-disabled: var(--brand-grey-1);           /* #8c8c8c — disabled text */
  --action-secondary-border: var(--brand-deep-blue);        /* #0c8ce2 — default border */
  --action-secondary-border-hover: var(--brand-bright-blue);        /* #0f73ff — hover border */
  --action-secondary-border-focused: var(--brand-deep-blue); /* #0c8ce2 — focused border */
  --action-secondary-border-pressed: var(--brand-blue-2);           /* #99d4fa — pressed border */
  --action-secondary-border-disabled: var(--brand-grey-1);          /* #8c8c8c — disabled border */
  --action-secondary-focus-ring: var(--brand-cobalt-70);        /* #00236E — focus ring */
  --action-focus-ring-dark: var(--brand-cobalt-30);

  /* Tertiary (text-only / no border) — all 5 states */
  --action-tertiary-bg: transparent;
  --action-tertiary-text: var(--brand-deep-blue);               /* #0c8ce2 — default text */
  --action-tertiary-text-hover: var(--brand-bright-blue);          /* #0f73ff — hover text */
  --action-tertiary-text-focused: var(--brand-deep-blue);  /* #0c8ce2 — focused text */
  --action-tertiary-text-pressed: var(--brand-blue-2);             /* #99d4fa — pressed text */
  --action-tertiary-text-disabled: var(--brand-grey-1);            /* #8c8c8c — disabled text */
  --action-tertiary-focus-ring: var(--brand-cobalt-70);         /* #00236E */

  /* Shared disabled */
  --action-disabled-bg: var(--brand-grey-1);                  /* #98B8BE — disabled bg */
  --action-disabled-text: var(--brand-neutral-white);
  --action-disabled-border: var(--brand-grey-1);              /* #98B8BE */

  /* Action/Interactive States — dark mode */
  --action-primary-bg-dark: var(--brand-neutral-white);              /* white — default bg */
  --action-primary-bg-hover-dark: var(--brand-cobalt-60);         /* #0034A4 — hover */
  --action-primary-bg-focused-dark: var(--brand-cobalt-60);       /* #0034A4 — focused */
  --action-primary-bg-pressed-dark: var(--brand-primary-cobalt-50);       /* #0045DB — pressed */
  --action-primary-bg-disabled-dark: var(--brand-grey-1);       /* #98B8BE — disabled */
  --action-primary-text-dark: var(--brand-secondary-jasper-100);            /* #172B29 — dark text on white */
  --action-primary-focus-ring-dark: var(--brand-cobalt-60);       /* #0034A4 — focus ring */
  --action-primary-border-dark: var(--brand-neutral-white);

  --action-secondary-bg-dark: transparent;
  --action-secondary-bg-hover-dark: transparent;
  --action-secondary-text-dark: var(--brand-neutral-white);           /* white — default */
  --action-secondary-text-hover-dark: var(--brand-cobalt-30);     /* #8CB0FF — hover */
  --action-secondary-text-pressed-dark: var(--brand-cobalt-30);   /* #8CB0FF — pressed */
  --action-secondary-text-disabled-dark: var(--brand-grey-1);   /* #98B8BE — disabled */
  --action-secondary-border-dark: var(--brand-neutral-white);         /* white — default */
  --action-secondary-border-hover-dark: var(--brand-cobalt-60);   /* #0034A4 — hover */
  --action-secondary-border-pressed-dark: var(--brand-primary-cobalt-50); /* #0045DB — pressed */
  --action-secondary-border-disabled-dark: var(--brand-grey-1); /* #98B8BE — disabled */

  --action-tertiary-bg-dark: transparent;
  --action-tertiary-text-dark: var(--brand-grey-10);              /* #EBECEC — default */
  --action-tertiary-text-hover-dark: var(--brand-cobalt-30);      /* #8CB0FF — hover */

  --action-disabled-bg-dark: var(--brand-grey-1);               /* #98B8BE — disabled bg */
  --action-disabled-text-dark: var(--brand-secondary-jasper-100);           /* #172B29 */
  --action-disabled-border-dark: var(--brand-grey-1);           /* #98B8BE */

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

  /* Opacity */
  --opacity-reset: 1;
  --opacity-light: 0.2;
  --opacity-muted: 0.7;
  --opacity-hover: 0.8;
  --opacity-disabled: 0.5;
  --opacity-faded: 0.6;
  --opacity-hover-strong: 0.9;
  --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;

  /* Container widths */
  --content-container-width: 90rem;
}