/* Theme scope */
:root, [data-theme="theme-tibco"], .theme-tibco {
  /* === FONT FAMILIES === */
  /* TIBCO uses Nata Sans for both headings and body copy. */
  --font-family-base: "Nata Sans", sans-serif;
  --font-family-heading: "Nata Sans", sans-serif;

  /* === FONT WEIGHTS === */
  /* TIBCO officially ships 3 weights: Regular (400), Semibold (600), Bold (700).
     The full 8-step scale below is retained for CSS-token flexibility; only the
     3 official values will actually load from font files. */
  --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 (T-shirt, aligned to TIBCO pixel spec) === */
  --font-size-xs: 0.75rem;   /* 12px — body XS */
  --font-size-sm: 0.875rem;  /* 14px — body S */
  --font-size-md: 1rem;      /* 16px — body M / h6 */
  --font-size-lg: 1.125rem;  /* 18px — body L */
  --font-size-xl: 1.3125rem; /* 21px — h5 */
  --font-size-2xl: 1.5rem;   /* 24px — body XL / h4 */
  --font-size-3xl: 1.75rem;  /* 28px — h3 */
  --font-size-4xl: 2rem;     /* 32px — h2 */
  --font-size-5xl: 2.5rem;   /* 40px — h1 */

  /* === LINE HEIGHT SCALE (aligned to TIBCO pixel spec) === */
  --line-height-xs: 1rem;       /* 16px */
  --line-height-sm: 1.25rem;    /* 20px */
  --line-height-md: 1.25rem;    /* 20px */
  --line-height-lg: 1.5rem;     /* 24px */
  --line-height-xl: 1.6875rem;  /* 27px */
  --line-height-2xl: 1.875rem;  /* 30px */
  --line-height-3xl: 2.25rem;   /* 36px */
  --line-height-4xl: 2.4375rem; /* 39px */
  --line-height-5xl: 2.75rem;   /* 44px */

  /* ======================================================================
     SEMANTIC TYPOGRAPHY TOKENS
     Direct 1:1 mapping to TIBCO Figma design tokens. Prefer these in new
     component CSS over the generic T-shirt scale above.
     ====================================================================== */

  /* --- Headings (Nata Sans) --- */
  /* H1: Bold; H2–H6: Semibold */
  --font-size-h1: var(--font-size-5xl);         /* 40px */
  --line-height-h1: var(--line-height-5xl);     /* 44px */
  --font-weight-h1: var(--font-weight-bold);    /* 700 */

  --font-size-h2: var(--font-size-4xl);         /* 32px */
  --line-height-h2: var(--line-height-4xl);     /* 39px */
  --font-weight-h2: var(--font-weight-semibold); /* 600 */

  --font-size-h3: var(--font-size-3xl);         /* 28px */
  --line-height-h3: var(--line-height-3xl);     /* 36px */
  --font-weight-h3: var(--font-weight-semibold); /* 600 */

  --font-size-h4: var(--font-size-2xl);         /* 24px */
  --line-height-h4: var(--line-height-2xl);     /* 30px */
  --font-weight-h4: var(--font-weight-semibold); /* 600 */

  --font-size-h5: var(--font-size-xl);          /* 20px */
  --line-height-h5: var(--line-height-xl);      /* 27px */
  --font-weight-h5: var(--font-weight-semibold); /* 600 */

  /* H6 is not defined in TIBCO Figma — extrapolated from the scale. */
  --font-size-h6: var(--font-size-md);          /* 16px */
  --line-height-h6: var(--line-height-sm);      /* 20px */
  --font-weight-h6: var(--font-weight-semibold); /* 600 */

  /* --- Body copy (Nata Sans) --- */
  /* Body XL/L use Semibold (Nata Sans has no Medium weight). */
  /* Body M/S/XS use Regular. */
  --font-size-body-xl: var(--font-size-2xl);       /* 24px */
  --line-height-body-xl: var(--line-height-2xl);   /* 30px */
  --font-weight-body-xl: var(--font-weight-semibold);

  --font-size-body-l: var(--font-size-lg);         /* 18px */
  --line-height-body-l: var(--line-height-lg);     /* 24px */
  --font-weight-body-l: var(--font-weight-semibold);

  --font-size-body-m: var(--font-size-md);         /* 16px */
  --line-height-body-m: var(--line-height-sm);     /* 20px */
  --font-weight-body-m: var(--font-weight-regular);

  --font-size-body-s: var(--font-size-sm);         /* 14px */
  --line-height-body-s: var(--line-height-sm);     /* 20px */
  --font-weight-body-s: var(--font-weight-regular);

  --font-size-body-xs: var(--font-size-xs);        /* 12px */
  --line-height-body-xs: var(--line-height-xs);    /* 16px */
  --font-weight-body-xs: var(--font-weight-regular);

  /* --- Buttons (derived from body scale; TIBCO Figma didn't spec buttons) --- */
  --font-size-button-primary: var(--font-size-body-s);        /* 14 / 20 / regular */
  --line-height-button-primary: var(--line-height-body-s);
  --font-weight-button-primary: var(--font-weight-body-s);

  --font-size-button-secondary: var(--font-size-body-s);
  --line-height-button-secondary: var(--line-height-body-s);
  --font-weight-button-secondary: var(--font-weight-body-s);

  --font-size-button-small: var(--font-size-body-xs);         /* 12 / 16 / regular */
  --line-height-button-small: var(--line-height-body-xs);
  --font-weight-button-small: var(--font-weight-body-xs);

  --font-size-button-medium: var(--font-size-body-l);         /* 18 / 24 / semibold */
  --line-height-button-medium: var(--line-height-body-l);
  --font-weight-button-medium: var(--font-weight-body-l);

  --font-size-button-large: var(--font-size-body-xl);         /* 24 / 30 / semibold */
  --line-height-button-large: var(--line-height-body-xl);
  --font-weight-button-large: var(--font-weight-body-xl);

  /* === 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-chip: var(--radius-md);
  --radius-button: var(--radius-md);
  --radius-tag: 0 var(--radius-md) 0 var(--radius-md);

  /* === SHADOWS === */
  --shadow-rest: 0 0 0.25rem rgba(0, 0, 0, 0.2);
  --shadow-raised: 0 0.5rem 2.5rem rgba(58, 53, 53, 0.05);
  --shadow-card: 0px 4px 40px 0px rgba(0, 0, 0, 0.08);

  /* ======================================================================
     TIBCO RAW PALETTE (from official brand guide)
     Use these tokens as the source of truth for TIBCO brand colors.
     Semantic tokens (text, bg, border, action) below reference these.
     ====================================================================== */

  /* --- Tibco Primary --- */
  --tibco-blue: #3382D9;
  --tibco-purple: #6138F0;
  --tibco-dark-blue-1: #243C55;
  --tibco-dark-blue-2: #255581;
  --tibco-blue-mid: #296FB2;
  --tibco-med-blue: #2996F8;
  --tibco-light-blue-1: #97CDFF;
  --tibco-light-blue-2: #E3F1FF;
  --tibco-light-blue-3: #7BBFFF;
  --tibco-dark-purple-1: #3B3073;
  --tibco-dark-purple-2: #4D34B4;
  --tibco-dark-purple-label: #363073;
  --tibco-med-purple-1: #8B6DF4;
  --tibco-light-purple-1: #C8B9FF;
  --tibco-light-purple-2: #EBE5FF;

  /* --- Tibco Secondary --- */
  --tibco-teal: #66FDEF;
  --tibco-orange: #FF610A;
  --tibco-sec-light-blue-1: #7B8FFF;
  --tibco-sec-light-blue-2: #D6E8FF;
  --tibco-black: #000000;
  --tibco-white: #FFFFFF;
  --tibco-neutral-grey-50: #97A09F;

  /* === NEUTRAL COLORS === */
  --brand-neutral-white: #FFFFFF;
  --brand-neutral-black: #000000;

  /* --- Tibco Gradients --- */
  --tibco-gradient-blue-purple: linear-gradient(135deg, #3382D9 0%, #6138F0 100%);
  --tibco-gradient-blue-darkblue: linear-gradient(135deg, #3382D9 0%, #255581 100%);
  --tibco-gradient-blue-teal: linear-gradient(135deg, #3382D9 0%, #66FDEF 100%);
  --tibco-gradient-teal-lightblue: linear-gradient(135deg, #66FDEF 0%, #E3F1FF 100%);

  /* --- Tibco Neutrals --- */
  --tibco-grey-1: #5C5C5C;
  --tibco-grey-2: #7A7A7A;
  --tibco-grey-3: #CACACA;
  --tibco-grey-4: #F4F4F4;

  /* --- Tibco Semantic (overrides generic status colors above) --- */
  --tibco-status-error: #C62828;
  --tibco-status-warning: #C25700;
  --tibco-status-success: #007A1E;
  --tibco-status-info: #0175AF;

  /* === FIXED SEMANTIC COLORS === */
  --primary-color: var(--tibco-blue);
  --secondary-color: var(--tibco-dark-blue-1);
  --ternary-color: var(--tibco-dark-blue-2);
  --accent-color: var(--tibco-purple);

  /* === STATUS COLORS === */
  --status-success: var(--tibco-status-success);
  --status-success-bg: #E5F2E8;
  --status-warning: var(--tibco-status-warning);
  --status-warning-bg: #F9EEE5;
  --status-error: var(--tibco-status-error);
  --status-error-bg: #F9E9E9;
  --status-info: var(--tibco-status-info);
  --status-info-bg: #E6F1F7;


  /* === TEXT COLORS === */
  --color-text-primary: var(--tibco-blue);
  --color-text-secondary: var(--tibco-dark-blue-1);
  --color-text-tertiary: var(--tibco-dark-blue-2);
  --color-text-default: var(--tibco-dark-blue-1);
  --color-text-muted: var(--tibco-grey-2);
  --color-text-disabled: var(--tibco-grey-3);
  --color-text-inverse: var(--tibco-white);

  --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(--tibco-dark-blue-2);
  --color-text-tag: var(--tibco-black);
  --color-text-subtle: var(--tibco-grey-1);
  --color-text-nav: var(--tibco-blue);

  /* === LINK COLORS (Figma node 38-157) === */
  --color-link-default: var(--tibco-black);
  --color-link-hover: var(--tibco-blue);
  --color-link-pressed: var(--tibco-purple);
  --color-link-disabled: var(--tibco-neutral-grey-50);

  /* link colors - dark theme */
  --color-link-default-dark: var(--tibco-white);
  --color-link-hover-dark: var(--tibco-white);
  --color-link-pressed-dark: var(--tibco-dark-blue-1);
  --color-link-disabled-dark: var(--tibco-neutral-grey-50);

  /* === BACKGROUND COLORS === */
  --bg-page: var(--tibco-white);
  --bg-surface: var(--tibco-white);
  --bg-surface-subtle: var(--tibco-grey-4);
  --bg-primary: var(--tibco-blue);
  --bg-primary-subtle: var(--tibco-light-blue-2);
  --bg-cta: linear-gradient(90deg, #3382D9 0%, #6138F0 100%);
  --bg-cta-hover: linear-gradient(90deg, #255581 0%, #4A1FCC 100%);
  --bg-info-subtle: var(--status-info-bg);
  --bg-disabled-subtle: var(--tibco-grey-4);
  --bg-header: var(--tibco-white);
  --bg-footer: var(--tibco-dark-blue-1);
  --bg-secondary-canvas: var(--tibco-grey-4);
  --bg-breadcrumb: rgb(214 235 255 / 60%);
  --bg-accent: var(--tibco-purple);
  --bg-muted: var(--tibco-grey-4);
  --bg-dark: var(--tibco-dark-blue-1);
  --bg-inverse: var(--tibco-black);
  --bg-chip: var(--tibco-light-blue-2);
  --bg-tag: var(--tibco-teal);
  --bg-nav: var(--tibco-blue);
  --bg-active: var(--tibco-dark-blue-1);
  --bg-primary-hover: var(--tibco-dark-blue-2);
  --bg-mega-menu: var(--tibco-grey-4);
  --bg-pagination: var(--tibco-light-blue-1);

  /* === BORDER COLORS === */
  --border-default: var(--tibco-grey-3);
  --border-strong: var(--tibco-blue);
  --border-interactive: var(--tibco-blue);
  --border-focus: var(--tibco-dark-blue-2);
  --border-disabled: var(--tibco-grey-2);
  --border-subtle: var(--tibco-grey-4);
  --border-accent: var(--tibco-purple);
  --border-inverse: var(--tibco-white);

  /* === ACTION / INTERACTIVE STATES === */
  /* Primary (solid) — 5 states */
  --action-primary-bg: var(--tibco-blue);
  --action-primary-bg-hover: var(--tibco-dark-blue-2);
  --action-primary-bg-focused: var(--tibco-dark-blue-2);
  --action-primary-bg-pressed: var(--tibco-dark-blue-1);
  --action-primary-bg-disabled: var(--tibco-grey-2);
  --action-primary-text: var(--tibco-white);
  --action-primary-text-disabled: var(--tibco-white);
  --action-primary-focus-ring: var(--border-focus);

  /* Secondary (ghost / outline) — 5 states */
  --action-secondary-bg: transparent;
  --action-secondary-text: var(--tibco-blue);
  --action-secondary-text-hover: var(--tibco-dark-blue-2);
  --action-secondary-text-focused: var(--tibco-dark-blue-2);
  --action-secondary-text-pressed: var(--tibco-dark-blue-1);
  --action-secondary-text-disabled: var(--tibco-grey-1);
  --action-secondary-border: var(--border-interactive);
  --action-secondary-border-hover: var(--tibco-dark-blue-2);
  --action-secondary-border-focused: var(--tibco-dark-blue-2);
  --action-secondary-border-pressed: var(--tibco-dark-blue-1);
  --action-secondary-border-disabled: var(--tibco-grey-1);
  --action-secondary-focus-ring: var(--border-focus);

  /* Tertiary (text-only / no border) — 5 states */
  --action-tertiary-bg: transparent;
  --action-tertiary-text: var(--tibco-blue);
  --action-tertiary-text-hover: var(--tibco-dark-blue-2);
  --action-tertiary-text-focused: var(--tibco-dark-blue-2);
  --action-tertiary-text-pressed: var(--tibco-dark-blue-1);
  --action-tertiary-text-disabled: var(--tibco-grey-1);
  --action-tertiary-focus-ring: var(--border-focus);

  /* Shared disabled (convenience aliases) */
  --action-disabled-bg: var(--tibco-grey-1);
  --action-disabled-text: var(--tibco-white);
  --action-disabled-border: var(--tibco-grey-1);

  /* Action/Interactive States - dark mode */
  --action-primary-bg-dark: var(--tibco-white);
  --action-primary-bg-hover-dark: var(--tibco-light-blue-2);
  --action-primary-bg-pressed-dark: var(--tibco-light-blue-1);
  --action-primary-bg-disabled-dark: var(--tibco-neutral-grey-50);
  --action-primary-text-dark: var(--tibco-dark-blue-1);
  --action-primary-border-dark: var(--tibco-white);

  --action-secondary-bg-dark: transparent;
  --action-secondary-text-dark: var(--tibco-white);
  --action-secondary-border-dark: var(--tibco-white);

  --action-disabled-text-dark: var(--tibco-dark-blue-1);
  --action-disabled-border-dark: var(--tibco-neutral-grey-50);
  --action-focus-ring-dark: var(--tibco-light-blue-1);

  /* === SHADOWS (aliases) === */
  --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;

  /* === TRANSITIONS === */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  /* === CONTAINER WIDTHS === */
  --content-container-width: 85rem;
}