@source '../../../packages/lib/src';
@layer theme, base, antd, components, utilities;
@import 'tailwindcss';
body {
  font-family: var(--font-family);
}

:root {
  --font-family: Arial, Helvetica, sans-serif;
  /* neutral */
  --color-neutral-50: #ffffff;
  --color-neutral-100: #fafafa;
  --color-neutral-200: #f5f5f5;
  --color-neutral-300: #f0f0f0;
  --color-neutral-400: #d9d9d9;
  --color-neutral-500: #bfbfbf;
  --color-neutral-600: #8c8c8c;
  --color-neutral-700: #595959;
  --color-neutral-800: #434343;
  --color-neutral-900: #262626;
  --color-neutral-950: #1f1f1f;
  --color-neutral-1000: #141414;
  --color-neutral-1100: #000000;

  /* blue */
  --color-blue-50: #e6edf9;
  --color-blue-100: #c0d2f2;
  --color-blue-200: #97b6eb;
  --color-blue-300: #6e9be4;
  --color-blue-400: #00239b;
  --color-blue-500: #001e8b;
  --color-blue-600: #001771;
  --color-blue-700: #001256;
  --color-blue-800: #000c3b;
  --color-blue-900: #000826;

  /* red */
  --color-red-50: #fff1f0;
  --color-red-100: #ffccc7;
  --color-red-200: #ffa39e;
  --color-red-300: #ff7875;
  --color-red-400: #ff4d4f;
  --color-red-500: #f5222d;
  --color-red-600: #cf1322;
  --color-red-700: #a8071a;
  --color-red-800: #820014;
  --color-red-900: #5c0011;

  /* seasonal gradients */
  --gradient-winter: linear-gradient(
    180deg,
    #ffffff 0%,
    #c0d9ff 68.269%,
    #a2ccff 100%
  );
  --gradient-summer: linear-gradient(
    180deg,
    #ffffff 0%,
    #fffbaf 68.269%,
    #ffd4a2 100%
  );
  --gradient-autumn: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffce84 68.269%,
    #eac391 100%
  );
  --gradient-spring: linear-gradient(
    180deg,
    #ffffff 0%,
    #96e2af 68.269%,
    #7fc93a 100%
  );

  --request-header-gradient: linear-gradient(
    85.79deg,
    rgba(197, 230, 255, 1) 0%,
    rgba(216, 249, 255, 1) 50%,
    rgba(255, 239, 204, 1) 100%
  );
  /* home page gradients */
  --gradient-home-button:
    linear-gradient(0deg, #f0f5ff 0%, #f0f5ff 100%), #e6edf9;

  /* green */
  --color-green-50: #f6ffed;
  --color-green-100: #d9f7be;
  --color-green-200: #b7eb8f;
  --color-green-300: #95de64;
  --color-green-400: #73d13d;
  --color-green-500: #52c41a;
  --color-green-600: #389e0d;
  --color-green-700: #237804;
  --color-green-800: #135200;
  --color-green-900: #092b00;

  /* gold */
  --color-gold-50: #fffbe6;
  --color-gold-100: #fff1b8;
  --color-gold-200: #ffe58f;
  --color-gold-300: #ffd666;
  --color-gold-400: #ffc53d;
  --color-gold-500: #faad14;
  --color-gold-600: #d48806;
  --color-gold-700: #ad6800;
  --color-gold-800: #874d00;
  --color-gold-900: #613400;

  /* cyan */
  --color-cyan-50: #e6fffb;
  --color-cyan-100: #b5f5ec;
  --color-cyan-200: #87e8de;
  --color-cyan-300: #5cdbd3;
  --color-cyan-400: #36cfc9;
  --color-cyan-500: #13c2c2;
  --color-cyan-600: #08979c;
  --color-cyan-700: #006d75;
  --color-cyan-800: #00474f;
  --color-cyan-900: #002329;

  /* geekblue */
  --color-geekblue-50: #f0f5ff;
  --color-geekblue-100: #d6e4ff;
  --color-geekblue-200: #adc6ff;
  --color-geekblue-300: #85a5ff;
  --color-geekblue-400: #597ef7;
  --color-geekblue-500: #2f54eb;
  --color-geekblue-600: #1d39c4;
  --color-geekblue-700: #10239e;
  --color-geekblue-800: #061178;
  --color-geekblue-900: #030852;

  /* lime */
  --color-lime-50: #fcffe6;
  --color-lime-100: #f4ffb8;
  --color-lime-200: #eaff8f;
  --color-lime-300: #d3f261;
  --color-lime-400: #bae637;
  --color-lime-500: #a0d911;
  --color-lime-600: #7cb305;
  --color-lime-700: #5b8c00;
  --color-lime-800: #3f6600;
  --color-lime-900: #254000;

  /* magenta */
  --color-magenta-50: #fff0f6;
  --color-magenta-100: #ffd6e7;
  --color-magenta-200: #ffadd2;
  --color-magenta-300: #ff85c0;
  --color-magenta-400: #f759ab;
  --color-magenta-500: #eb2f96;
  --color-magenta-600: #c41d7f;
  --color-magenta-700: #9e1068;
  --color-magenta-800: #780650;
  --color-magenta-900: #520339;

  /* orange */
  --color-orange-50: #fff7e6;
  --color-orange-100: #ffe7ba;
  --color-orange-200: #ffd591;
  --color-orange-300: #ffc069;
  --color-orange-400: #ffa940;
  --color-orange-500: #fa8c16;
  --color-orange-600: #d46b08;
  --color-orange-700: #ad4e00;
  --color-orange-800: #873800;
  --color-orange-900: #612500;

  /* purple */
  --color-purple-50: #f9f0ff;
  --color-purple-100: #efdbff;
  --color-purple-200: #d3adf7;
  --color-purple-300: #b37feb;
  --color-purple-400: #9254de;
  --color-purple-500: #722ed1;
  --color-purple-600: #531dab;
  --color-purple-700: #391085;
  --color-purple-800: #22075e;
  --color-purple-900: #120338;

  /* volcano */
  --color-volcano-50: #fff2e8;
  --color-volcano-100: #ffd8bf;
  --color-volcano-200: #ffbb96;
  --color-volcano-300: #ff9c6e;
  --color-volcano-400: #ff7a45;
  --color-volcano-500: #fa541c;
  --color-volcano-600: #d4380d;
  --color-volcano-700: #ad2102;
  --color-volcano-800: #871400;
  --color-volcano-900: #610b00;

  /* yellow */
  --color-yellow-50: #feffe6;
  --color-yellow-100: #ffffb8;
  --color-yellow-200: #fffb8f;
  --color-yellow-300: #fff566;
  --color-yellow-400: #ffec3d;
  --color-yellow-500: #fadb14;
  --color-yellow-600: #d4b106;
  --color-yellow-700: #ad8b00;
  --color-yellow-800: #876800;
  --color-yellow-900: #614700;

  /* Primary */
  --color-primary: var(--color-blue-500);
  --color-primary-bg: var(--color-blue-50);
  --color-primary-bg-hover: var(--color-blue-100);
  --color-primary-border: var(--color-blue-200);
  --color-primary-border-hover: var(--color-blue-300);
  --color-primary-hover: var(--color-blue-400);
  --color-primary-active: var(--color-blue-600);
  --color-primary-text-hover: var(--color-blue-400);
  --color-primary-text: var(--color-blue-500);
  --color-primary-text-active: var(--color-blue-600);

  /* Success (green) */
  --color-success: var(--color-green-500);
  --color-success-bg: var(--color-green-50);
  --color-success-bg-hover: var(--color-green-100);
  --color-success-border: var(--color-green-200);
  --color-success-border-hover: var(--color-green-300);
  --color-success-hover: var(--color-green-300);
  --color-success-active: var(--color-green-600);
  --color-success-text-hover: var(--color-green-400);
  --color-success-text: var(--color-green-500);
  --color-success-text-active: var(--color-green-600);

  /* Warning (gold) */
  --color-warning: var(--color-gold-500);
  --color-warning-bg: var(--color-gold-50);
  --color-warning-bg-hover: var(--color-gold-100);
  --color-warning-border: var(--color-gold-200);
  --color-warning-border-hover: var(--color-gold-300);
  --color-warning-hover: var(--color-gold-300);
  --color-warning-active: var(--color-gold-600);
  --color-warning-text-hover: var(--color-gold-400);
  --color-warning-text: var(--color-gold-500);
  --color-warning-text-active: var(--color-gold-600);

  /* Info (alias of primary/blue) */
  --color-info: var(--color-blue-500);
  --color-info-bg: var(--color-blue-50);
  --color-info-bg-hover: var(--color-blue-100);
  --color-info-border: var(--color-blue-200);
  --color-info-border-hover: var(--color-blue-300);
  --color-info-hover: var(--color-blue-400);
  --color-info-active: var(--color-blue-600);
  --color-info-text-hover: var(--color-blue-400);
  --color-info-text: var(--color-blue-500);
  --color-info-text-active: var(--color-blue-600);

  /* Error (red) */
  --color-error: var(--color-red-400);
  --color-error-bg-hover: var(--color-red-50);
  --color-error-border: var(--color-red-100);
  --color-error-border-hover: var(--color-red-200);
  --color-error-hover: var(--color-red-300);
  --color-error-text-hover: var(--color-red-300);
  --color-error-text: var(--color-red-400);

  --control-item-bg-active: var(--color-blue-50);
  --control-item-bg-active-hover: var(--color-blue-100);

  /* border & text (direct values) */
  --color-text-default: #000000e0;
  --color-text-primary: rgba(0, 35, 155, 0.88);
  --color-text-secondary: rgba(0, 0, 0, 0.65);
  --color-text-tertiary: #000c3b;
  --color-text-quaternary: rgba(0, 0, 0, 0.88);
  --color-text-description: rgba(0, 0, 0, 0.45);

  --color-border-default: #d9d9d9;
  --color-border-split: rgba(0, 0, 0, 0.06);
  --color-border-secondary: #f0f0f0;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;

  --font-weight-bold: 700;

  /* spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;

  /* border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);

  /* form tokens */
  --form-vertical-label-padding: 0; /* should be number */
  --form-label-font-size: 12; /* should be number */
  --form-item-margin-bottom: 0; /* should be number */

  /* input control heights */
  --control-height-sm: 24; /* should be number */
  --control-height-lg: 40; /* should be number */
  --control-height: 32; /* should be number */

  /* table tokens */
  --table-cell-padding-inline: 16; /* should be number */
  --table-cell-padding-block: 16; /* should be number */
  --table-selection-column-width: 48; /* should be number */

  /* collapse tokens */
  --collapse-content-padding: 10px 16px; /* string */
  --collapse-header-padding: 0px 12px; /* string */

  /* breadcrumb tokens */
  --breadcrumb-separator-margin: 4; /* should be number */

  /* layout tokens */
  --layout-bg: var(--color-neutral-50);

  /* header tokens */
  --header-height: 64; /* should be number */
  --header-bg: var(--color-neutral-50);
  --header-color: var(--color-text-default); /* color of the text in Header */
  --header-padding: 12px 20px; /* string */
  --header-border-bottom: 1px solid var(--color-neutral-400);

  /* container */
  --container-bg: #f0f5ff;
  --container-sm: 24rem;
  --container-md: 600px;
  --container-lg: 800px;
  --container-xl: 1000px;

  /* typography */
  --typography-title-margin-bottom: 0;
  /* timeline */
  --color-timeline-info-card: var(--color-geekblue-50);
  --color-timeline-info-date: var(--color-geekblue-100);
  --color-timeline-info-icon: var(--color-blue-500);
  --color-timeline-warning-card: var(--color-orange-50);
  --color-timeline-warning-date: var(--color-orange-200);
  --color-timeline-warning-icon: var(--color-orange-500);

  /* request card */
  --color-request-card-bg: var(--color-blue-50);
  --color-request-card-name: var(--color-blue-500);
  --color-request-card-text: var(--color-neutral-1100);
  --color-request-card-icon: var(--color-blue-500);
  --color-request-card-button-bg: var(--color-blue-500);
  --color-request-card-button-text: var(--color-neutral-50);
  --color-request-card-warning: var(--color-orange-500);
  --color-request-card-tag-number-bg: var(--color-neutral-200);
  --color-request-card-tag-number-text: var(--color-neutral-700);
  --color-request-card-status-open-bg: var(--color-blue-50);
  --color-request-card-status-open-text: var(--color-blue-500);
  --color-request-card-status-open-border: var(--color-blue-200);
  --color-request-card-status-closed-bg: var(--color-green-50);
  --color-request-card-status-closed-text: var(--color-green-600);
  --color-request-card-status-closed-border: var(--color-green-200);
}

