:root {
  /* Size */
  --size-0: 0px;
  --size-px: 1px;
  --size-0-5: 4px;
  --size-1: 8px;
  --size-1-5: 12px;
  --size-2: 16px;
  --size-2-5: 20px;
  --size-3: 24px;
  --size-4: 32px;
  --size-5: 40px;
  --size-6: 48px;
  --size-7: 56px;
  --size-8: 64px;
  --size-9: 72px;
  --size-10: 80px;
  --size-11: 88px;
  --size-12: 96px;
  --size-13: 104px;
  --size-14: 112px;
  --size-15: 120px;
  --size-20: 160px;
  --size-25: 200px;
  --size-30: 240px;
  --size-35: 280px;
  --size-40: 320px;
  --size-45: 360px;
  --size-50: 400px;
  --size-55: 440px;
  --size-60: 480px;
  --size-70: 560px;
  --size-80: 640px;
  --size-90: 720px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Font */
  --font-sans: "Graphik Web", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-greek: "SBL Greek";
  --font-hebrew: "SBL Hebrew";

  /* Font Size */
  --font-size-2xs: 12px;
  --font-size-xs: 13px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 22px;
  --font-size-3xl: 24px;
  --font-size-4xl: 28px;
  --font-size-5xl: 32px;
  --font-size-6xl: 36px;
  --font-size-7xl: 40px;
  --font-size-8xl: 44px;
  --font-size-9xl: 48px;
  --font-size-10xl: 52px;

  /* Font Weight */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  /* Line Height */
  --line-height-none: 1;
  --line-height-tight: 1.125;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.075em;
  --letter-spacing-widest: 0.15em;

  /* Shadow */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgba(24, 29, 54, 0.05);
  --shadow-md: 0 1px 4px 0 rgba(24, 29, 54, 0.11),
    0 1px 2px -1px rgba(24, 29, 54, 0.11);
  --shadow-lg: 0 10px 15px -3px rgba(24, 29, 54, 0.11),
    0 4px 6px -4px rgba(24, 29, 54, 0.11);
  --shadow-xl: 0 20px 13px rgba(24, 29, 54, 0.03),
    0 8px 5px rgba(24, 29, 54, 0.08);
  --shadow-inner-top: inset 0 8px 5px -5px rgba(24, 29, 54, 0.11);
  --shadow-inner-bottom: inset 0 -8px 5px -5px rgba(24, 29, 54, 0.11);

  /* Opacity */
  --opacity-0: 0;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-100: 1;

  /* Transitions */
  --duration-x-short: 50ms;
  --duration-short: 150ms;
  --duration-normal: 300ms;
  --duration-long: 400ms;
  --duration-x-long: 800ms;
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Border */
  --border: 1px solid var(--color-neutral-10);

  /* Z-Index */
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-60: 60;
  --z-70: 70;
  --z-80: 80;
  --z-90: 90;

  /* Utility Colors */
  --color-white: #ffffff;
  --color-black: #1b1b1b;
  --color-gray: var(--color-neutral-60);
  --color-brand: #00b3e5;
  --color-brand-accessible: #157fd7;
  --color-success: var(--color-green-50);
  --color-info: var(--color-cyan-50);
  --color-warning: var(--color-yellow-50);
  --color-danger: var(--color-red-70);
  --color-error: var(--color-red-50);

  /* Color Rainbow */
  --color-neutral-05: #f9fafc;
  --color-neutral-10: #e4e8ed;
  --color-neutral-20: #c1c9d0;
  --color-neutral-30: #a4abb7;
  --color-neutral-40: #89929e;
  --color-neutral-50: #6b7384;
  --color-neutral-60: #4f5669;
  --color-neutral-70: #3e4054;
  --color-neutral-80: #2a2f44;
  --color-neutral-90: #181d36;
  --color-red-05: #fef8f4;
  --color-red-10: #f9e3de;
  --color-red-20: #f1b8b5;
  --color-red-30: #ea898c;
  --color-red-40: #dc6878;
  --color-red-50: #be4967;
  --color-red-60: #972a4e;
  --color-red-70: #751f40;
  --color-red-80: #561739;
  --color-red-90: #3c0a27;
  --color-orange-05: #fefaee;
  --color-orange-10: #fae4c4;
  --color-orange-20: #efba8d;
  --color-orange-30: #e69565;
  --color-orange-40: #d67552;
  --color-orange-50: #b5543a;
  --color-orange-60: #91362e;
  --color-orange-70: #742626;
  --color-orange-80: #57191f;
  --color-orange-90: #3b1113;
  --color-yellow-05: #fbf9eb;
  --color-yellow-10: #f5e5bd;
  --color-yellow-20: #e8c281;
  --color-yellow-30: #d99d52;
  --color-yellow-40: #cb7d33;
  --color-yellow-50: #af5922;
  --color-yellow-60: #8d3d17;
  --color-yellow-70: #6c2f14;
  --color-yellow-80: #502211;
  --color-yellow-90: #351609;
  --color-green-05: #f2fef0;
  --color-green-10: #d3f2cd;
  --color-green-20: #97d69c;
  --color-green-30: #60bf87;
  --color-green-40: #4fa478;
  --color-green-50: #3a8060;
  --color-green-60: #2b6146;
  --color-green-70: #204b3c;
  --color-green-80: #173634;
  --color-green-90: #0e2227;
  --color-turquoise-05: #ecfbfe;
  --color-turquoise-10: #b9eff7;
  --color-turquoise-20: #87deea;
  --color-turquoise-30: #4cc1d1;
  --color-turquoise-40: #1f9cad;
  --color-turquoise-50: #097d8d;
  --color-turquoise-60: #00626f;
  --color-turquoise-70: #004d58;
  --color-turquoise-80: #00363e;
  --color-turquoise-90: #002930;
  --color-cyan-05: #effcfc;
  --color-cyan-10: #ccf1fa;
  --color-cyan-20: #91d1ea;
  --color-cyan-30: #69b4e2;
  --color-cyan-40: #5496cf;
  --color-cyan-50: #3678b4;
  --color-cyan-60: #245791;
  --color-cyan-70: #1b4575;
  --color-cyan-80: #15314f;
  --color-cyan-90: #0b2131;
  --color-blue-05: #f5fbff;
  --color-blue-10: #d9ecfd;
  --color-blue-20: #acccfb;
  --color-blue-30: #85aaf1;
  --color-blue-40: #728ce6;
  --color-blue-50: #5869cd;
  --color-blue-60: #404ca6;
  --color-blue-70: #313c86;
  --color-blue-80: #232c61;
  --color-blue-90: #131e3f;
  --color-violet-05: #f8f9fe;
  --color-violet-10: #e6e6fa;
  --color-violet-20: #c4c3e8;
  --color-violet-30: #aca1dc;
  --color-violet-40: #9882d5;
  --color-violet-50: #7e62bc;
  --color-violet-60: #5d4897;
  --color-violet-70: #47347e;
  --color-violet-80: #332560;
  --color-violet-90: #1d174b;
  --color-purple-05: #fdf8ff;
  --color-purple-10: #f7e1f5;
  --color-purple-20: #e6b6e1;
  --color-purple-30: #d791d8;
  --color-purple-40: #bd72cb;
  --color-purple-50: #9855af;
  --color-purple-60: #713c92;
  --color-purple-70: #552d7d;
  --color-purple-80: #3b1e66;
  --color-purple-90: #280f52;
  --color-tan-05: #f9f7f1;
  --color-tan-10: #efe8db;
  --color-tan-20: #d7cab0;
  --color-tan-30: #bbaa88;
  --color-tan-40: #a3916e;
  --color-tan-50: #816f4d;
  --color-tan-60: #645537;
  --color-tan-70: #504329;
  --color-tan-80: #3b311c;
  --color-tan-90: #251e11;

  /* Highlight Colors */
  --color-highlight-yellow-1: #ffe34f;
  --color-highlight-yellow-2: #fff72c;
  --color-highlight-pink-1: #ff3dc9;
  --color-highlight-pink-2: #e680ff;
  --color-highlight-orange-1: #ff8c39;
  --color-highlight-orange-2: #ffc046;
  --color-highlight-blue-1: #4fdfff;
  --color-highlight-blue-2: #54ffd6;
  --color-highlight-green-1: #29f83e;
  --color-highlight-green-2: #afff2c;

  /* Accessibility */
  --a11y-outline-width: 3px;
  --a11y-outline-color: var(--color-brand-accessible);
  --a11y-outline: var(--a11y-outline-width) solid var(--a11y-outline-color);

  @media (hover: none) and (pointer: coarse) {
    --a11y-outline: none;
  }

  /* Safe Area */
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  --safe-area-inset-left: env(safe-area-inset-left);
  --safe-area-inset-right: env(safe-area-inset-right);
}