/* light.css — Paymentus pixels design tokens (light theme)
 *
 * Three tiers (see docs/theming.md):
 *   TIER 1  Primitives   raw palette scales. Internal; rarely set directly.
 *   TIER 2  Semantic      the "brand-it-once" layer. Set these to re-theme everything.
 *   TIER 3  Component      per-component knobs; each defaults to a Tier-2 token.
 *
 * Every legacy --pmt-* token name is preserved (Tier 3) so existing client themes keep working.
 * Brand-derived tokens all flow through --pmt-color-brand*, so setting one brand token re-themes
 * buttons, active states, checkboxes/radios, icons, loaders and the focus ring at once.
 * The --pmt-* -> --wa-* mapping lives in themes/webawesome.ts (the bridge).
 */
/* All token defaults live in the low-priority `pmt-theme` cascade layer. Unlayered author CSS — e.g. a
 * consumer's `:root { --pmt-color-brand: ... }` — always beats a layer regardless of load order, so the
 * "brand in 10 lines" overrides win even though this file is linked after the host page's <style>. */
@layer pmt-theme {
:root,
:host,
.pmt-theme-light {
  /* ============================================================== *
   * TIER 1 — PRIMITIVES (palette)                                  *
   * ============================================================== */
  --pmt-color-white: #fff;
  --pmt-color-black: #000;

  /* Primary (brand) palette */
  --pmt-primary-50: #e6f0ff;
  --pmt-primary-100: #DEE4F0;
  --pmt-primary-200: #99c2ff;
  --pmt-primary-300: #66a3ff;
  --pmt-primary-400: #3385ff;
  --pmt-primary-500: #007bff;
  --pmt-primary-600: #006ae6;
  --pmt-primary-700: #005bb5;
  --pmt-primary-800: #004c85;
  --pmt-primary-900: #003d55;
  --pmt-primary-950: #002e25;

  /* Secondary palette */
  --pmt-secondary-50: #f3e8ff;
  --pmt-secondary-100: #e6d1ff;
  --pmt-secondary-200: #ccacff;
  --pmt-secondary-300: #b387ff;
  --pmt-secondary-400: #9962ff;
  --pmt-secondary-500: #7f3dff;
  --pmt-secondary-600: #6f35e6;
  --pmt-secondary-700: #5f2ec5;
  --pmt-secondary-800: #4f27a3;
  --pmt-secondary-900: #3f1f82;
  --pmt-secondary-950: #2f1761;

  /* Neutral (gray) palette */
  --pmt-gray-50: hsl(0, 0%, 97.5%);
  --pmt-gray-100: hsl(240, 4.8%, 95.9%);
  --pmt-gray-200: hsl(240, 5.9%, 90%);
  --pmt-gray-300: hsl(240, 4.9%, 83.9%);
  --pmt-gray-400: hsl(240, 5%, 64.9%);
  --pmt-gray-500: hsl(240, 3.8%, 46.1%);
  --pmt-gray-600: hsl(240, 5.2%, 33.9%);
  --pmt-gray-700: hsl(240, 5.3%, 26.1%);
  --pmt-gray-800: hsl(240, 3.7%, 15.9%);
  --pmt-gray-900: hsl(240, 5.9%, 10%);
  --pmt-gray-950: hsl(240, 7.3%, 8%);

  /* Status palettes */
  --pmt-danger-500: #D4403A;
  --pmt-danger-200: #df94926b;
  --pmt-success-500: #2e7d32;
  --pmt-warning-500: #FFA500;

  /* ============================================================== *
   * TIER 2 — SEMANTIC (set these to brand the whole SDK)          *
   * ============================================================== */
  /* Brand */
  --pmt-color-brand: var(--pmt-primary-500);
  --pmt-color-brand-hover: var(--pmt-primary-600);
  --pmt-color-brand-active: var(--pmt-primary-700);
  --pmt-color-on-brand: var(--pmt-color-white);

  /* Status */
  --pmt-color-danger: var(--pmt-danger-500);
  --pmt-color-success: var(--pmt-success-500);
  --pmt-color-warning: var(--pmt-warning-500);

  /* Surfaces & text */
  --pmt-color-surface: var(--pmt-color-white);
  --pmt-color-surface-raised: var(--pmt-color-white);
  --pmt-color-surface-sunken: var(--pmt-gray-50);
  --pmt-color-text: rgba(26, 26, 26, 0.8);
  --pmt-color-text-quiet: var(--pmt-gray-500);
  --pmt-color-on-surface: var(--pmt-color-text);

  /* Borders */
  --pmt-color-border: var(--pmt-gray-200);
  --pmt-color-border-strong: var(--pmt-gray-400);

  /* Typography */
  --pmt-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Montserrat', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --pmt-font-size: 16px;
  --pmt-font-weight: 400;

  /* Shape & spacing */
  --pmt-radius: 5px;
  --pmt-space-xs: 4px;
  --pmt-space-s: 8px;
  --pmt-space-m: 12px;
  --pmt-space-l: 16px;
  --pmt-space-xl: 24px;

  /* Elevation */
  --pmt-shadow-s: 0 1px 2px rgba(0, 0, 0, 0.08);
  --pmt-shadow-m: 0 2px 8px rgba(0, 0, 0, 0.12);
  --pmt-shadow-l: 0 8px 24px rgba(0, 0, 0, 0.16);

  /* Focus ring */
  --pmt-focus-ring-color: var(--pmt-color-brand-active);
  --pmt-focus-ring: solid 3px var(--pmt-focus-ring-color);

  /* ============================================================== *
   * TIER 3 — COMPONENT (legacy names preserved; default to Tier 2) *
   * ============================================================== */
  /* Core surfaces / type */
  --pmt-background-color: var(--pmt-color-surface);
  --pmt-font-color: var(--pmt-color-text);

  /* Legacy per-component alias names (authored in various pixels before the Tier-2 tokens existed).
     They were never defined here, so components using them fell back to hardcoded light literals and
     broke in dark mode. Define them once so every consumer themes correctly (kept in sync with dark.css). */
  --pmt-bg-color: var(--pmt-color-surface);
  --pmt-text-color: var(--pmt-color-text);
  --pmt-text-primary: var(--pmt-color-text);
  --pmt-text-secondary: var(--pmt-color-text-quiet);
  --pmt-text-muted: var(--pmt-color-text-quiet);
  --pmt-heading-color: var(--pmt-color-text);
  --pmt-muted-color: var(--pmt-color-text-quiet);
  --pmt-font-color-muted: var(--pmt-color-text-quiet);
  --pmt-secondary-text-color: var(--pmt-color-text-quiet);
  --pmt-secondary-font-color: var(--pmt-color-text-quiet);
  --pmt-no-wallets-color: var(--pmt-color-text-quiet);
  --pmt-card-title-color: var(--pmt-color-text);
  --pmt-container-background-color: var(--pmt-color-surface);
  --pmt-view-payment-background-color: var(--pmt-color-surface);
  --pmt-primary-color: var(--pmt-color-brand);
  --pmt-hover-bg: var(--pmt-hover-background-color);
  --pmt-selected-bg: var(--pmt-card-selected-background, var(--pmt-primary-50));
  /* On light surfaces the info banner is a faint brand tint, so brand-colored text reads well. */
  --pmt-info-color: var(--pmt-color-brand);

  /* Borders & radius */
  --pmt-border-color: var(--pmt-color-border);
  --pmt-border-radius: var(--pmt-radius);
  --pmt-border-width: 2px;

  /* Inputs */
  --pmt-input-border-color: var(--pmt-color-border-strong);
  --pmt-input-background-color: var(--pmt-color-surface);
  --pmt-input-error-border-color: var(--pmt-color-danger);
  --pmt-input-placeholder-color: var(--pmt-color-text-quiet);
  --pmt-help-text-color: var(--pmt-color-text-quiet);
  --pmt-optional-label-color: var(--pmt-color-text-quiet);
  --pmt-input-label-font-size: 13px;
  --pmt-input-label-color: var(--pmt-color-text);
  --pmt-input-label-font-weight: 500;
  --pmt-input-padding: var(--pmt-space-m);
  --pmt-input-group-padding: var(--pmt-space-m);
  --pmt-input-prefix-background-color: var(--pmt-gray-200);

  /* Interaction & states */
  --pmt-hover-background-color: var(--pmt-gray-50);
  --pmt-active-border-color: var(--pmt-color-brand-active);
  --pmt-active-font-color: var(--pmt-color-brand-active);
  --pmt-focus-color: var(--pmt-color-brand-active);
  --pmt-error-color: var(--pmt-color-danger);
  --pmt-warning-color: var(--pmt-color-warning);
  --pmt-error-text-color: var(--pmt-error-color);
  --pmt-error-text-font-size: 12px;
  --pmt-loader-color: var(--pmt-color-brand);
  --pmt-loader-bg-color: var(--pmt-gray-200);

  /* Buttons */
  --pmt-button-background-color: var(--pmt-color-brand);
  --pmt-button-font-color: var(--pmt-color-text);
  --pmt-button-text-transform: uppercase;
  --pmt-button-active-background-color: var(--pmt-color-brand);
  --pmt-button-active-font-color: var(--pmt-color-on-brand);
  --pmt-button-hover-background-color: var(--pmt-color-brand-hover);

  /* Other components */
  --pmt-skeleton-loader-color1: var(--pmt-gray-50);
  --pmt-skeleton-loader-color2: var(--pmt-gray-100);
  --pmt-tabs-background-color: var(--pmt-gray-50);
  /* Table headers (tinted brand background with dark text). */
  --pmt-table-header-bg: var(--pmt-primary-100);
  --pmt-table-header-color: var(--pmt-color-text);
  --pmt-table-border-color: var(--pmt-color-border);
  --pmt-table-row-hover-bg: var(--pmt-hover-background-color);
  --pmt-table-row-selected-bg: var(--pmt-primary-100);
  --pmt-table-stripe-bg: var(--pmt-color-surface-sunken);
  --pmt-table-accent-color: var(--pmt-color-brand);
  --pmt-venmo-background-color: #009cde;
  --pmt-venmo-border-color: #3d95ce;
  --pmt-card-background-color: var(--pmt-gray-200);
  --pmt-card-selected-border-color: var(--pmt-color-brand);
  --pmt-card-selected-border: 2px solid var(--pmt-card-selected-border-color);
  --pmt-card-hover-background: var(--pmt-hover-background-color);
  --pmt-list-background-color: var(--pmt-color-surface);

  /* Digital-wallet option surfaces/labels (kept in sync with dark.css) */
  --pmt-wallet-background-color: var(--pmt-color-surface);
  --pmt-wallet-label-color: var(--pmt-color-text);

  /* Info / notice banners (brand-tinted; fall back to the literals if color-mix is unsupported) */
  --pmt-info-icon-color: var(--pmt-color-brand);
  --pmt-info-border: color-mix(in srgb, var(--pmt-color-brand) 30%, var(--pmt-color-surface));
  --pmt-info-bg: color-mix(in srgb, var(--pmt-color-brand) 8%, var(--pmt-color-surface));
  --pmt-paragraph-text-opacity: 1;

  /* Checkbox & radio */
  --pmt-checkbox-checked-background-color: var(--pmt-color-brand);
  --pmt-checkbox-font-size: 16px;
  --pmt-checkbox-border-width: 2px;
  --pmt-checkbox-border-radius: var(--pmt-radius);
  --pmt-checkbox-position-top: 0px;
  --pmt-checkbox-position-left: 0px;
  --pmt-checkbox-height: 20px;
  --pmt-checkbox-width: 20px;
  --pmt-checkbox-label-padding-left: 36px;
  --pmt-checkbox-checked-position-top: 2px;
  --pmt-checkbox-checked-position-left: 7px;
  --pmt-checkbox-checked-border-width: 0 2.5px 2.5px 0;
  --pmt-radio-margin-left: 3px;

  /* Card icon positioning */
  --pmt-card-icon-position-top: -36px;
  --pmt-card-icon-position-right: 8px;

  /* Icon defaults */
  --pmt-icon-color: var(--pmt-color-brand);
  --pmt-icon-bg: rgba(0, 86, 179, 0.07);

  /* Link/action text color (brand on light surfaces). */
  --pmt-link-color: var(--pmt-color-brand);

  /* Radio button */
  --pmt-radio-size: 16px;
  --pmt-radio-border-width: 2px;
  --pmt-radio-border-color: var(--pmt-color-border-strong);
  --pmt-radio-background-color: var(--pmt-color-surface);
  --pmt-radio-checked-background-color: var(--pmt-color-brand);
  --pmt-radio-checked-border-color: var(--pmt-color-brand);
  --pmt-radio-hover-border-color: var(--pmt-primary-400);
  --pmt-radio-hover-background-color: var(--pmt-primary-50);
  --pmt-radio-disabled-border-color: var(--pmt-gray-300);
  --pmt-radio-disabled-background-color: var(--pmt-gray-100);
  --pmt-radio-label-color: var(--pmt-color-text);
  --pmt-radio-label-font-size: var(--pmt-font-size);
  --pmt-radio-label-font-weight: 400;
  --pmt-radio-margin-right: 8px;
  --pmt-radio-scale: 1.5;

  /* Accordion */
  --pmt-accordion-border-width: var(--pmt-border-width, 1px);
  --pmt-accordion-border-color: var(--pmt-border-color, var(--pmt-color-border));
  --pmt-accordion-border-radius: var(--pmt-border-radius, var(--pmt-radius));
  --pmt-accordion-background-color: var(--pmt-background-color, var(--pmt-color-surface));
  --pmt-accordion-padding: 14px 16px;
  --pmt-accordion-gap: var(--pmt-space-m);
  --pmt-accordion-font-size: var(--pmt-font-size, 16px);
  --pmt-accordion-font-color: var(--pmt-color-text);
  --pmt-accordion-summary-background: var(--pmt-background-color, var(--pmt-color-surface));
  --pmt-accordion-summary-border-bottom: 1px solid transparent;
  --pmt-accordion-summary-border-bottom-open: 1px solid var(--pmt-gray-200);
  --pmt-accordion-hover-background: var(--pmt-hover-background-color, var(--pmt-gray-50));
  --pmt-accordion-body-padding: var(--pmt-space-l);
  --pmt-accordion-icon-color: var(--pmt-color-black);
  --pmt-accordion-active-icon-color: var(--pmt-active-font-color, var(--pmt-color-brand-active));
  --pmt-accordion-label-font-weight: var(--pmt-input-label-font-weight, 500);
  --pmt-accordion-chevron-width: 0.55rem;
  --pmt-accordion-chevron-height: 0.55rem;
  --pmt-accordion-chevron-border-width: 2px;
  --pmt-accordion-chevron-color: var(--pmt-gray-500);
  --pmt-accordion-icon-size: 22px;
}
}