/* adjust form label font weight */
.ant-form-item-label > label {
  font-weight: 700;
}

@theme {
  /* container */
  --color-container-bg: var(--container-bg);
  --font-family: var(--font-family);
  /* primary */
  --color-primary: var(--color-primary);
  --color-primary-bg: var(--color-primary-bg);
  --color-primary-bg-hover: var(--color-primary-bg-hover);
  --color-primary-border: var(--color-primary-border);
  --color-primary-border-hover: var(--color-primary-border-hover);
  --color-primary-hover: var(--color-primary-hover);
  --color-primary-active: var(--color-primary-active);
  --color-primary-text-hover: var(--color-primary-text-hover);
  --color-primary-text: var(--color-primary-text);
  --color-primary-text-active: var(--color-primary-text-active);

  /* success */
  --color-success: var(--color-success);
  --color-success-bg: var(--color-success-bg);
  --color-success-bg-hover: var(--color-success-bg-hover);
  --color-success-border: var(--color-success-border);
  --color-success-border-hover: var(--color-success-border-hover);
  --color-success-hover: var(--color-success-hover);
  --color-success-active: var(--color-success-active);
  --color-success-text-hover: var(--color-success-text-hover);
  --color-success-text: var(--color-success-text);
  --color-success-text-active: var(--color-success-text-active);

  /* warning */
  --color-warning: var(--color-warning);
  --color-warning-bg: var(--color-warning-bg);
  --color-warning-bg-hover: var(--color-warning-bg-hover);
  --color-warning-border: var(--color-warning-border);
  --color-warning-border-hover: var(--color-warning-border-hover);
  --color-warning-hover: var(--color-warning-hover);
  --color-warning-active: var(--color-warning-active);
  --color-warning-text-hover: var(--color-warning-text-hover);
  --color-warning-text: var(--color-warning-text);
  --color-warning-text-active: var(--color-warning-text-active);

  /* info */
  --color-info: var(--color-info);
  --color-info-bg: var(--color-info-bg);
  --color-info-bg-hover: var(--color-info-bg-hover);
  --color-info-border: var(--color-info-border);
  --color-info-border-hover: var(--color-info-border-hover);
  --color-info-hover: var(--color-info-hover);
  --color-info-active: var(--color-info-active);
  --color-info-text-hover: var(--color-info-text-hover);
  --color-info-text: var(--color-info-text);
  --color-info-text-active: var(--color-info-text-active);

  /* error */
  --color-error: var(--color-error);
  --color-error-bg-hover: var(--color-error-bg-hover);
  --color-error-border: var(--color-error-border);
  --color-error-border-hover: var(--color-error-border-hover);
  --color-error-hover: var(--color-error-hover);
  --color-error-text-hover: var(--color-error-text-hover);
  --color-error-text: var(--color-error-text);

  /* control item */
  --color-item-bg-active: var(--control-item-bg-active);
  --color-item-bg-active-hover: var(--control-item-bg-active-hover);

  /* neutral */
  --color-neutral-50: var(--color-neutral-50);
  --color-neutral-100: var(--color-neutral-100);
  --color-neutral-200: var(--color-neutral-200);
  --color-neutral-300: var(--color-neutral-300);
  --color-neutral-400: var(--color-neutral-400);
  --color-neutral-500: var(--color-neutral-500);
  --color-neutral-600: var(--color-neutral-600);
  --color-neutral-700: var(--color-neutral-700);
  --color-neutral-800: var(--color-neutral-800);
  --color-neutral-900: var(--color-neutral-900);
  --color-neutral-950: var(--color-neutral-950);
  --color-neutral-1000: var(--color-neutral-1000);
  --color-neutral-1100: var(--color-neutral-1100);

  /* blue */
  --color-blue-50: var(--color-blue-50);
  --color-blue-100: var(--color-blue-100);
  --color-blue-200: var(--color-blue-200);
  --color-blue-300: var(--color-blue-300);
  --color-blue-400: var(--color-blue-400);
  --color-blue-500: var(--color-blue-500);
  --color-blue-600: var(--color-blue-600);
  --color-blue-700: var(--color-blue-700);
  --color-blue-800: var(--color-blue-800);
  --color-blue-900: var(--color-blue-900);

  /* red */
  --color-red-50: var(--color-red-50);
  --color-red-100: var(--color-red-100);
  --color-red-200: var(--color-red-200);
  --color-red-300: var(--color-red-300);
  --color-red-400: var(--color-red-400);
  --color-red-500: var(--color-red-500);
  --color-red-600: var(--color-red-600);
  --color-red-700: var(--color-red-700);
  --color-red-800: var(--color-red-800);
  --color-red-900: var(--color-red-900);

  /* green */
  --color-green-50: var(--color-green-50);
  --color-green-100: var(--color-green-100);
  --color-green-200: var(--color-green-200);
  --color-green-300: var(--color-green-300);
  --color-green-400: var(--color-green-400);
  --color-green-500: var(--color-green-500);
  --color-green-600: var(--color-green-600);
  --color-green-700: var(--color-green-700);
  --color-green-800: var(--color-green-800);
  --color-green-900: var(--color-green-900);

  /* gold */
  --color-gold-50: var(--color-gold-50);
  --color-gold-100: var(--color-gold-100);
  --color-gold-200: var(--color-gold-200);
  --color-gold-300: var(--color-gold-300);
  --color-gold-400: var(--color-gold-400);
  --color-gold-500: var(--color-gold-500);
  --color-gold-600: var(--color-gold-600);
  --color-gold-700: var(--color-gold-700);
  --color-gold-800: var(--color-gold-800);
  --color-gold-900: var(--color-gold-900);

  /* cyan */
  --color-cyan-50: var(--color-cyan-50);
  --color-cyan-100: var(--color-cyan-100);
  --color-cyan-200: var(--color-cyan-200);
  --color-cyan-300: var(--color-cyan-300);
  --color-cyan-400: var(--color-cyan-400);
  --color-cyan-500: var(--color-cyan-500);
  --color-cyan-600: var(--color-cyan-600);
  --color-cyan-700: var(--color-cyan-700);
  --color-cyan-800: var(--color-cyan-800);
  --color-cyan-900: var(--color-cyan-900);

  /* geekblue */
  --color-geekblue-50: var(--color-geekblue-50);
  --color-geekblue-100: var(--color-geekblue-100);
  --color-geekblue-200: var(--color-geekblue-200);
  --color-geekblue-300: var(--color-geekblue-300);
  --color-geekblue-400: var(--color-geekblue-400);
  --color-geekblue-500: var(--color-geekblue-500);
  --color-geekblue-600: var(--color-geekblue-600);
  --color-geekblue-700: var(--color-geekblue-700);
  --color-geekblue-800: var(--color-geekblue-800);
  --color-geekblue-900: var(--color-geekblue-900);

  /* lime */
  --color-lime-50: var(--color-lime-50);
  --color-lime-100: var(--color-lime-100);
  --color-lime-200: var(--color-lime-200);
  --color-lime-300: var(--color-lime-300);
  --color-lime-400: var(--color-lime-400);
  --color-lime-500: var(--color-lime-500);
  --color-lime-600: var(--color-lime-600);
  --color-lime-700: var(--color-lime-700);
  --color-lime-800: var(--color-lime-800);
  --color-lime-900: var(--color-lime-900);

  /* magenta */
  --color-magenta-50: var(--color-magenta-50);
  --color-magenta-100: var(--color-magenta-100);
  --color-magenta-200: var(--color-magenta-200);
  --color-magenta-300: var(--color-magenta-300);
  --color-magenta-400: var(--color-magenta-400);
  --color-magenta-500: var(--color-magenta-500);
  --color-magenta-600: var(--color-magenta-600);
  --color-magenta-700: var(--color-magenta-700);
  --color-magenta-800: var(--color-magenta-800);
  --color-magenta-900: var(--color-magenta-900);

  /* orange */
  --color-orange-50: var(--color-orange-50);
  --color-orange-100: var(--color-orange-100);
  --color-orange-200: var(--color-orange-200);
  --color-orange-300: var(--color-orange-300);
  --color-orange-400: var(--color-orange-400);
  --color-orange-500: var(--color-orange-500);
  --color-orange-600: var(--color-orange-600);
  --color-orange-700: var(--color-orange-700);
  --color-orange-800: var(--color-orange-800);
  --color-orange-900: var(--color-orange-900);

  /* purple */
  --color-purple-50: var(--color-purple-50);
  --color-purple-100: var(--color-purple-100);
  --color-purple-200: var(--color-purple-200);
  --color-purple-300: var(--color-purple-300);
  --color-purple-400: var(--color-purple-400);
  --color-purple-500: var(--color-purple-500);
  --color-purple-600: var(--color-purple-600);
  --color-purple-700: var(--color-purple-700);
  --color-purple-800: var(--color-purple-800);
  --color-purple-900: var(--color-purple-900);

  /* volcano */
  --color-volcano-50: var(--color-volcano-50);
  --color-volcano-100: var(--color-volcano-100);
  --color-volcano-200: var(--color-volcano-200);
  --color-volcano-300: var(--color-volcano-300);
  --color-volcano-400: var(--color-volcano-400);
  --color-volcano-500: var(--color-volcano-500);
  --color-volcano-600: var(--color-volcano-600);
  --color-volcano-700: var(--color-volcano-700);
  --color-volcano-800: var(--color-volcano-800);
  --color-volcano-900: var(--color-volcano-900);

  /* yellow */
  --color-yellow-50: var(--color-yellow-50);
  --color-yellow-100: var(--color-yellow-100);
  --color-yellow-200: var(--color-yellow-200);
  --color-yellow-300: var(--color-yellow-300);
  --color-yellow-400: var(--color-yellow-400);
  --color-yellow-500: var(--color-yellow-500);
  --color-yellow-600: var(--color-yellow-600);
  --color-yellow-700: var(--color-yellow-700);
  --color-yellow-800: var(--color-yellow-800);
  --color-yellow-900: var(--color-yellow-900);

  /* border & text (direct values) */
  --color-text-default: var(--color-text-default);
  --color-text-primary: var(--color-text-primary);
  --color-text-secondary: var(--color-text-secondary);
  --color-text-tertiary: var(--color-text-tertiary);
  --color-text-quaternary: var(--color-text-quaternary);
  --color-text-description: var(--color-text-description);

  --color-border-default: var(--color-border-default);
  --color-border-split: var(--color-border-split);
  --color-border-secondary: var(--color-border-secondary);

  /* font sizes */
  --font-size-xs: var(--font-size-xs);
  --font-size-sm: var(--font-size-sm);
  --font-size-base: var(--font-size-base);
  --font-size-lg: var(--font-size-lg);
  --font-size-xl: var(--font-size-xl);
  --font-size-2xl: var(--font-size-2xl);
  --font-size-3xl: var(--font-size-3xl);
  --font-size-4xl: var(--font-size-4xl);
  --font-size-5xl: var(--font-size-5xl);

  /* spacing */
  --spacing-1: var(--spacing-1);
  --spacing-2: var(--spacing-2);
  --spacing-3: var(--spacing-3);
  --spacing-4: var(--spacing-4);
  --spacing-5: var(--spacing-5);
  --spacing-6: var(--spacing-6);

  /* border radius */
  --radius-sm: var(--radius-sm);
  --radius-md: var(--radius-md);
  --radius-lg: var(--radius-lg);
  --radius-xl: var(--radius-xl);
  --radius-full: var(--radius-full);

  /* shadows */
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);

  /* width tokens */
  --width-container-sm: var(--container-sm);
  --width-container-md: var(--container-md);
  --width-container-lg: var(--container-lg);
  --width-container-xl: var(--container-xl);

  --color-timeline-info-card: var(--color-timeline-info-card);
  --color-timeline-info-date: var(--color-timeline-info-date);
  --color-timeline-info-icon: var(--color-timeline-info-icon);
  --color-timeline-warning-card: var(--color-timeline-warning-card);
  --color-timeline-warning-date: var(--color-timeline-warning-date);
  --color-timeline-warning-icon: var(--color-timeline-warning-icon);

  /* request card */
  --color-request-card-bg: var(--color-request-card-bg);
  --color-request-card-name: var(--color-request-card-name);
  --color-request-card-text: var(--color-request-card-text);
  --color-request-card-icon: var(--color-request-card-icon);
  --color-request-card-button-bg: var(--color-request-card-button-bg);
  --color-request-card-button-text: var(--color-request-card-button-text);
  --color-request-card-warning: var(--color-request-card-warning);
  --color-request-card-tag-number-bg: var(--color-request-card-tag-number-bg);
  --color-request-card-tag-number-text: var(
    --color-request-card-tag-number-text
  );
  --color-request-card-status-open-bg: var(--color-request-card-status-open-bg);
  --color-request-card-status-open-text: var(
    --color-request-card-status-open-text
  );
  --color-request-card-status-open-border: var(
    --color-request-card-status-open-border
  );
  --color-request-card-status-closed-bg: var(
    --color-request-card-status-closed-bg
  );
  --color-request-card-status-closed-text: var(
    --color-request-card-status-closed-text
  );
  --color-request-card-status-closed-border: var(
    --color-request-card-status-closed-border
  );
}

