:root {

/* =====================================================
FIGMA RAW TOKENS - LIGHT
===================================================== */

--token-light-neutral-dark-foreground: #12181F;
--token-light-neutral-dark-muted-foreground: #41464C;
--token-light-neutral-dark-subtle-foreground: #717479;
--token-light-neutral-dark-border: #D0D1D2;
--token-light-neutral-dark-muted: #F3F3F4;
--token-light-neutral-dark-background: #FFFFFF;

--token-light-neutral-white-foreground-inverse: #FFFFFF;
--token-light-neutral-white-foreground-inverse-muted: #FFFFFFCC;
--token-light-neutral-white-border-inverse: #FFFFFF80;
--token-light-neutral-white-background-inverse: #FFFFFF33;
--token-light-neutral-white-backgound-secondary: #FFFFFF0D;

--token-light-primary-brand-primary-foreground: #001029;
--token-light-primary-brand-primary: #0052CC;
--token-light-primary-brand-primary-80: #3375D6;
--token-light-primary-brand-primary-50: #80A9E6;
--token-light-primary-brand-primary-20: #CCDCF5;
--token-light-primary-brand-primary-5: #F2F6FC;

--token-light-success-green-success-foreground: #024B34;
--token-light-success-green-success: #059669;
--token-light-success-green-success-80: #37AB87;
--token-light-success-green-success-50: #82CBB4;
--token-light-success-green-success-20: #CDEAE1;
--token-light-success-green-success-5: #F2FAF7;

--token-light-error-red-error-foreground: #6E1313;
--token-light-error-red-error: #DC2626;
--token-light-error-red-error-80: #E35151;
--token-light-error-red-error-50: #EE9393;
--token-light-error-red-error-20: #F8D4D4;
--token-light-error-red-error-5: #FDF4F4;

--token-light-warning-yellow-warning-foreground: #654502;
--token-light-warning-yellow-warning: #CA8A04;
--token-light-warning-yellow-warning-80: #D5A136;
--token-light-warning-yellow-warning-50: #E5C582;
--token-light-warning-yellow-warning-20: #F4E8CD;
--token-light-warning-yellow-warning-5: #FCF9F2;

--token-light-information-blue-information-foreground: #014263;
--token-light-information-blue-information: #0284C7;
--token-light-information-blue-information-80: #359DD2;
--token-light-information-blue-information-50: #81C2E3;
--token-light-information-blue-information-20: #CCE6F4;
--token-light-information-blue-information-5: #F2F9FC;

--token-light-backgrounds-background-wp-page: #FBF5ED;
--token-light-backgrounds-background-common-page: #FAFAFA;

--token-light-component-colors-button-color: #FFFFFF;
--token-light-component-colors-button-icon: #FFFFFF;

/* =====================================================
FIGMA RAW TOKENS - DARK
===================================================== */
--token-dark-neutral-dark-foreground: #FFFFFF;
--token-dark-neutral-dark-muted-foreground: #D0D1D2;
--token-dark-neutral-dark-subtle-foreground: #888B8E;
--token-dark-neutral-dark-border: #41464C;
--token-dark-neutral-dark-muted: #1E242A;
--token-dark-neutral-dark-background: #12181F;

--token-dark-neutral-white-foreground-inverse: #FFFFFF;
--token-dark-neutral-white-foreground-inverse-muted: #FFFFFFCC;
--token-dark-neutral-white-border-inverse: #FFFFFF80;
--token-dark-neutral-white-background-inverse: #FFFFFF33;
--token-dark-neutral-white-backgound-secondary: #FFFFFF0D;

--token-dark-primary-brand-primary-foreground: #001029;
--token-dark-primary-brand-primary: #0052CC;
--token-dark-primary-brand-primary-80: #0447A9;
--token-dark-primary-brand-primary-50: #093575;
--token-dark-primary-brand-primary-20: #0E2342;
--token-dark-primary-brand-primary-5: #111B27;

--token-dark-success-green-success-foreground: #50B596;
--token-dark-success-green-success: #059669;
--token-dark-success-green-success-80: #087D5A;
--token-dark-success-green-success-50: #0B5743;
--token-dark-success-green-success-20: #0F312E;
--token-dark-success-green-success-5: #111F22;

--token-dark-error-red-error-foreground: #E66767;
--token-dark-error-red-error: #DC2626;
--token-dark-error-red-error-80: #B42324;
--token-dark-error-red-error-50: #771F22;
--token-dark-error-red-error-20: #3A1B21;
--token-dark-error-red-error-5: #1C191F;

--token-dark-warning-yellow-warning-foreground: #DAAD4F;
--token-dark-warning-yellow-warning: #CA8A04;
--token-dark-warning-yellow-warning-80: #A67309;
--token-dark-warning-yellow-warning-50: #6E5111;
--token-dark-warning-yellow-warning-20: #362F1A;
--token-dark-warning-yellow-warning-5: #1B1E1D;

--token-dark-information-blue-information-foreground: #4DA9D8;
--token-dark-information-blue-information: #0284C7;
--token-dark-information-blue-information-80: #026DA7;
--token-dark-information-blue-information-50: #0A4E72;
--token-dark-information-blue-information-20: #0E2D41;
--token-dark-information-blue-information-5: #111E27;

--token-dark-backgrounds-background-wp-page: #12181F;
--token-dark-backgrounds-background-common-page: #151B22;

--token-dark-component-colors-button-color: #FFFFFF;
--token-dark-component-colors-button-icon: #FFFFFF;
/* =====================================================
SEMANTIC PALETTE - LIGHT
===================================================== */

--color-light-foreground-primary: var(--token-light-neutral-dark-foreground);
--color-light-foreground-secondary: var(--token-light-neutral-dark-muted-foreground);
--color-light-foreground-tertiary: var(--token-light-neutral-dark-subtle-foreground);
--color-light-border-default: var(--token-light-neutral-dark-border);
--color-light-surface-muted: var(--token-light-neutral-dark-muted);
--color-light-surface-default: var(--token-light-neutral-dark-background);
--color-light-foreground-inverse: var(--token-light-neutral-white-foreground-inverse);
--color-light-foreground-inverse-muted: var(--token-light-neutral-white-foreground-inverse-muted);
--color-light-border-inverse: var(--token-light-neutral-white-border-inverse);
--color-light-surface-inverse: var(--token-light-neutral-white-background-inverse);
--color-light-surface-inverse-secondary: var(--token-light-neutral-white-backgound-secondary);
--color-light-brand-foreground: var(--token-light-primary-brand-primary-foreground);
--color-light-brand-primary: var(--token-light-primary-brand-primary);
--color-light-brand-primary-80: var(--token-light-primary-brand-primary-80);
--color-light-brand-primary-50: var(--token-light-primary-brand-primary-50);
--color-light-brand-primary-20: var(--token-light-primary-brand-primary-20);
--color-light-brand-primary-5: var(--token-light-primary-brand-primary-5);
--color-light-success-foreground: var(--token-light-success-green-success-foreground);
--color-light-success-primary: var(--token-light-success-green-success);
--color-light-success-primary-80: var(--token-light-success-green-success-80);
--color-light-success-primary-50: var(--token-light-success-green-success-50);
--color-light-success-primary-20: var(--token-light-success-green-success-20);
--color-light-success-primary-5: var(--token-light-success-green-success-5);
--color-light-error-foreground: var(--token-light-error-red-error-foreground);
--color-light-error-primary: var(--token-light-error-red-error);
--color-light-error-primary-80: var(--token-light-error-red-error-80);
--color-light-error-primary-50: var(--token-light-error-red-error-50);
--color-light-error-primary-20: var(--token-light-error-red-error-20);
--color-light-error-primary-5: var(--token-light-error-red-error-5);
--color-light-warning-foreground: var(--token-light-warning-yellow-warning-foreground);
--color-light-warning-primary: var(--token-light-warning-yellow-warning);
--color-light-warning-primary-80: var(--token-light-warning-yellow-warning-80);
--color-light-warning-primary-50: var(--token-light-warning-yellow-warning-50);
--color-light-warning-primary-20: var(--token-light-warning-yellow-warning-20);
--color-light-warning-primary-5: var(--token-light-warning-yellow-warning-5);
--color-light-info-foreground: var(--token-light-information-blue-information-foreground);
--color-light-info-primary: var(--token-light-information-blue-information);
--color-light-info-primary-80: var(--token-light-information-blue-information-80);
--color-light-info-primary-50: var(--token-light-information-blue-information-50);
--color-light-info-primary-20: var(--token-light-information-blue-information-20);
--color-light-info-primary-5: var(--token-light-information-blue-information-5);
--color-light-background-home: var(--token-light-backgrounds-background-wp-page);
--color-light-background-page: var(--token-light-backgrounds-background-common-page);
--color-light-button-text: var(--token-light-component-colors-button-color);
--color-light-button-icon: var(--token-light-component-colors-button-icon);


/* =====================================================
SEMANTIC PALETTE - DARK
===================================================== */

--color-dark-foreground-primary: var(--token-dark-neutral-dark-foreground);
--color-dark-foreground-secondary: var(--token-dark-neutral-dark-muted-foreground);
--color-dark-foreground-tertiary: var(--token-dark-neutral-dark-subtle-foreground);
--color-dark-border-default: var(--token-dark-neutral-dark-border);
--color-dark-surface-muted: var(--token-dark-neutral-dark-muted);
--color-dark-surface-default: var(--token-dark-neutral-dark-background);
--color-dark-foreground-inverse: var(--token-dark-neutral-white-foreground-inverse);
--color-dark-foreground-inverse-muted: var(--token-dark-neutral-white-foreground-inverse-muted);
--color-dark-border-inverse: var(--token-dark-neutral-white-border-inverse);
--color-dark-surface-inverse: var(--token-dark-neutral-white-background-inverse);
--color-dark-surface-inverse-secondary: var(--token-dark-neutral-white-backgound-secondary);
--color-dark-brand-foreground: var(--token-dark-primary-brand-primary-foreground);
--color-dark-brand-primary: var(--token-dark-primary-brand-primary);
--color-dark-brand-primary-80: var(--token-dark-primary-brand-primary-80);
--color-dark-brand-primary-50: var(--token-dark-primary-brand-primary-50);
--color-dark-brand-primary-20: var(--token-dark-primary-brand-primary-20);
--color-dark-brand-primary-5: var(--token-dark-primary-brand-primary-5);
--color-dark-success-foreground: var(--token-dark-success-green-success-foreground);
--color-dark-success-primary: var(--token-dark-success-green-success);
--color-dark-success-primary-80: var(--token-dark-success-green-success-80);
--color-dark-success-primary-50: var(--token-dark-success-green-success-50);
--color-dark-success-primary-20: var(--token-dark-success-green-success-20);
--color-dark-success-primary-5: var(--token-dark-success-green-success-5);
--color-dark-error-foreground: var(--token-dark-error-red-error-foreground);
--color-dark-error-primary: var(--token-dark-error-red-error);
--color-dark-error-primary-80: var(--token-dark-error-red-error-80);
--color-dark-error-primary-50: var(--token-dark-error-red-error-50);
--color-dark-error-primary-20: var(--token-dark-error-red-error-20);
--color-dark-error-primary-5: var(--token-dark-error-red-error-5);
--color-dark-warning-foreground: var(--token-dark-warning-yellow-warning-foreground);
--color-dark-warning-primary: var(--token-dark-warning-yellow-warning);
--color-dark-warning-primary-80: var(--token-dark-warning-yellow-warning-80);
--color-dark-warning-primary-50: var(--token-dark-warning-yellow-warning-50);
--color-dark-warning-primary-20: var(--token-dark-warning-yellow-warning-20);
--color-dark-warning-primary-5: var(--token-dark-warning-yellow-warning-5);
--color-dark-info-foreground: var(--token-dark-information-blue-information-foreground);
--color-dark-info-primary: var(--token-dark-information-blue-information);
--color-dark-info-primary-80: var(--token-dark-information-blue-information-80);
--color-dark-info-primary-50: var(--token-dark-information-blue-information-50);
--color-dark-info-primary-20: var(--token-dark-information-blue-information-20);
--color-dark-info-primary-5: var(--token-dark-information-blue-information-5);
--color-dark-background-home: var(--token-dark-backgrounds-background-wp-page);
--color-dark-background-page: var(--token-dark-backgrounds-background-common-page);
--color-dark-button-text: var(--token-dark-component-colors-button-color);
--color-dark-button-icon: var(--token-dark-component-colors-button-icon);


/* =====================================================
DERIVED HELPERS
===================================================== */

--color-brand-primary-alpha-10: #0052CC1A;
--color-brand-primary-alpha-12: #0052CC1F;
--color-brand-primary-alpha-30: #0052CC4D;
--color-brand-primary-alpha-80: #0052CCCC;

--color-light-warning-alpha-5: #CA8A040D;
--color-light-divider: #12181F14;
--color-dark-divider: #FFFFFF14;

--color-light-shadow-neutral: #12181F1F;
--color-dark-shadow-neutral: #00000099;

--color-shadow-brand: #0052CC1F;
--color-shadow-success: #0596691F;
--color-shadow-error: #DC26261F;
--color-shadow-warning: #CA8A041F;
--color-shadow-info: #0284C71F;

--color-shadow-brand-border: #0052CC33;
--color-shadow-success-border: #05966933;
--color-shadow-error-border: #DC262633;
--color-shadow-warning-border: #CA8A0433;
--color-shadow-info-border: #0284C733;

/* =====================================================
LEGACY COMPATIBILITY ALIASES
===================================================== */

--grey-100: var(--color-light-foreground-primary);
--grey-80: var(--color-light-foreground-secondary);
--grey-50: var(--color-light-foreground-tertiary);
--grey-20: var(--color-light-border-default);
--grey-5: var(--color-light-surface-muted);
--grey-0: var(--color-light-surface-default);

--grey-dark-100: var(--color-dark-foreground-primary);
--grey-dark-80: var(--color-dark-foreground-secondary);
--grey-dark-50: var(--color-dark-foreground-tertiary);
--grey-dark-20: var(--color-dark-border-default);
--grey-dark-10: var(--color-dark-surface-muted);
--grey-dark-5: var(--color-dark-surface-muted);
--grey-dark-0: var(--color-dark-surface-default);

--light-100: var(--color-light-foreground-inverse);
--light-80: var(--color-light-foreground-inverse-muted);
--light-50: var(--color-light-border-inverse);
--light-20: var(--color-light-surface-inverse);
--light-5: var(--color-light-surface-inverse-secondary);

--primary-900: var(--color-light-brand-foreground);
--primary-100: var(--color-light-brand-primary);
--primary-80: var(--color-light-brand-primary-80);
--primary-50: var(--color-light-brand-primary-50);
--primary-20: var(--color-light-brand-primary-20);
--primary-5: var(--color-light-brand-primary-5);
--primary-dark-900: var(--color-dark-brand-foreground);
--primary-dark-100: var(--color-dark-brand-primary);
--primary-dark-80: var(--color-dark-brand-primary-80);
--primary-dark-50: var(--color-dark-brand-primary-50);
--primary-dark-20: var(--color-dark-brand-primary-20);
--primary-dark-5: var(--color-dark-brand-primary-5);

--success-900: var(--color-light-success-foreground);
--success-100: var(--color-light-success-primary);
--success-80: var(--color-light-success-primary-80);
--success-50: var(--color-light-success-primary-50);
--success-20: var(--color-light-success-primary-20);
--success-5: var(--color-light-success-primary-5);
--success-dark-900: var(--color-dark-success-foreground);
--success-dark-100: var(--color-dark-success-primary);
--success-dark-80: var(--color-dark-success-primary-80);
--success-dark-50: var(--color-dark-success-primary-50);
--success-dark-20: var(--color-dark-success-primary-20);
--success-dark-5: var(--color-dark-success-primary-5);

--error-900: var(--color-light-error-foreground);
--error-100: var(--color-light-error-primary);
--error-80: var(--color-light-error-primary-80);
--error-50: var(--color-light-error-primary-50);
--error-20: var(--color-light-error-primary-20);
--error-5: var(--color-light-error-primary-5);
--error-dark-900: var(--color-dark-error-foreground);
--error-dark-100: var(--color-dark-error-primary);
--error-dark-80: var(--color-dark-error-primary-80);
--error-dark-50: var(--color-dark-error-primary-50);
--error-dark-20: var(--color-dark-error-primary-20);
--error-dark-5: var(--color-dark-error-primary-5);

--warning-900: var(--color-light-warning-foreground);
--warning-100: var(--color-light-warning-primary);
--warning-80: var(--color-light-warning-primary-80);
--warning-50: var(--color-light-warning-primary-50);
--warning-20: var(--color-light-warning-primary-20);
--warning-5: var(--color-light-warning-primary-5);
--warning-dark-900: var(--color-dark-warning-foreground);
--warning-dark-100: var(--color-dark-warning-primary);
--warning-dark-80: var(--color-dark-warning-primary-80);
--warning-dark-50: var(--color-dark-warning-primary-50);
--warning-dark-20: var(--color-dark-warning-primary-20);
--warning-dark-5: var(--color-dark-warning-primary-5);

--info-900: var(--color-light-info-foreground);
--info-100: var(--color-light-info-primary);
--info-80: var(--color-light-info-primary-80);
--info-50: var(--color-light-info-primary-50);
--info-20: var(--color-light-info-primary-20);
--info-5: var(--color-light-info-primary-5);
--info-dark-900: var(--color-dark-info-foreground);
--info-dark-100: var(--color-dark-info-primary);
--info-dark-80: var(--color-dark-info-primary-80);
--info-dark-50: var(--color-dark-info-primary-50);
--info-dark-20: var(--color-dark-info-primary-20);
--info-dark-5: var(--color-dark-info-primary-5);

--bg-home-light: var(--color-light-background-home);
--bg-page-light: var(--color-light-background-page);
--bg-home-dark: var(--color-dark-background-home);
--bg-page-dark: var(--color-dark-background-page);

--divider-light: var(--color-light-divider);
--divider-dark: var(--color-dark-divider);

--shadow-neutral-color: var(--color-light-shadow-neutral);
--shadow-primary-color: var(--color-shadow-brand);
--shadow-success-color: var(--color-shadow-success);
--shadow-error-color: var(--color-shadow-error);
--shadow-warning-color: var(--color-shadow-warning);
--shadow-info-color: var(--color-shadow-info);

--base-color: var(--color-light-brand-primary);
--brand-color: var(--color-light-brand-primary);
--bright-color: var(--light-100);
--grey-primary: var(--grey-100);
--grey-text: var(--grey-50);


/* =====================================================
RADIUS TOKENS
===================================================== */

--radius-4: 4px;
--radius-6: 6px;
--radius-8: 8px;
--radius-12: 12px;
--radius-16: 16px;


/* =========================
FONT FAMILY
========================= */

--Font-Family-type-family-primary: "Figtree", sans-serif;


/* =========================
FONT WEIGHTS
========================= */

--Font-Weight-type-weight-extra-bold-800: 800;
--Font-Weight-type-weight-bold-700: 700;
--Font-Weight-type-weight-semi-bold-600: 600;
--Font-Weight-type-weight-medium-500: 500;


/* =========================
FONT SIZES
========================= */

--Font-Size-type-size-display: 40px;
--Font-Size-type-size-heading-h1: 32px;
--Font-Size-type-size-sub-heading-h2: 28px;
--Font-Size-type-size-title-h3: 20px;
--Font-Size-type-size-title-alt-h3: 18px;
--Font-Size-type-size-sub-title-h4: 16px;
--Font-Size-type-size-body-p1: 18px;
--Font-Size-type-size-label: 14px;
--Font-Size-type-size-caption: 12px;


/* =========================
LINE HEIGHT
========================= */

--Line-Height-type-lh-display: 52px;
--Line-Height-type-lh-heading-h1: 42px;
--Line-Height-type-lh-sub-heading-h2: 36px;
--Line-Height-type-lh-title-h3: 26px;
--Line-Height-type-lh-title-alt-h3: 24px;
--Line-Height-type-lh-sub-title-h4: 20px;
--Line-Height-type-lh-body-p1: 28px;
--Line-Height-type-lh-label: 18px;
--Line-Height-type-lh-caption: 16px;


/* =========================
LETTER SPACING
========================= */

--Letter-Spacing-type-spacing-label: 2px;
}

.mac-device {
  --Font-Weight-type-weight-extra-bold-800: 700;
  --Font-Weight-type-weight-bold-700: 600;
  --Font-Weight-type-weight-semi-bold-600: 600;
  --Font-Weight-type-weight-medium-500: 400;
}