/* ============================================
   PageLab Design Tokens - Base
   ⚠️  자동 생성 파일. 직접 수정하지 마세요.
   생성: npm run tokens
   소스: tokens/figma/dds.json + reverse.tokens.json
   ============================================ */

:root {
  /* Device Breakpoints */
  --pl-device-pc-min: 1200px;
  --pl-device-tablet-min: 640px;
  --pl-device-tablet-max: 1199px;
  --pl-device-mobile-max: 639px;

  /* Spacing (PC base) */
  --pl-spacing-2: 4px;
  --pl-spacing-3: 8px;
  --pl-spacing-5: 16px;
  --pl-spacing-7: 24px;
  --pl-spacing-8: 32px;
  --pl-spacing-9: 40px;
  --pl-spacing-10: 48px;
  --pl-spacing-11: 60px;
  --pl-spacing-12: 68px;
  --pl-spacing-13: 80px;
  --pl-spacing-14: 100px;
  --pl-spacing-15: 120px;
  --pl-spacing-1: 2px;
  --pl-spacing-6: 20px;
  --pl-spacing-4: 12px;

  /* Border Width (PC base) */
  --pl-border-1: 1px;
  --pl-border-2: 2px;
  --pl-border-3: 3px;
  --pl-border-4: 4px;

  /* Border Radius */
  --pl-radius-1: 4px;
  --pl-radius-2: 10px;
  --pl-radius-3: 18px;
  --pl-radius-4: 24px;
  --pl-radius-circle: 999px;
  --pl-radius-5: 32px;
  --pl-radius-6: 40px;
  --pl-radius-7: 60px;

  /* Layout (PC base) */
  --pl-container-compact: 600px;
  --pl-container-narrow: 960px;
  --pl-container-default: 1280px;
  --pl-container-wide: 1400px;
  --pl-layout-padding: 40px;
  --pl-layout-body-top: 32px;
  --pl-layout-body-bottom: 100px;
  --pl-device-min-height: 960px;

  /* Typography - Font Family */
  --pl-font-main: 'Pretendard Variable', sans-serif;
  --pl-font-point: 'ONE Mobile Title', sans-serif;
  --pl-font-ja: 'Noto Sans JP', sans-serif;
  --pl-font-zh-tw: 'Noto Sans TC', sans-serif;
  --pl-font-zh-cn: 'Noto Sans SC', sans-serif;
  --pl-font-kids: 'Black Han Sans', sans-serif;

  /* Typography - Font Size (PC base) */
  --pl-font-size-display-lg: 56px;
  --pl-font-size-display-md: 48px;
  --pl-font-size-display-sm: 38px;
  --pl-font-size-header-lg: 34px;
  --pl-font-size-header-md: 30px;
  --pl-font-size-header-sm: 26px;
  --pl-font-size-title-lg: 24px;
  --pl-font-size-title-md: 22px;
  --pl-font-size-title-sm: 20px;
  --pl-font-size-body-lg: 20px;
  --pl-font-size-body-md: 18px;
  --pl-font-size-body-sm: 16px;
  --pl-font-size-label-lg: 19px;
  --pl-font-size-label-md: 17px;
  --pl-font-size-label-sm: 14px;

  /* Typography - Font Weight */
  --pl-font-weight-light: 300;
  --pl-font-weight-default: 500;
  --pl-font-weight-bold: 700;

  /* Typography - Line Height */
  --pl-line-height-title: 1.36;
  --pl-line-height-default: 1.44;
  --pl-line-height-body: 1.68;

  /* Typography - Letter Spacing */
  --pl-letter-spacing-narrow: -1px;
  --pl-letter-spacing-normal: 0px;
  --pl-letter-spacing-wide: 4px;

  /* Core Colors - Grayscale */
  --pl-grayscale-0: #ffffff;
  --pl-grayscale-5: #f1f4f8;
  --pl-grayscale-10: #e3e8ed;
  --pl-grayscale-20: #d4dce2;
  --pl-grayscale-30: #c6d0d7;
  --pl-grayscale-40: #abb6bf;
  --pl-grayscale-50: #8c98a1;
  --pl-grayscale-60: #6a747c;
  --pl-grayscale-70: #545d64;
  --pl-grayscale-80: #394046;
  --pl-grayscale-90: #202427;
  --pl-grayscale-100: #0b0d11;

  /* Core Colors - Lightblue */
  --pl-lightblue-5: #edf8fc;
  --pl-lightblue-10: #d2effa;
  --pl-lightblue-20: #b4e6fb;
  --pl-lightblue-30: #8ddaf9;
  --pl-lightblue-40: #57c7f3;
  --pl-lightblue-50: #15b2f1;
  --pl-lightblue-60: #049edc;
  --pl-lightblue-70: #007daf;
  --pl-lightblue-80: #045f84;
  --pl-lightblue-90: #06435b;

  /* Core Colors - Blue */
  --pl-blue-5: #f3f6ff;
  --pl-blue-10: #dae3ff;
  --pl-blue-20: #b7c8ff;
  --pl-blue-30: #8eabff;
  --pl-blue-40: #628aff;
  --pl-blue-50: #416df0;
  --pl-blue-60: #2856e0;
  --pl-blue-70: #1942bc;
  --pl-blue-80: #0e2f91;
  --pl-blue-90: #082271;

  /* Core Colors - Green */
  --pl-green-5: #ecf8f2;
  --pl-green-10: #daf1e5;
  --pl-green-20: #b5e3cb;
  --pl-green-30: #8fd5b0;
  --pl-green-40: #6ac796;
  --pl-green-50: #45b97c;
  --pl-green-60: #269e5f;
  --pl-green-70: #167d46;
  --pl-green-80: #145e37;
  --pl-green-90: #0a4325;

  /* Core Colors - Yellow */
  --pl-yellow-5: #fff8e7;
  --pl-yellow-10: #fff1d0;
  --pl-yellow-20: #fee3a1;
  --pl-yellow-30: #fed571;
  --pl-yellow-40: #feca4a;
  --pl-yellow-50: #fdb913;
  --pl-yellow-60: #d89a00;
  --pl-yellow-70: #a37402;
  --pl-yellow-80: #6b4d03;
  --pl-yellow-90: #503800;

  /* Core Colors - Orange */
  --pl-orange-5: #fef1e9;
  --pl-orange-10: #fde3d3;
  --pl-orange-20: #fac7a6;
  --pl-orange-30: #f8ab7a;
  --pl-orange-40: #f58f4d;
  --pl-orange-50: #f37321;
  --pl-orange-60: #da6113;
  --pl-orange-70: #a54d16;
  --pl-orange-80: #6e330d;
  --pl-orange-90: #482815;

  /* Core Colors - Red */
  --pl-red-5: #fef5f5;
  --pl-red-10: #fcdedf;
  --pl-red-20: #f9b8bb;
  --pl-red-30: #f68d91;
  --pl-red-40: #f4686d;
  --pl-red-50: #e14d52;
  --pl-red-60: #ca393e;
  --pl-red-70: #a32529;
  --pl-red-80: #7e0a0e;
  --pl-red-90: #560407;

  /* Core Colors - Pink */
  --pl-pink-5: #fff3fb;
  --pl-pink-10: #ffe2f5;
  --pl-pink-20: #ffc7ec;
  --pl-pink-30: #ffa6d8;
  --pl-pink-40: #fd80cb;
  --pl-pink-50: #fc60b4;
  --pl-pink-60: #de4397;
  --pl-pink-70: #ac3a77;
  --pl-pink-80: #832759;
  --pl-pink-90: #5b143a;

  /* Core Colors - Violet */
  --pl-violet-5: #f6f2fc;
  --pl-violet-10: #ebe3fb;
  --pl-violet-20: #ddd2f9;
  --pl-violet-30: #cfbbf8;
  --pl-violet-40: #b58df9;
  --pl-violet-50: #9b6bf4;
  --pl-violet-60: #8154d4;
  --pl-violet-70: #6944af;
  --pl-violet-80: #503585;
  --pl-violet-90: #392462;

  /* Core Colors - Alpha (Interaction Overlays) */
  --pl-alpha-black-08: #0b0d1114;
  --pl-alpha-black-12: #0b0d111f;
  --pl-alpha-black-24: #0b0d113d;
  --pl-alpha-black-32: #0b0d1152;
  --pl-alpha-black-48: #0b0d117a;
  --pl-alpha-black-60: #0b0d1199;
  --pl-alpha-black-80: #0b0d11cc;
  --pl-alpha-black-96: #0b0d11f5;
  --pl-alpha-white-08: #ffffff14;
  --pl-alpha-white-12: #ffffff1f;
  --pl-alpha-white-24: #ffffff3d;
  --pl-alpha-white-32: #ffffff52;
  --pl-alpha-white-48: #ffffff7a;
  --pl-alpha-white-60: #ffffff99;
  --pl-alpha-white-80: #ffffffcc;
  --pl-alpha-white-96: #fffffff5;
  --pl-alpha-gray-08: #8c98a114;
  --pl-alpha-gray-12: #8c98a11f;
  --pl-alpha-gray-24: #8c98a13d;
  --pl-alpha-gray-32: #8c98a152;
  --pl-alpha-gray-48: #8c98a17a;
  --pl-alpha-gray-60: #8c98a199;
  --pl-alpha-gray-80: #8c98a1cc;
  --pl-alpha-gray-96: #8c98a1f5;
  --pl-alpha-lightblue-08: #15b2f114;
  --pl-alpha-lightblue-12: #15b2f11f;
  --pl-alpha-lightblue-24: #15b2f13d;
  --pl-alpha-lightblue-32: #15b2f152;
  --pl-alpha-lightblue-48: #15b2f17a;
  --pl-alpha-lightblue-60: #15b2f199;
  --pl-alpha-lightblue-80: #15b2f1cc;
  --pl-alpha-lightblue-96: #15b2f1f5;
  --pl-alpha-blue-08: #416df014;
  --pl-alpha-blue-12: #416df01f;
  --pl-alpha-blue-24: #416df03d;
  --pl-alpha-blue-32: #416df052;
  --pl-alpha-blue-48: #416df07a;
  --pl-alpha-blue-60: #416df099;
  --pl-alpha-blue-80: #416df0cc;
  --pl-alpha-blue-96: #416df0f5;
  --pl-alpha-green-08: #45b97c14;
  --pl-alpha-green-12: #45b97c1f;
  --pl-alpha-green-24: #45b97c3d;
  --pl-alpha-green-32: #45b97c52;
  --pl-alpha-green-48: #45b97c7a;
  --pl-alpha-green-60: #45b97c99;
  --pl-alpha-green-80: #45b97ccc;
  --pl-alpha-green-96: #45b97cf5;
  --pl-alpha-yellow-08: #fdb91314;
  --pl-alpha-yellow-12: #fdb9131f;
  --pl-alpha-yellow-24: #fdb9133d;
  --pl-alpha-yellow-32: #fdb91352;
  --pl-alpha-yellow-48: #fdb9137a;
  --pl-alpha-yellow-60: #fdb91399;
  --pl-alpha-yellow-80: #fdb913cc;
  --pl-alpha-yellow-96: #fdb913f5;
  --pl-alpha-orange-08: #f3732114;
  --pl-alpha-orange-12: #f373211f;
  --pl-alpha-orange-24: #f373213d;
  --pl-alpha-orange-32: #f3732152;
  --pl-alpha-orange-48: #f373217a;
  --pl-alpha-orange-60: #f3732199;
  --pl-alpha-orange-80: #f37321cc;
  --pl-alpha-orange-96: #f37321f5;
  --pl-alpha-red-08: #e14d5214;
  --pl-alpha-red-12: #e14d521f;
  --pl-alpha-red-24: #e14d523d;
  --pl-alpha-red-32: #e14d5252;
  --pl-alpha-red-48: #e14d527a;
  --pl-alpha-red-60: #e14d5299;
  --pl-alpha-red-80: #e14d52cc;
  --pl-alpha-red-96: #e14d52f5;
  --pl-alpha-pink-08: #fc60b414;
  --pl-alpha-pink-12: #fc60b41f;
  --pl-alpha-pink-24: #fc60b43d;
  --pl-alpha-pink-32: #fc60b452;
  --pl-alpha-pink-48: #fc60b47a;
  --pl-alpha-pink-60: #fc60b499;
  --pl-alpha-pink-80: #fc60b4cc;
  --pl-alpha-pink-96: #fc60b4f5;
  --pl-alpha-violet-08: #9b6bf414;
  --pl-alpha-violet-12: #9b6bf41f;
  --pl-alpha-violet-24: #9b6bf43d;
  --pl-alpha-violet-32: #9b6bf452;
  --pl-alpha-violet-48: #9b6bf47a;
  --pl-alpha-violet-60: #9b6bf499;
  --pl-alpha-violet-80: #9b6bf4cc;
  --pl-alpha-violet-96: #9b6bf4f5;

  /* ============================================
     Tier 2: Scale Colors (semantic role)
     ============================================ */
  /* neutral */
  --pl-neutral-lighter: #d4dce2;
  --pl-neutral-darker: #394046;
  --pl-neutral-light: #c6d0d7;
  --pl-neutral-white: #ffffff;
  --pl-neutral-default: #8c98a1;
  --pl-neutral-lightest: #e3e8ed;
  --pl-neutral-dark: #6a747c;
  --pl-neutral-darkest: #0b0d11;

  /* brand */
  --pl-brand-lightest: #edf8fc;
  --pl-brand-light: #8ddaf9;
  --pl-brand-lighter: #d2effa;
  --pl-brand-dark: #007daf;
  --pl-brand-darker: #045f84;
  --pl-brand-default: #15b2f1;
  --pl-brand-darkest: #06435b;

  /* brand-sub */
  --pl-brand-sub-lightest: #ecf8f2;
  --pl-brand-sub-lighter: #daf1e5;
  --pl-brand-sub-light: #8fd5b0;
  --pl-brand-sub-default: #45b97c;
  --pl-brand-sub-dark: #167d46;
  --pl-brand-sub-darker: #145e37;
  --pl-brand-sub-darkest: #0a4325;

  /* accent */
  --pl-accent-default: #416df0;
  --pl-accent-darkest: #082271;
  --pl-accent-dark: #1942bc;
  --pl-accent-darker: #0e2f91;
  --pl-accent-lighter: #b7c8ff;
  --pl-accent-light: #8eabff;
  --pl-accent-lightest: #dae3ff;

  /* positive */
  --pl-positive-light: #8fd5b0;
  --pl-positive-darker: #167d46;
  --pl-positive-default: #45b97c;
  --pl-positive-darkest: #0a4325;
  --pl-positive-dark: #269e5f;
  --pl-positive-lightest: #ecf8f2;
  --pl-positive-lighter: #daf1e5;

  /* negative */
  --pl-negative-lightest: #fef5f5;
  --pl-negative-lighter: #fcdedf;
  --pl-negative-light: #f68d91;
  --pl-negative-darkest: #560407;
  --pl-negative-default: #e14d52;
  --pl-negative-darker: #7e0a0e;
  --pl-negative-dark: #a32529;

  /* caution */
  --pl-caution-lighter: #fee3a1;
  --pl-caution-light: #fed571;
  --pl-caution-darkest: #503800;
  --pl-caution-darker: #a37402;
  --pl-caution-default: #fdb913;
  --pl-caution-dark: #d89a00;
  --pl-caution-lightest: #fff8e7;

  /* ============================================
     Tier 3: Semantic Colors (usage) - Light Mode
     ============================================ */
  /* fg */
  --pl-fg-accent-on-dark: #b7c8ff;
  --pl-fg-accent-on-light: #082271;
  --pl-fg-accent-primary: #416df0;
  --pl-fg-positive-on-dark: #8fd5b0;
  --pl-fg-positive-on-light: #167d46;
  --pl-fg-caution-on-dark: #fed571;
  --pl-fg-caution-primary: #fdb913;
  --pl-fg-negative-on-dark: #f68d91;
  --pl-fg-negative-on-light: #7e0a0e;
  --pl-fg-brand-on-dark: #8ddaf9;
  --pl-fg-neutral-disabled: #0b0d113d;
  --pl-fg-neutral-invert: #ffffff;
  --pl-fg-neutral-lowest: #8c98a1;
  --pl-fg-neutral-tertiary: #6a747c;
  --pl-fg-neutral-secondary: #394046;
  --pl-fg-neutral-primary: #0b0d11;
  --pl-fg-caution-on-light: #a37402;
  --pl-fg-brand-primary: #15b2f1;
  --pl-fg-brand-on-light: #06435b;
  --pl-fg-positive-primary: #45b97c;
  --pl-fg-negative-primary: #e14d52;
  --pl-fg-brand-sub-primary: #45b97c;
  --pl-fg-brand-sub-on-light: #0a4325;
  --pl-fg-brand-sub-on-dark: #8fd5b0;

  /* bg */
  --pl-bg-negative-deep: #a32529;
  --pl-bg-brand-soft: #d2effa;
  --pl-bg-brand-deep: #045f84;
  --pl-bg-brand-default: #15b2f1;
  --pl-bg-layer-disabled: #8c98a13d;
  --pl-bg-layer-strong: #6a747c;
  --pl-bg-toast: #0b0d11cc;
  --pl-bg-layer-dim: #0b0d1199;
  --pl-bg-layer-soft: #e3e8ed;
  --pl-bg-accent-deep: #0e2f91;
  --pl-bg-caution-deep: #a37402;
  --pl-bg-accent-default: #416df0;
  --pl-bg-positive-soft: #ecf8f2;
  --pl-bg-skeleton: #d4dce2;
  --pl-bg-caution-soft: #fff8e7;
  --pl-bg-layer-invert: #0b0d11;
  --pl-bg-caution-default: #fdb913;
  --pl-bg-layer-overlay: #ffffffcc;
  --pl-bg-positive-default: #45b97c;
  --pl-bg-accent-soft: #dae3ff;
  --pl-bg-scrollbar: #d4dce2;
  --pl-bg-layer-deep: #8c98a1;
  --pl-bg-positive-deep: #167d46;
  --pl-bg-negative-default: #e14d52;
  --pl-bg-layer-default: #ffffff;
  --pl-bg-negative-soft: #fef5f5;
  --pl-bg-brand-sub: #45b97c;

  /* border */
  --pl-border-accent-soft: #8eabff;
  --pl-border-accent-deep: #0e2f91;
  --pl-border-accent-default: #416df0;
  --pl-border-positive-soft: #8fd5b0;
  --pl-border-layer-disabled: #0b0d113d;
  --pl-border-caution-soft: #fee3a1;
  --pl-border-negative-deep: #f68d91;
  --pl-border-negative-soft: #7e0a0e;
  --pl-border-brand-deep: #045f84;
  --pl-border-layer-black: #0b0d11;
  --pl-border-layer-strong: #6a747c;
  --pl-border-layer-default: #c6d0d7;
  --pl-border-negative-default: #e14d52;
  --pl-border-positive-default: #45b97c;
  --pl-border-caution-default: #fdb913;
  --pl-border-brand-default: #15b2f1;
  --pl-border-layer-invert: #ffffff;
  --pl-border-layer-deep: #8c98a1;
  --pl-border-positive-deep: #167d46;
  --pl-border-brand-soft: #8ddaf9;
  --pl-border-caution-deep: #a37402;
  --pl-border-layer-soft: #d4dce2;
  --pl-border-brand-sub: #45b97c;

  /* static */
  --pl-static-orange: #f37321;
  --pl-static-red: #e14d52;
  --pl-static-pink: #fc60b4;
  --pl-static-gray: #8c98a1;
  --pl-static-blue: #416df0;
  --pl-static-violet: #9b6bf4;
  --pl-static-green: #45b97c;
  --pl-static-lightblue: #15b2f1;
  --pl-static-yellow: #fdb913;

  /* ix */
  --pl-ix-neutral-hovered: #0b0d1114;
  --pl-ix-neutral-pressed: #0b0d113d;
  --pl-ix-invert-hovered: #ffffff1f;
  --pl-ix-invert-pressed: #ffffff3d;
  --pl-ix-brand-hovered: #15b2f114;
  --pl-ix-brand-pressed: #15b2f11f;

  /* Z-index */
  --pl-z-base: 0;
  --pl-z-dropdown: 10;
  --pl-z-sticky: 50;
  --pl-z-nav: 100;
  --pl-z-gnb: 150;
  --pl-z-modal: 200;
  --pl-z-toast: 300;

  /* Transition */
  --pl-transition-fast: all 0.15s ease;
  --pl-transition-base: all 0.2s ease;
  --pl-transition-slow: all 0.3s ease;
  --pl-transition-device: max-width 0.3s ease;
  --pl-transition-bg: background 0.2s ease;
  --pl-transition-opacity: opacity 0.2s ease;

  /* Layout - GNB / Shell */
  --pl-gnb-height: 56px;
  --pl-nav-sidebar-width: 220px;

  /* Shadow */
  --pl-shadow-sm: 0 1px 3px var(--pl-alpha-black-08);
  --pl-shadow-md: 0 4px 16px var(--pl-alpha-black-08);
  --pl-shadow-lg: 0 4px 24px var(--pl-alpha-black-12);
  --pl-shadow-xl: 0 8px 24px var(--pl-alpha-black-12);
  --pl-shadow-float-up: 0 -4px 16px var(--pl-alpha-black-08);
  --pl-shadow-brand: 0 4px 20px var(--pl-alpha-lightblue-12);
  --pl-shadow-accent: 0 4px 16px var(--pl-alpha-lightblue-08);

  /* PageLab Aliases (편의) */
  --pl-alpha-brand-08: var(--pl-alpha-lightblue-08);
  --pl-alpha-brand-12: var(--pl-alpha-lightblue-12);
  --pl-alpha-brand-24: var(--pl-alpha-lightblue-24);
  --pl-alpha-brand-32: var(--pl-alpha-lightblue-32);
  --pl-alpha-brand-48: var(--pl-alpha-lightblue-48);
  --pl-static-white: var(--pl-grayscale-0);
  --pl-alpha-white-72: rgba(255, 255, 255, 0.72);

  /* Campaign (season1 default) */
  --pl-campaign-primary: #9b6bf4;
  --pl-campaign-secondary: #fd80cb;
  --pl-campaign-bg: #f6f2fc;

}