@layer utilities {
  /* Responsive adjustments for antd date range picker on mobile devices */
  @media (max-width: 768px) {
    .ant-picker-panels {
      display: flex;
      flex-wrap: wrap !important;
      width: 300px !important;
    }

    .ant-picker-panel:first-child
      .ant-picker-date-panel
      .ant-picker-header-super-next-btn,
    .ant-picker-panel:first-child
      .ant-picker-date-panel
      .ant-picker-header-next-btn {
      visibility: visible !important;
    }

    .ant-picker-panel:nth-child(2)
      .ant-picker-date-panel
      .ant-picker-header-super-next-btn,
    .ant-picker-panel:nth-child(2)
      .ant-picker-date-panel
      .ant-picker-header-next-btn {
      visibility: hidden !important;
    }
  }
  /* gradients */
  .bg-request-header-gradient {
    background: var(--request-header-gradient);
  }

  .bg-gradient-home-button {
    background: var(--gradient-home-button);
  }
  .bg-gradient-winter {
    background: var(--gradient-winter);
  }
  .bg-gradient-summer {
    background: var(--gradient-summer);
  }
  .bg-gradient-spring {
    background: var(--gradient-spring);
  }
  .bg-gradient-autumn {
    background: var(--gradient-autumn);
  }
}

.ant-layout-header {
  border-bottom: var(--header-border-bottom);
}