/**
 * JKPTG design tokens.
 *
 * Synced from the JKPTG Portal Figma file on 2026-09-09:
 * - 01. Primitives (14:17948)
 * - 02. Semantic (15:18001)
 * - 03. Components (41:238)
 *
 * Figma aliases are retained as CSS custom-property references so changes to a
 * primitive continue to flow through semantic and component tokens.
 */

:root {
  /* 01. Primitives: colour. */
  --jkptg-color-white: #fcfcfc;
  --jkptg-color-black: #00122a;
  --jkptg-color-teal-100: #e6fffc;
  --jkptg-color-teal-200: #7de8de;
  --jkptg-color-teal-500: #00a99d;
  --jkptg-color-teal-600: #008f86;
  --jkptg-color-teal-700: #007a73;
  --jkptg-color-teal-900: #002e2b;
  --jkptg-color-cyan-100: #e4f3fa;
  --jkptg-color-cyan-200: #a7e3ff;
  --jkptg-color-cyan-500: #2d9bd3;
  --jkptg-color-cyan-600: #1985bc;
  --jkptg-color-cyan-700: #026ca3;
  --jkptg-color-blue-100: #c7c9ff;
  --jkptg-color-blue-400: #4b51ff;
  --jkptg-color-blue-800: #0309c9;
  --jkptg-color-navy-900: #00122a;
  --jkptg-color-red-100: #f4d1d4;
  --jkptg-color-red-400: #cf2a4b;
  --jkptg-color-red-500: #c60f1e;
  --jkptg-color-red-600: #ab161a;
  --jkptg-color-red-700: #8b0511;
  --jkptg-color-red-800: #280206;
  --jkptg-color-grey-100: #f3f5f8;
  --jkptg-color-grey-300: #f3f4f4;
  --jkptg-color-grey-400: #d3d7dc;
  --jkptg-color-grey-500: #c2c2c2;
  --jkptg-color-grey-600: #929292;
  --jkptg-color-grey-700: #535353;
  --jkptg-color-grey-800: #3d3d3d;
  --jkptg-color-green-100: #dcffbf;
  --jkptg-color-green-200: #adff77;
  --jkptg-color-green-600: #009261;
  --jkptg-color-green-700: #0b5f00;

  /* Date labels. */
  --jkptg-date-background: transparent;
  --jkptg-date-icon-color: var(--jkptg-color-teal-600);

  /* 01. Primitives: alpha colour. */
  --jkptg-color-alpha-white-0: #ffffff00;
  --jkptg-color-alpha-white-05: #ffffff0d;
  --jkptg-color-alpha-white-10: #ffffff1a;
  --jkptg-color-alpha-white-15: #ffffff26;
  --jkptg-color-alpha-white-20: #ffffff33;
  --jkptg-color-alpha-white-25: #ffffff40;
  --jkptg-color-alpha-white-40: #ffffff66;
  --jkptg-color-alpha-white-50: #ffffff80;
  --jkptg-color-alpha-white-60: #ffffff99;
  --jkptg-color-alpha-black-0: #00000000;
  --jkptg-color-alpha-black-05: #0000000d;
  --jkptg-color-alpha-black-10: #0000001a;
  --jkptg-color-alpha-black-15: #00000026;
  --jkptg-color-alpha-black-20: #00000033;
  --jkptg-color-alpha-black-25: #00000040;
  --jkptg-color-alpha-black-40: #00000066;
  --jkptg-color-alpha-black-50: #00000080;

  /* 01. Primitives: typography. */
  --jkptg-font-family-title: 'Inter', sans-serif;
  --jkptg-font-family-body: 'Inter', sans-serif;
  --jkptg-font-size-xxs: 10px;
  --jkptg-font-size-xs: 12px;
  --jkptg-font-size-sm: 14px;
  --jkptg-font-size-md: 16px;
  --jkptg-font-size-lg: 18px;
  --jkptg-font-size-xl: 20px;
  --jkptg-font-size-2xl: 32px;
  --jkptg-font-size-3xl: 40px;
  --jkptg-font-size-4xl: 48px;
  --jkptg-font-size-5xl: 64px;
  --jkptg-font-weight-regular: 400;
  --jkptg-font-weight-semibold: 600;
  --jkptg-font-weight-bold: 700;

  /* 01. Primitives: spacing, borders, radius, and shadow. */
  --jkptg-spacing-3xs: 2px;
  --jkptg-spacing-2xs: 4px;
  --jkptg-spacing-xs: 8px;
  --jkptg-spacing-sm: 12px;
  --jkptg-spacing-md: 16px;
  --jkptg-spacing-lg: 24px;
  --jkptg-spacing-xl: 32px;
  --jkptg-spacing-6xl: 120px;
  --jkptg-border-width-sm: 1px;
  --jkptg-border-width-md: 2px;
  --jkptg-border-width-lg: 4px;
  --jkptg-border-width-xl: 8px;
  --jkptg-radius-xs: 2px;
  --jkptg-radius-sm: 4px;
  --jkptg-radius-md: 6px;
  --jkptg-radius-lg: 8px;
  --jkptg-radius-xl: 12px;
  --jkptg-radius-2xl: 20px;
  --jkptg-radius-full: 999px;
  --jkptg-shadow-100: var(--jkptg-color-alpha-black-20);
  --jkptg-shadow-200: #2d9bd34d;

  /* 02. Semantic: surfaces. */
  --jkptg-surface-primary: var(--jkptg-color-white);
  --jkptg-surface-secondary: var(--jkptg-color-grey-100);
  --jkptg-surface-brand: var(--jkptg-color-teal-700);
  --jkptg-surface-gradient-start: var(--jkptg-color-teal-500);
  --jkptg-surface-gradient-end: var(--jkptg-color-cyan-500);
  --jkptg-surface-inverse: var(--jkptg-color-teal-900);
  --jkptg-surface-dark: var(--jkptg-color-navy-900);
  --jkptg-surface-overlay-50: var(--jkptg-color-alpha-black-50);
  --jkptg-surface-overlay-on-dark-15: var(--jkptg-color-alpha-white-15);
  --jkptg-surface-overlay-on-dark-60: var(--jkptg-color-alpha-white-60);
  --jkptg-surface-overlay-brand: var(--jkptg-color-teal-100);
  --jkptg-surface-action-default: var(--jkptg-color-cyan-500);
  --jkptg-surface-action-hover: var(--jkptg-color-cyan-600);
  --jkptg-surface-action-press: var(--jkptg-color-cyan-700);
  --jkptg-surface-brand-default: var(--jkptg-color-red-500);
  --jkptg-surface-brand-hover: var(--jkptg-color-red-700);
  --jkptg-surface-brand-press: var(--jkptg-color-red-600);
  --jkptg-surface-status-warning: var(--jkptg-color-red-400);
  --jkptg-surface-status-info: var(--jkptg-color-blue-400);
  --jkptg-surface-control: var(--jkptg-color-grey-700);
  --jkptg-surface-disabled: var(--jkptg-color-grey-500);
  --jkptg-surface-neutral-hover-light: var(--jkptg-color-grey-300);

  /* 02. Semantic: text and icons. */
  --jkptg-text-primary: var(--jkptg-color-black);
  --jkptg-text-secondary: var(--jkptg-color-grey-800);
  --jkptg-text-tertiary: var(--jkptg-color-grey-600);
  --jkptg-text-inverse: var(--jkptg-color-white);
  --jkptg-text-brand: var(--jkptg-color-teal-600);
  --jkptg-text-action-default: var(--jkptg-color-cyan-500);
  --jkptg-text-action-hover: var(--jkptg-color-cyan-600);
  --jkptg-text-action-press: var(--jkptg-color-cyan-700);
  --jkptg-text-action-disable: var(--jkptg-color-grey-500);
  --jkptg-text-brand-default: var(--jkptg-color-red-500);
  --jkptg-text-brand-hover: var(--jkptg-color-red-700);
  --jkptg-text-brand-press: var(--jkptg-color-red-600);
  --jkptg-icon-default: var(--jkptg-color-white);
  --jkptg-icon-muted: var(--jkptg-color-alpha-black-50);
  --jkptg-icon-accent: var(--jkptg-color-red-400);

  /* 02. Semantic: borders and shadows. */
  --jkptg-border-default: var(--jkptg-color-grey-400);
  --jkptg-border-action-default: var(--jkptg-color-cyan-500);
  --jkptg-border-action-hover: var(--jkptg-color-cyan-600);
  --jkptg-border-action-press: var(--jkptg-color-cyan-700);
  --jkptg-border-action-disable: var(--jkptg-color-grey-500);
  --jkptg-border-active: var(--jkptg-color-cyan-700);
  --jkptg-border-neutral-on-dark-0: var(--jkptg-color-alpha-white-0);
  --jkptg-border-neutral-on-dark-05: var(--jkptg-color-alpha-white-05);
  --jkptg-border-neutral-on-dark-10: var(--jkptg-color-alpha-white-10);
  --jkptg-border-neutral-on-dark-15: var(--jkptg-color-alpha-white-15);
  --jkptg-border-neutral-on-dark-20: var(--jkptg-color-alpha-white-20);
  --jkptg-border-neutral-on-dark-25: var(--jkptg-color-alpha-white-25);
  --jkptg-border-neutral-on-dark-40: var(--jkptg-color-alpha-white-40);
  --jkptg-border-neutral-on-dark-50: var(--jkptg-color-alpha-white-50);
  --jkptg-border-neutral-on-light-0: var(--jkptg-color-alpha-black-0);
  --jkptg-border-neutral-on-light-05: var(--jkptg-color-alpha-black-05);
  --jkptg-border-neutral-on-light-10: var(--jkptg-color-alpha-black-10);
  --jkptg-border-neutral-on-light-15: var(--jkptg-color-alpha-black-15);
  --jkptg-border-neutral-on-light-20: var(--jkptg-color-alpha-black-20);
  --jkptg-border-neutral-on-light-25: var(--jkptg-color-alpha-black-25);
  --jkptg-border-neutral-on-light-40: var(--jkptg-color-alpha-black-40);
  --jkptg-border-neutral-on-light-50: var(--jkptg-color-alpha-black-50);
  --jkptg-shadow-resting: var(--jkptg-shadow-100);
  --jkptg-shadow-brand: var(--jkptg-shadow-200);

  /* 03. Components: primary button. */
  --jkptg-button-primary-background-default: var(--jkptg-surface-action-default);
  --jkptg-button-primary-background-hover: var(--jkptg-surface-action-hover);
  --jkptg-button-primary-background-pressed: var(--jkptg-surface-action-press);
  --jkptg-button-primary-background-disabled: var(--jkptg-surface-disabled);
  --jkptg-button-primary-border-default: var(--jkptg-border-action-default);
  --jkptg-button-primary-border-hover: var(--jkptg-border-action-hover);
  --jkptg-button-primary-border-pressed: var(--jkptg-border-action-press);
  --jkptg-button-primary-border-disabled: var(--jkptg-border-action-disable);
  --jkptg-button-primary-label-default: var(--jkptg-text-inverse);
  --jkptg-button-primary-label-disabled: var(--jkptg-text-tertiary);
  --jkptg-button-primary-icon-default: var(--jkptg-icon-default);

  /* 03. Components: secondary button. */
  --jkptg-button-secondary-background-default: var(--jkptg-surface-primary);
  --jkptg-button-secondary-background-hover: var(--jkptg-color-cyan-200);
  --jkptg-button-secondary-background-pressed: var(--jkptg-surface-action-press);
  --jkptg-button-secondary-background-disabled: var(--jkptg-surface-disabled);
  --jkptg-button-secondary-border-default: var(--jkptg-border-neutral-on-light-15);
  --jkptg-button-secondary-border-hover: var(--jkptg-border-action-hover);
  --jkptg-button-secondary-border-pressed: var(--jkptg-border-action-press);
  --jkptg-button-secondary-border-disabled: var(--jkptg-border-action-disable);
  --jkptg-button-secondary-label-default: var(--jkptg-text-primary);
  --jkptg-button-secondary-label-disabled: var(--jkptg-text-tertiary);
  --jkptg-button-secondary-icon-default: var(--jkptg-icon-accent);

  /* 03. Components: tabs and audience tags. */
  --jkptg-tab-default-text: var(--jkptg-text-secondary);
  --jkptg-tab-default-icon: var(--jkptg-icon-muted);
  --jkptg-tab-active-text: var(--jkptg-color-cyan-700);
  --jkptg-tab-active-icon: var(--jkptg-icon-default);
  --jkptg-tab-active-border: var(--jkptg-border-neutral-on-light-40);
  --jkptg-tab-active-background: var(--jkptg-surface-action-default);
  --jkptg-tab-active-shadow: var(--jkptg-shadow-200);
  --jkptg-tag-audience-public-background: var(--jkptg-color-blue-100);
  --jkptg-tag-audience-public-text: var(--jkptg-color-blue-800);
  --jkptg-tag-audience-government-background: var(--jkptg-color-green-200);
  --jkptg-tag-audience-government-text: var(--jkptg-color-green-700);

  /* Site layout and composite typography tokens. */
  --jkptg-typography-family-title: var(--jkptg-font-family-title);
  --jkptg-typography-family-body: var(--jkptg-font-family-body);
  --jkptg-heading-h2-font-weight: var(--jkptg-font-weight-bold);
  --jkptg-body-p-font-size: var(--jkptg-font-size-md);
  --jkptg-body-p-line-height: 24px;
  --jkptg-body-p: var(--jkptg-font-weight-regular) var(--jkptg-body-p-font-size) / var(--jkptg-body-p-line-height) var(--jkptg-typography-family-body);
  --jkptg-layout-container-max-width: 1200px;
  --jkptg-layout-page-gutter: clamp(12px, 2vw, 24px);
  --jkptg-layout-content-gutter: var(--jkptg-layout-page-gutter);

  /* Compatibility aliases used by existing Bootstrap and theme styles. */
  --jkptg-primary: var(--jkptg-surface-brand-default);
  --jkptg-secondary: var(--jkptg-surface-inverse);
  --jkptg-accent: var(--jkptg-surface-action-default);
  --jkptg-text: var(--jkptg-text-primary);
  --jkptg-text-light: var(--jkptg-text-tertiary);
  --jkptg-white: var(--jkptg-color-white);
  --jkptg-gray-50: var(--jkptg-surface-secondary);
  --jkptg-gray-100: var(--jkptg-color-cyan-100);
  --jkptg-gray-200: var(--jkptg-border-default);
  --jkptg-gray-300: var(--jkptg-color-grey-500);
  --jkptg-gray-400: var(--jkptg-color-grey-600);
  --jkptg-gray-500: var(--jkptg-color-grey-600);
  --jkptg-gray-600: var(--jkptg-color-grey-700);
  --jkptg-gray-700: var(--jkptg-color-grey-800);
  --jkptg-gray-800: var(--jkptg-color-grey-800);
  --jkptg-gray-900: var(--jkptg-color-black);
  --jkptg-success: var(--jkptg-color-green-600);
  --jkptg-warning: var(--jkptg-surface-status-warning);
  --jkptg-danger: var(--jkptg-text-brand-default);
  --jkptg-info: var(--jkptg-color-cyan-600);
  --jkptg-purple: var(--jkptg-color-blue-400);
  --font-family-sans-serif: var(--jkptg-font-family-body);
}