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

/* Theme scope */
[data-theme="theme-xenserver"], .theme-xenserver {
  /* === 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%);

  /* ===================================
     XENSERVER BRAND COLOR PALETTE
     Source: Figma — Xenserver Master File
     Node: 13038-24304
     =================================== */

  /* --- Coral (primary brand signature) --- */
  --brand-xen-coral-100: #c75030; /* Xen Coral Main 1 — primary */
  --brand-xen-coral-95: #c62828;  /* Xen Coral Deep Red — chip/tag text */
  --brand-xen-coral-70: #ec6f4c;  /* Xen Coral Main 3 — medium */
  --brand-xen-coral-50: #fa7b57;  /* Xen Coral Light */
  --brand-xen-coral-10: #ffeee9;  /* Xen Coral Tint */

  /* --- Sec Blue Main --- */
  --brand-xen-sec-blue-100: #2255b8; /* Sec Blue Main 1 */
  --brand-xen-sec-blue-80: #005dd0;  /* Sec Blue Main 2 */
  --brand-xen-sec-blue-60: #0234a4;  /* Sec Blue — button hover/focused text */
  --brand-xen-sec-blue-30: #a3caf4;  /* Sec Blue Main 3 */

  /* --- Xen Blue Main --- */
  --brand-xen-blue-60: #0045db; /* Blue Main 1 */
  --brand-xen-blue-50: #00236e; /* Blue Main 2 */
  --brand-xen-blue-40: #456c9c; /* Blue Main swatch — focused state */
  --brand-xen-blue-20: #6a98c6; /* Blue Main 3 */

  /* --- Xen Blue Shades (dark) --- */
  --brand-xen-blue-shade-1: #2a333f; /* XB Shade 1 — darkest */
  --brand-xen-blue-shade-2: #344860; /* XB Shade 2 */
  --brand-xen-blue-shade-3: #41618a; /* XB Shade 3 */

  /* --- Sec Blue Shades (dark) --- */
  --brand-sec-blue-shade-1: #152e48; /* SB Shade 1 — darkest */
  --brand-sec-blue-shade-2: #163b6f; /* SB Shade 2 */
  --brand-sec-blue-shade-3: #204ea1; /* SB Shade 3 */

  /* --- Xen Blue Tints (light) --- */
  --brand-xen-blue-tint-1: #66aaeb; /* XB Tint 1 */
  --brand-xen-blue-tint-2: #a3caf4; /* XB Tint 2 */
  --brand-xen-blue-tint-3: #e9f4fb; /* XB Tint 3 */

  /* --- Sec Blue Tints (light) --- */
  --brand-sec-blue-tint-1: #98b8d7; /* SB Tint 1 */
  --brand-sec-blue-tint-2: #c0d4e7; /* SB Tint 2 */
  --brand-sec-blue-tint-3: #ecf2f8; /* SB Tint 3 */

  /* --- Xen Grey --- */
  --brand-xen-grey-80: #596563;   /* XG — button disabled text */
  --brand-xen-grey-70: #686c7c;  /* Xen Grey Main 1 */
  --brand-xen-grey-50: #a4abb1;  /* Xen Grey Main 2 */
  --brand-xen-grey-20: #e5e8eb;  /* Xen Grey Main 3 */
  --brand-xen-grey-shade: #454853; /* XG Shade */
  --brand-xen-grey-tint: #f5f7fa;  /* XG Tint */

  /* --- Neutrals --- */
  --brand-neutral-white: #fff;
  --brand-neutral-black: #000;
  --brand-secondary-canvas-10: #f8f7f6; /* warm off-white — mobile nav bg, canvas surface */

  /* --- Jasper greens (used in CTA section variants) --- */
  --brand-xen-jasper-100: #172c29; /* Jasper 100 — deepest dark green */
  --brand-xen-jasper-90: #244340;  /* Jasper 90 — dark green */
  --brand-xen-jasper-80: #2f5957;  /* Jasper 80 — medium dark green */
  --brand-xen-navy: #01226e;       /* Navy blue — dark cobalt */

  /* --- Canvas / neutral tints --- */
  --brand-xen-ivory: #f3eee8;      /* Ivory — warm cream */
  --brand-xen-gray: #dcd7d2;       /* Gray — warm neutral */
  --brand-xen-sky-blue: #d6edff;   /* Sky blue — light aether tint */

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

  /* Fixed brand colors */
  --primary-color: var(--brand-xen-sec-blue-100);  /* #2255B8 — primary interactive/CTA color */
  --secondary-color: var(--brand-xen-blue-shade-1); /* #2A333F — dark navy for text/footer */
  --ternary-color: var(--brand-xen-blue-shade-2);   /* #344860 */
  --accent-color: var(--brand-xen-coral-100);        /* #C75030 — coral brand accent (tags, labels) */

  /* 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-xen-blue-shade-1);   /* #2A333F — headings, titles, nav, author names */
  --color-text-secondary: var(--brand-xen-blue-shade-1); /* #2A333F — author names, dates, body text */
  --color-text-tertiary: var(--brand-xen-coral-100);     /* #C75030 — coral accent — category labels */
  --color-text-muted: var(--brand-xen-grey-70);
  --color-text-subdued: var(--brand-xen-grey-shade);
  --color-text-strong: var(--brand-xen-blue-shade-1);
  --color-text-disabled: var(--brand-xen-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: #2255b8;              /* #2255B8 — XenServer primary blue chip/tag text */
  --color-text-tag: var(--brand-xen-coral-95);               /* #C62828 — deep red tag text */
  --color-text-subtle: var(--brand-xen-grey-70);
  --color-text-accent: var(--brand-xen-sec-blue-80);           /* accent text on light backgrounds */
  --color-text-accent-dark: var(--brand-xen-blue-tint-2);      /* accent text on dark backgrounds */
  --color-text-jasper: var(--brand-xen-blue-shade-3);          /* supporting label/tag text */

  /* Link colors — light theme */
  --color-link-default: var(--brand-xen-sec-blue-80);  /* #005DD0 — Default state (blue) */
  --color-link-hover: var(--brand-xen-sec-blue-80);     /* #005DD0 — Figma: Hover state (sec-blue-main-2) */
  --color-link-pressed: var(--brand-xen-sec-blue-100);  /* #2255B8 — Figma: Pressed state (sec-blue-main-1) */
  --color-link-disabled: var(--brand-xen-grey-70);      /* #686C7C — Figma: Disabled state (xg-main-1) */

  /* Link colors — dark theme */
  --color-link-default-dark: var(--brand-neutral-white);      /* white — Figma: Default state */
  --color-link-hover-dark: var(--brand-xen-sec-blue-30);      /* #A3CAF4 — Figma: Hover state (sec-blue-main-3) */
  --color-link-pressed-dark: var(--brand-xen-blue-tint-1);    /* #66AAEB — Figma: Pressed state (xb-tint-1) */
  --color-link-disabled-dark: var(--brand-xen-grey-50);       /* #A4ABB1 — Figma: Disabled state (xg-main-2) */

  /* Background Colors */
  --color-cool-white: var(--brand-xen-grey-tint);
  --bg-page: var(--brand-neutral-white);
  --bg-surface: var(--brand-neutral-white);
  --bg-surface-subtle: var(--brand-xen-grey-tint);
  --bg-primary: var(--brand-xen-sec-blue-100);      /* #2255B8 — CTA button bg, avatar bg, active states */
  --bg-primary-subtle: var(--brand-sec-blue-tint-3); /* #ECF2F8 — subtle blue surface */
  --bg-secondary-subtle: var(--brand-sec-blue-tint-3);
  --bg-secondary-subtle-mid: var(--brand-sec-blue-tint-2);
  --bg-loader-dot: var(--brand-xen-sec-blue-80);
  --bg-disabled-subtle: var(--brand-xen-grey-20);
  --bg-header: var(--brand-neutral-white);
  --bg-footer: var(--brand-xen-blue-shade-1);        /* #2A333F — from Figma footer design */
  --bg-breadcrumb: rgb(236, 242, 248, 0.5);
  --bg-muted: var(--brand-xen-grey-20);
  --bg-inverse: var(--brand-xen-blue-shade-1);       /* #2A333F — dark inverse surface */
  --bg-chip: #ecf2f8;              /* #ECF2F8 — light blue bg for category tags */
  --bg-tag: var(--brand-xen-coral-10);               /* #FFEEE9 — coral tint bg for content labels */

  /* Component specific backgrounds */
  --bg-canvas: var(--brand-xen-grey-tint);              /* warm off-white surface */
  --bg-secondary-canvas: var(--brand-sec-blue-tint-3);  /* lighter secondary surface */
  --bg-mint: var(--brand-xen-blue-tint-3);              /* light blue surface — cards, tags */
  --bg-hero-dark: var(--brand-xen-blue-shade-2);        /* hero banner dark variant */
  --bg-deep: var(--brand-sec-blue-shade-1);             /* deepest dark surface */
  --bg-mega-menu: var(--brand-secondary-canvas-10);  /* #F8F7F6 — mobile nav menu + desktop mega menu bg */
  --bg-banner-primary: var(--brand-sec-blue-tint-3);        /* announcement banner — primary default */
  --bg-banner-primary-hover: var(--brand-sec-blue-tint-2);  /* announcement banner — primary hover */
  --bg-banner-secondary: var(--brand-xen-coral-10);          /* announcement banner — secondary default */
  --bg-banner-secondary-hover: var(--brand-xen-coral-50);   /* announcement banner — secondary hover */

  /* Border Colors */
  --border-default: var(--brand-xen-grey-20);
  --border-light: var(--brand-xen-grey-tint);
  --border-strong: var(--brand-xen-coral-100);          /* coral — distinctive emphasis border */
  --border-interactive: var(--brand-xen-sec-blue-100);   /* #2255B8 — interactive/form focus border */
  --border-focus: var(--brand-xen-sec-blue-100);
  --border-disabled: var(--brand-xen-grey-50);
  --border-subtle: var(--brand-xen-grey-20);
  --border-accent: var(--brand-xen-coral-50);
  --border-inverse: var(--brand-neutral-white);
  --border-footer-divider: var(--brand-xen-grey-shade);
  --border-divider: var(--brand-xen-grey-50);
  --border-menu: var(--brand-xen-grey-50);

  /* Action/Interactive States — light mode */

  /* Primary (solid) — all 5 states */
  --action-primary-bg: var(--brand-xen-sec-blue-100);          /* #2255B8 — default */
  --action-primary-bg-hover: var(--brand-xen-sec-blue-80);     /* #005DD0 — Figma: hover */
  --action-primary-bg-focused: var(--brand-xen-blue-40);              /* #456C9C — Figma: focused (xb-main-1 swatch) */
  --action-primary-bg-pressed: var(--brand-sec-blue-shade-2);  /* #163B6F — Figma: pressed */
  --action-primary-bg-disabled: var(--brand-xen-grey-70);      /* #686C7C — Figma: disabled */
  --action-primary-text: var(--brand-neutral-white);
  --action-primary-text-disabled: var(--brand-neutral-white);
  --action-primary-focus-ring: var(--border-focus);             /* #2255B8 */

  /* Secondary (ghost / outline) — all 5 states */
  --action-secondary-bg: transparent;
  --action-secondary-text: var(--brand-xen-blue-60);            /* #0045DB — Figma: default text */
  --action-secondary-text-hover: var(--brand-xen-sec-blue-60);         /* #0234A4 — Figma: hover text */
  --action-secondary-text-focused: var(--brand-xen-sec-blue-60);       /* #0234A4 — Figma: focused text */
  --action-secondary-text-pressed: var(--brand-xen-blue-shade-1); /* #2A333F — Figma: pressed text */
  --action-secondary-text-disabled: var(--brand-xen-grey-80);          /* #596563 — Figma: disabled text */
  --action-secondary-border: var(--border-interactive);         /* #2255B8 */
  --action-secondary-border-hover: var(--brand-xen-sec-blue-80); /* #005DD0 — Figma: hover */
  --action-secondary-border-focused: var(--brand-xen-sec-blue-100); /* #2255B8 — Figma: focused */
  --action-secondary-border-pressed: var(--brand-sec-blue-shade-2); /* #163B6F */
  --action-secondary-border-disabled: var(--brand-xen-grey-70); /* #686C7C — Figma: disabled */
  --action-secondary-focus-ring: var(--brand-xen-blue-50);      /* #00236E — Figma: focus ring */
  --action-focus-ring-dark: var(--brand-xen-blue-tint-2);

  /* Tertiary (text-only / no border) — all 5 states */
  --action-tertiary-bg: transparent;
  --action-tertiary-text: var(--brand-xen-blue-60);             /* #0045DB — Figma: default text */
  --action-tertiary-text-hover: var(--brand-xen-sec-blue-60);          /* #0234A4 — Figma: hover text */
  --action-tertiary-text-focused: var(--brand-xen-sec-blue-60);        /* #0234A4 — Figma: focused text */
  --action-tertiary-text-pressed: var(--brand-xen-blue-50);     /* #00236E — Figma: pressed */
  --action-tertiary-text-disabled: var(--brand-xen-grey-80);           /* #596563 — Figma: disabled text */
  --action-tertiary-focus-ring: var(--brand-xen-blue-50);       /* #00236E */

  /* Shared disabled */
  --action-disabled-bg: var(--brand-xen-grey-70);               /* #686C7C — Figma: disabled bg */
  --action-disabled-text: var(--brand-neutral-white);
  --action-disabled-border: var(--brand-xen-grey-70);           /* #686C7C */

  /* Action/Interactive States — dark mode */
  --action-primary-bg-dark: var(--brand-neutral-white);              /* white — Figma: default bg */
  --action-primary-bg-hover-dark: var(--brand-xen-sec-blue-80);      /* #005DD0 — Figma: hover */
  --action-primary-bg-focused-dark: var(--brand-xen-sec-blue-80);    /* #005DD0 — Figma: focused */
  --action-primary-bg-pressed-dark: var(--brand-xen-sec-blue-100);   /* #2255B8 — Figma: pressed */
  --action-primary-bg-disabled-dark: var(--brand-xen-grey-50);       /* #A4ABB1 — Figma: disabled */
  --action-primary-text-dark: var(--brand-xen-jasper-100);         /* #172C29 — dark text on white button */
  --action-primary-focus-ring-dark: var(--brand-xen-sec-blue-80);    /* #005DD0 — Figma: 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 — Figma: default */
  --action-secondary-text-hover-dark: var(--brand-xen-sec-blue-30);  /* #A3CAF4 — Figma: hover */
  --action-secondary-text-pressed-dark: var(--brand-xen-sec-blue-30);/* #A3CAF4 — Figma: pressed */
  --action-secondary-text-disabled-dark: var(--brand-xen-grey-50);   /* #A4ABB1 — Figma: disabled */
  --action-secondary-border-dark: var(--brand-neutral-white);         /* white — Figma: default */
  --action-secondary-border-hover-dark: var(--brand-xen-sec-blue-80);/* #005DD0 — Figma: hover */
  --action-secondary-border-pressed-dark: var(--brand-xen-sec-blue-100); /* #2255B8 — Figma: pressed */
  --action-secondary-border-disabled-dark: var(--brand-xen-grey-50); /* #A4ABB1 — Figma: disabled */

  --action-tertiary-bg-dark: transparent;
  --action-tertiary-text-dark: var(--brand-xen-grey-20);              /* #E5E8EB — Figma: default */
  --action-tertiary-text-hover-dark: var(--brand-xen-sec-blue-30);   /* #A3CAF4 — Figma: hover */

  --action-disabled-bg-dark: var(--brand-xen-grey-50);               /* #A4ABB1 — Figma: disabled bg */
  --action-disabled-text-dark: var(--brand-xen-blue-shade-1);        /* #2A333F — Figma: #172C29 */
  --action-disabled-border-dark: var(--brand-xen-grey-50);           /* #A4ABB1 */

  --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;
}