/* ==========================================================================
   tokens.css — Checkout prototype design tokens
   Values only. Do not add selectors, utilities, or component rules here.
   ========================================================================== */

:root {
  /* Typography */
  --font-family: "Inter", sans-serif;
  --letter-spacing: -0.03em;

  /* Text Colors */
  --color-text: rgba(0, 0, 0, 0.88);
  --color-text-secondary: rgba(0, 0, 0, 0.64);
  --color-text-muted: #666;
  --color-text-dark: #333333;
  --color-text-subtle: #3f3f3f;
  --color-text-mid: #444444;
  --color-text-neutral: #3b3b3b;
  --color-text-strong: #2a2a2a;
  --color-text-emphasis: #222;
  --color-text-control: #5d5d5d;
  --color-text-control-muted: #5b5b5b;
  --color-black: #000;
  --color-text-light: #6D6D6D;
  --color-white: #fff;

  /* Backgrounds */
  --color-bg-white: #fff;
  --color-bg-stripe: #ECECEC;
  --color-bg-light: #f6f6f6;
  --color-bg-panel: #f7f7f7;
  --color-bg-control: #f0f0f0;
  --color-bg-subtle: #e9e9e9;
  --color-bg-overlay: rgba(0, 0, 0, 0.7);
  --color-bg-translucent: rgba(255, 255, 255, 0.12);
  --color-bg-dev-overlay: rgba(0, 0, 0, 0.88);

  /* Borders */
  --color-border: #d7d7d7;
  --color-border-input-soft: #d6d6d6;
  --color-border-light: #ddd;
  --color-border-medium: #CCCCCC;
  --color-border-card: #DDDDDD;
  --color-border-strong: #b2b2b2;
  --color-border-subtle: #d8d8d8;
  --color-border-muted: #777;
  --color-border-inline: #adadad;
  --color-border-section: #bbbbbb;
  --color-border-control-light: #d5d5d5;
  --color-border-divider-dark: #9b9b9b;
  --color-border-translucent: rgba(0, 0, 0, 0.15);
  --color-border-popover: rgba(0, 0, 0, 0.2);

  /* Interactive */
  --color-primary: #0f0f0f;
  --color-primary-hover: rgba(15, 15, 15, 0.64);
  --color-primary-active: rgba(15, 15, 15, 0.88);
  --color-primary-disabled: rgba(15, 15, 15, 0.24);
  --color-disabled-bg: #c6c6c6;
  --color-disabled-control-bg: #c4c4c4;
  --color-disabled-text-on-primary: rgba(255, 255, 255, 0.64);
  --color-focus: #a855f7;
  --color-focus-ring: #B84EE7;
  --color-focus-alpha: rgba(168, 85, 247, 0.3);
  --color-link: #3566b0;
  --color-link-strong: #2f65ad;

  /* Status */
  --color-error: #9C1534;
  --color-error-muted: #b94a48;
  --color-error-strong: #b94444;
  --color-error-bg: rgba(220, 34, 65, 0.16);
  --color-error-border: #CF1200;
  --color-success: #238F55;
  --color-success-muted: #427f49;
  --color-success-strong: #43864a;
  --color-success-bg: rgba(35, 143, 85, 0.2);
  --color-complete: forestgreen;
  --color-complete-bg: #efe;
  --color-warning: #b45309;
  --color-warning-bg: rgba(180, 83, 9, 0.14);

  /* Quantity Stepper */
  --color-qty-bg: rgba(0, 0, 0, 0.06);
  --color-qty-hover: rgba(0, 0, 0, 0.12);
  --color-qty-active: rgba(0, 0, 0, 0.24);
  --color-icon-muted: #696969;
  --color-icon-disabled: #bdbdbd;
  --color-menu-caret: #687081;
  --color-phone-text: #263244;
  --color-paypal-bg: #ffc439;
  --color-venmo-bg: #3d95ce;
  --color-dev-kbd-border: rgba(255, 255, 255, 0.35);
  --color-dev-kbd-bg: rgba(255, 255, 255, 0.14);
  --color-dev-divider: rgba(255, 255, 255, 0.16);

  /* Form Controls */
  --input-border: #d7d7d7;
  --input-text: #1f2937;
  --input-bg: #ffffff;
  --input-error: #ba1635;
  --input-placeholder: #9ca3af;
  --input-radius: 24px;
  --input-padding: 8px 16px;
  --input-padding-right: 40px;
  --input-height: 42px;
  --input-font-size: 16px;
  --input-line-height: 24px;
  --input-icon-size: 20px;
  --input-icon-position: 12px;
  --input-transition: all 0.1s ease-in-out;
  --input-shadow-focus: 0 0 0 2px #fff, 0 0 0 5px var(--color-focus);
  --input-shadow-hover: 0 0 0 2px #fff, 0 0 0 5px var(--color-focus-alpha);

  /* Layout */
  --container-max: 970px;
  --content-padding: 32px;
  --wrapper-padding-top: 40px;

  /* Z-index */
  --z-nav: 1030;
  --z-modal: 1050;
  --z-modal-backdrop: 1040;

  /* Type Scale */
  --font-size-xs: 12px;
  --font-size-dev-kbd: 10px;
  --font-size-dev-mobile: 11px;
  --font-size-caption: 13px;
  --font-size-sm: 14px;
  --font-size-ui: 15px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-mobile-title: 19px;
  --font-size-lead: 21px;
  --font-size-xl: 24px;
  --font-size-modal-title: 28px;
  --font-size-2xl: 30px;
  --font-size-3xl: 36px;
  --font-size-display: 48px;
  --font-size-relative-md: 1.3em;
  --font-size-relative-xl: 2em;
  --font-weight-regular: 400;
  --font-weight-light: 300;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-weight-black: 900;
  --line-height-tight: 1.2;
  --line-height-auto: normal;
  --line-height-none: 1;
  --line-height-compact: 1.25;
  --line-height-copy: 1.35;
  --line-height-snug: 1.15;
  --line-height-checkbox: 1.3;
  --line-height-loose: 1.4;
  --line-height-form-copy: 1.45;
  --line-height-normal: 1.42;
  --line-height-relaxed: 1.5;
  --line-height-caption: 14px;
  --line-height-password-info: 15px;
  --line-height-xs: 16px;
  --line-height-sm: 18px;
  --line-height-base: 20px;
  --line-height-md: 24px;
  --line-height-form: 25px;
  --line-height-lead: 26px;
  --line-height-content-empty: 28px;
  --line-height-lg: 30px;
  --line-height-modal-title: 33px;
  --line-height-xl: 36px;
  --line-height-date-number: 37px;
  --line-height-nav: 40px;
  --line-height-date-mobile: 45px;

  /* Spacing Scale */
  --space-0: 0;
  --space-nudge-xs: 2px;
  --space-nudge-sm: 3px;
  --space-1: 4px;
  --space-control-gap: 5px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-label-gap: 14px;
  --space-6: 15px;
  --space-7: 16px;
  --space-form-gap: 18px;
  --space-8: 20px;
  --space-field-gap: 22px;
  --space-9: 24px;
  --space-copy-gap: 26px;
  --space-summary-gap: 28px;
  --space-10: 30px;
  --space-11: 32px;
  --space-section-gap: 34px;
  --space-12: 40px;
  --space-13: 48px;
  --space-modal-top: 50px;
  --space-footer-gap: 100px;
  --space-14: 60px;
  --space-stored-card-offset: 86px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-input: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Elevation */
  --shadow-none: none;
  --shadow-avatar: 0 0 4px rgba(0, 0, 0, 0.15);
  --shadow-dropdown: 0 6px 12px rgba(0, 0, 0, 0.175);
  --shadow-popover: 0 5px 10px rgba(0, 0, 0, 0.2);
  --shadow-modal: 0 4px 16px rgba(0, 0, 0, 0.24);
  --shadow-dev-overlay: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-tooltip: 0 4px 12px rgba(0, 0, 0, 0.16);

  /* Shared Dimensions */
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --card-logo-slot-width: 49px;
  --card-logo-outline-max-width: 60%;
  --event-icon-size: 30px;
  --close-icon-size: 20px;
  --button-radius: var(--radius-pill);

}