/* ============================================
   Dark Theme (reverse mode)
   Figma reverse 모드에서 다른 값을 가진 토큰만 override.
   ============================================ */
[data-theme="dark"] {
  /* fg */
  --pl-fg-neutral-primary: #ffffff;
  --pl-fg-neutral-secondary: #e3e8ed;
  --pl-fg-neutral-tertiary: #c6d0d7;
  --pl-fg-neutral-invert: #0b0d11;

  /* bg */
  --pl-bg-layer-default: #0b0d11;
  --pl-bg-layer-deep: #d4dce2;
  --pl-bg-layer-strong: #c6d0d7;
  --pl-bg-layer-invert: #ffffff;
  --pl-bg-layer-overlay: #0b0d11cc;
  --pl-bg-brand-soft: #06435b;
  --pl-bg-brand-deep: #d2effa;

  /* border */
  --pl-border-layer-invert: #0b0d11;

}

/* ============================================
   Tablet (640px ~ 1199px)
   ============================================ */
@media (max-width: 1199px) {
  :root {
    --pl-spacing-5: 14px;
    --pl-spacing-7: 22px;
    --pl-radius-2: 8px;
    --pl-radius-3: 16px;
    --pl-radius-5: 28px;
    --pl-radius-6: 34px;
    --pl-spacing-8: 30px;
    --pl-spacing-9: 36px;
    --pl-spacing-10: 44px;
    --pl-spacing-11: 52px;
    --pl-spacing-12: 60px;
    --pl-spacing-14: 92px;
    --pl-spacing-15: 112px;
    --pl-spacing-6: 18px;
    --pl-spacing-4: 10px;
    --pl-radius-7: 52px;
    --pl-layout-padding: 32px;
    --pl-layout-body-top: 20px;
    --pl-layout-body-bottom: 60px;
    --pl-font-size-header-sm: 24px;
    --pl-font-size-header-md: 28px;
    --pl-font-size-header-lg: 32px;
    --pl-font-size-label-lg: 18px;
    --pl-font-size-display-md: 40px;
    --pl-font-size-title-md: 20px;
    --pl-font-size-label-md: 16px;
    --pl-font-size-display-sm: 34px;
    --pl-font-size-title-lg: 22px;
    --pl-font-size-title-sm: 18px;
    --pl-font-size-display-lg: 44px;
  }
}

