/* Popup Checkout Design Tokens
 * Scope: attach tokens to `.wpc-in-popup` so they only apply
 * on the popup checkout view and do not bleed globally.
 * Groups:
 * - Base: bg, surface, text, muted
 * - Borders: border, border-strong
 * - Accent: accent, accent-hover, accent-pressed, accent-weak
 * - Links: link, link-hover
 * - States: error, overlay, on-dark, transparent, muted-60
 */
.wpc-in-popup {
  /* Colors */
  --color-bg: #f1f2f9;
  --color-surface: #FFFFFF;
  --color-text: #1d2327;
  --color-muted: #6d7c90;
  --color-border: #D1D5DB;
  --color-accent: #66a700;
  --color-accent-weak: rgba(102, 167, 0, 0.1);
  --color-focus: rgba(102, 167, 0, 0.15);
  --color-focus-ring: rgba(75, 131, 254, 0.12);
  --color-error: #ef4444;
  --color-link: #4b83fe;
  --color-link-hover: #2968f3;
  --color-accent-hover: #5b9700;
  --color-accent-pressed: #4f8500;
  --color-on-dark: #FFFFFF;
  --color-transparent: transparent;
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-alert-bg: rgba(242, 222, 222, 0.6);
  --color-muted-60: rgba(109, 124, 144, 0.6);
  --color-gray-600: #6B7280;

  /* Typography */
  --font-base: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --fs-12: 0.75rem;       /* 12px */
  --fs-13: 0.8125rem;     /* 13px */
  --fs-14: 0.875rem;      /* 14px */
  --fs-15: 0.9375rem;     /* 15px */
  --fs-16: 1rem;          /* 16px */
  --fs-18: 1.125rem;      /* 18px */
  --fs-20: 1.25rem;       /* 20px */
  --fs-30: 1.875rem;      /* 30px */
  --fs-38: 2.375rem;      /* 38px */
  /* Semantic aliases for commonly used sizes */
  --fs-xs: var(--fs-12);
  --fs-sm: var(--fs-14);
  --fs-base: var(--fs-16);
  --fs-lg: var(--fs-18);
  --fs-xl: var(--fs-20);
  --fs-2xl: var(--fs-30);
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing System */
  --space-1px: 0.0625rem;   /* 1px */
  --space-3px: 0.1875rem;   /* 3px */
  --space-5px: 0.3125rem;   /* 5px */
  --space-6px: 0.375rem;    /* 6px */
  --space-7px: 0.4375rem;   /* 7px */
  --space-8px: 0.5rem;      /* 8px */
  --space-10px: 0.625rem;   /* 10px */
  --space-12px: 0.75rem;    /* 12px */
  --space-13px: 0.8125rem;  /* 13px */
  --space-14px: 0.875rem;   /* 14px */
  --space-15px: 0.9375rem;  /* 15px */
  --space-16px: 1rem;       /* 16px */
  --space-18px: 1.125rem;   /* 18px */
  --space-20px: 1.25rem;    /* 20px */
  --space-25px: 1.5625rem;  /* 25px */
  --space-29: 1.8125rem;    /* 29px */
  --space-30px: 1.875rem;   /* 30px */
  --space-35: 2.1875rem;    /* 35px */
  --space-40: 2.5rem;       /* 40px */
  --space-48: 3rem;         /* 48px */
  --space-92: 92%;
  /* Semantic aliases for commonly used spacing */
  --space-xs: 0.25rem;                      /* 4px */
  --space-sm: var(--space-8px);             /* 8px */
  --space-md: var(--space-12px);            /* 12px */
  --space-lg: var(--space-16px);            /* 16px */
  --space-xl: var(--space-20px);            /* 20px */
  --space-2xl: 1.5rem;                      /* 24px */
  --space-3xl: 2rem;                        /* 32px */
  --space-4xl: var(--space-40);             /* 40px */
  --space-5xl: var(--space-48);             /* 48px */
  /* Gap values (aliases to spacing) */
  --gap-4: var(--space-xs);      /* 4px */
  --gap-6: var(--space-6px);     /* 6px */
  --gap-8: var(--space-8px);     /* 8px */
  --gap-10: var(--space-10px);   /* 10px */
  --gap-12: var(--space-12px);   /* 12px */
  --gap-14: var(--space-14px);   /* 14px */
  --gap-16: var(--space-16px);   /* 16px */
  --gap-20: var(--space-20px);   /* 20px */

  /* Border Radius */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-full: 50%;
  /* Pixel-based aliases */
  --radius-4: var(--radius-sm);
  --radius-6: var(--radius-md);
  --radius-8: var(--radius-lg);

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-popup: 0 8px 60px 0 rgba(103, 151, 255, 0.11), 0 12px 90px 0 rgba(92, 119, 177, 0.29);
  --shadow-soft: var(--shadow-popup);

  /* Animation durations */
  --duration-fast: 0.15s;
  --duration-normal: 0.2s;
  --duration-slow: 0.3s;
  --duration-spinner: 0.6s;

  /* Transitions (using duration values) */
  --transition-fast: var(--duration-fast) ease;
  --transition-base: var(--duration-normal) ease;
  --transition-slow: var(--duration-slow) ease;

  /* Transform values */
  --transform-up-sm: translateY(-1px);
  --transform-up-md: translateY(-5px);
  --transform-up-lg: translateY(-10px);
  --transform-down-md: translateY(17px);

  /* Line heights */
  --lh-tight: 1.2;
  --lh-normal: 1.3;
  --lh-relaxed: 1.4;
  --lh-loose: 1.5;

  /* Z-index scale */
  --z-base: 1;
  --z-dropdown: 100;
  --z-overlay: 999;
  --z-modal: 9999;

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --width-18: 18%;
  --width-30: 30%;
  --width-35: 35%;
  --width-37: 37%;
  --width-40: 40%;
  --width-50: 50%;
  --width-60: 60%;
  --width-65: 65%;
  --width-71: 4.4375rem;   /* 71px */
  --width-75: 4.6875rem;   /* 75px */
  --width-85: 5.3125rem;   /* 85px */
  --width-92: 92%;
  --width-120: 7.5rem;     /* 120px */
  --width-130: 8.125rem;   /* 130px */

  /* Form elements */
  --input-height: 2.75rem;  /* 44px */
  --input-padding: var(--space-md) var(--space-lg);
  --button-height: var(--input-height);

  /* Background and image sizes */
  --bg-size-large: 86.875rem; /* 1390px */

  /* Media query breakpoints */
  --breakpoint-xs: 365px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 544px;
  --breakpoint-lg: 768px;
  --breakpoint-xl: 1024px;

  /* Letter spacing */
  --letter-spacing-tight: 0.3px;
  --letter-spacing-normal: 0.5px;
}