/* ============================================
   Mobile (~ 639px)
   ============================================ */
@media (max-width: 639px) {
  :root {
    --pl-spacing-2: 3px;
    --pl-spacing-3: 6px;
    --pl-spacing-5: 12px;
    --pl-spacing-7: 20px;
    --pl-border-2: 1px;
    --pl-border-3: 2px;
    --pl-border-4: 3px;
    --pl-radius-2: 8px;
    --pl-radius-3: 16px;
    --pl-radius-4: 20px;
    --pl-radius-5: 24px;
    --pl-radius-6: 30px;
    --pl-spacing-8: 24px;
    --pl-spacing-9: 32px;
    --pl-spacing-10: 40px;
    --pl-spacing-11: 48px;
    --pl-spacing-12: 52px;
    --pl-spacing-13: 60px;
    --pl-spacing-14: 80px;
    --pl-spacing-15: 100px;
    --pl-spacing-6: 16px;
    --pl-spacing-4: 8px;
    --pl-radius-7: 48px;
    --pl-layout-padding: 20px;
    --pl-layout-body-top: 16px;
    --pl-layout-body-bottom: 48px;
    --pl-font-size-header-sm: 22px;
    --pl-font-size-header-md: 24px;
    --pl-font-size-header-lg: 28px;
    --pl-font-size-label-lg: 17px;
    --pl-font-size-display-md: 30px;
    --pl-font-size-title-md: 18px;
    --pl-font-size-label-md: 15px;
    --pl-font-size-body-md: 16px;
    --pl-font-size-body-lg: 18px;
    --pl-font-size-display-sm: 28px;
    --pl-font-size-title-lg: 20px;
    --pl-font-size-title-sm: 16px;
    --pl-font-size-display-lg: 30px;
    --pl-letter-spacing-wide: 3px;
    --pl-line-height-body: 1.6;
  }
}