/*!
 * FormPay - UI Kit (Tokens & Base)
 * Scope: Namespaced, dependency-free CSS tokens and base utilities
 * Source of truth: UI/src/styles/globals.css
 * Notes:
 * - Do NOT alter plugin logic; this file only provides styles and tokens
 * - Components rules live in assets/css/ui-components.css
 * - Minimal base utilities are namespaced to avoid conflicts
 */

/* Root tokens: consolidated from UI/src/styles/globals.css + formpay palette */
:root {
  /* Base scale */
  --font-size: 16px;

  /* Semantic colors */
  --background: #ffffff;
  --foreground: oklch(0.145 0 0);
  --card: #ffffff;
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: #030213;
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.95 0.0058 264.53);
  --secondary-foreground: #030213;
  --muted: #ececf0;
  --muted-foreground: #717182;
  --accent: #e9ebef;
  --accent-foreground: #030213;
  --destructive: #d4183d;
  --destructive-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
  --input: transparent;
  --input-background: #f3f3f5;
  --switch-background: #cbced4;
  --ring: oklch(0.708 0 0);

  /* Charts */
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);

  /* Radius */
  --radius: 0.625rem; /* 10px */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  /* Sidebar */
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: #030213;
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  /* formpay Plugin color palette (updated for better contrast and accessibility) */
  --formpay-primary-color: #88027F; /* Better contrast ratio */
  --formpay-primary-dark: #003049;
  --formpay-primary-light: #A78BFA;
  --formpay-accent-color: #E9D5FF;
  --formpay-success-color: #059669; /* Better contrast */
  --formpay-warning-color: #D97706; /* Better contrast */
  --formpay-danger-color: #DC2626; /* Better contrast */
  --formpay-info-color: #0891B2; /* Better contrast */
  --formpay-light-bg: #F9FAFB;
  --formpay-dark-text: #111827;
  --formpay-medium-text: #6B7280;
  --formpay-border-color: #E5E7EB;

  /* Derived formpay token aliases */
  --color-formpay-primary: var(--formpay-primary-color);
  --color-formpay-primary-dark: var(--formpay-primary-dark);
  --color-formpay-primary-light: var(--formpay-primary-light);
  --color-formpay-accent: var(--formpay-accent-color);
  --color-formpay-success: var(--formpay-success-color);
  --color-formpay-warning: var(--formpay-warning-color);
  --color-formpay-danger: var(--formpay-danger-color);
  --color-formpay-info: var(--formpay-info-color);
  --color-formpay-light-bg: var(--formpay-light-bg);
  --color-formpay-dark-text: var(--formpay-dark-text);
  --color-formpay-medium-text: var(--formpay-medium-text);
  --color-formpay-border: var(--formpay-border-color);

  /* UI v2 tokens: actions, gradients, statuses (from new designs) */
  --formpay-action-green: #16a34a;           /* primary action (e.g., Save) */
  --formpay-action-green-dark: #12893e;      /* hover/active */
  --formpay-action-green-contrast: #ffffff;  /* text/icon on action green */

  /* Gradient surfaces for headers/blocks (updated with new colors) */
  --formpay-gradient-primary: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 40%, #7C3AED 75%, #88027F 100%);
  --formpay-gradient-soft: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(124, 58, 237, 0.06) 100%);

  /* Status palettes (badges/alerts) - updated for better contrast */
  --formpay-status-success-bg: #D1FAE5;
  --formpay-status-success-fg: #065F46;
  --formpay-status-success-brd: #6EE7B7;

  --formpay-status-warning-bg: #FEF3C7;
  --formpay-status-warning-fg: #92400E;
  --formpay-status-warning-brd: #FCD34D;

  --formpay-status-danger-bg: #FEE2E2;
  --formpay-status-danger-fg: #991B1B;
  --formpay-status-danger-brd: #FCA5A5;

  --formpay-status-info-bg: #DBEAFE;
  --formpay-status-info-fg: #1E40AF;
  --formpay-status-info-brd: #93C5FD;

  --formpay-status-neutral-bg: var(--color-formpay-light-bg);
  --formpay-status-neutral-fg: var(--color-formpay-dark-text);
  --formpay-status-neutral-brd: var(--color-formpay-border);

  /* Typography */
  --formpay-font-weight-normal: 400;
  --formpay-font-weight-medium: 500;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Spacing scale (4px grid) */
  --formpay-space-1: 0.25rem;  /* 4px */
  --formpay-space-2: 0.5rem;   /* 8px */
  --formpay-space-3: 0.75rem;  /* 12px */
  --formpay-space-4: 1rem;     /* 16px */
  --formpay-space-5: 1.25rem;  /* 20px */
  --formpay-space-6: 1.5rem;   /* 24px */
  --formpay-space-7: 1.75rem;  /* 28px */
  --formpay-space-8: 2rem;     /* 32px */

  /* Shadows */
  --formpay-shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --formpay-shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --formpay-shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
}

/* Dark mode tokens (mirrors UI/src/styles/globals.css .dark) */
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);

  /* Dark-specific chart and sidebar */
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);

  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

/* Base: preserve WP Admin defaults; apply within .formpay-ui scope only */
html {
  font-size: var(--font-size);
}

/* Namespaced base container for plugin pages; add to top-level wrappers in views */
.formpay-ui {
  color: var(--foreground);
  background-color: var(--background);
}

/* Base typography (minimal, safe) */
.formpay-ui h1 { font-size: var(--text-2xl); font-weight: var(--formpay-font-weight-medium); line-height: 1.5; margin: 0 0 var(--formpay-space-4); color: var(--color-formpay-dark-text); }
.formpay-ui h2 { font-size: var(--text-xl);  font-weight: var(--formpay-font-weight-medium); line-height: 1.5; margin: var(--formpay-space-2) 0 var(--formpay-space-3); color: var(--color-formpay-dark-text); }
.formpay-ui h3 { font-size: var(--text-lg);  font-weight: var(--formpay-font-weight-medium); line-height: 1.5; margin: var(--formpay-space-2) 0 var(--formpay-space-2); color: var(--color-formpay-dark-text); }
.formpay-ui p  { font-size: var(--text-base); font-weight: var(--formpay-font-weight-normal); line-height: 1.6; margin: 0 0 var(--formpay-space-3); color: var(--color-formpay-medium-text); }
.formpay-ui label,
.formpay-ui button,
.formpay-ui input { font-size: var(--text-base); line-height: 1.5; }

/* Focus ring & accessibility */
.formpay-ui :where(a, button, input, select, textarea) {
  outline: none;
}
.formpay-ui :where(a, button, input, select, textarea):focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
  border-radius: var(--radius-sm);
}

/* Base layout utilities */
.formpay-ui .formpay-ui-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--formpay-space-4);
}

.formpay-ui .formpay-ui-section {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--color-formpay-border);
  border-radius: var(--radius);
  padding: var(--formpay-space-5);
  box-shadow: var(--formpay-shadow-sm);
  margin-block-end: var(--formpay-space-4);
}

/* Muted panels */
.formpay-ui .formpay-ui-panel-muted {
  background: var(--color-formpay-light-bg);
  border-color: var(--color-formpay-border);
}

/* Text utilities (subset) */
.formpay-ui .formpay-ui-text-muted { color: var(--color-formpay-medium-text); }
.formpay-ui .formpay-ui-text-accent { color: var(--color-formpay-accent); }
.formpay-ui .formpay-ui-text-success { color: var(--color-formpay-success); }
.formpay-ui .formpay-ui-text-warning { color: var(--color-formpay-warning); }
.formpay-ui .formpay-ui-text-danger { color: var(--color-formpay-danger); }
.formpay-ui .formpay-ui-text-info { color: var(--color-formpay-info); }

/* Spacing utilities (subset) */
.formpay-ui .formpay-ui-mb-1 { margin-block-end: var(--formpay-space-1); }
.formpay-ui .formpay-ui-mb-2 { margin-block-end: var(--formpay-space-2); }
.formpay-ui .formpay-ui-mb-3 { margin-block-end: var(--formpay-space-3); }
.formpay-ui .formpay-ui-mb-4 { margin-block-end: var(--formpay-space-4); }
.formpay-ui .formpay-ui-mb-5 { margin-block-end: var(--formpay-space-5); }
.formpay-ui .formpay-ui-mb-6 { margin-block-end: var(--formpay-space-6); }

.formpay-ui .formpay-ui-p-3 { padding: var(--formpay-space-3); }
.formpay-ui .formpay-ui-p-4 { padding: var(--formpay-space-4); }
.formpay-ui .formpay-ui-p-5 { padding: var(--formpay-space-5); }

/* Border radius utilities */
.formpay-ui .formpay-ui-rounded-sm { border-radius: var(--radius-sm); }
.formpay-ui .formpay-ui-rounded   { border-radius: var(--radius-md); }
.formpay-ui .formpay-ui-rounded-lg{ border-radius: var(--radius-lg); }
.formpay-ui .formpay-ui-rounded-xl{ border-radius: var(--radius-xl); }

/* Shadow utilities */
.formpay-ui .formpay-ui-shadow-sm { box-shadow: var(--formpay-shadow-sm); }
.formpay-ui .formpay-ui-shadow-md { box-shadow: var(--formpay-shadow-md); }
.formpay-ui .formpay-ui-shadow-lg { box-shadow: var(--formpay-shadow-lg); }

/* Gradient utilities and helpers (used across pages) */
.formpay-ui .formpay-ui-gradient-primary { background: var(--formpay-gradient-primary); color: #fff; }
.formpay-ui .formpay-ui-surface-soft { background: var(--formpay-gradient-soft); }
.formpay-ui .formpay-ui-header-gradient { background: var(--formpay-gradient-primary); color: #fff; }
.formpay-ui .formpay-ui-divider { height: 1px; background: var(--color-formpay-border); border: 0; margin-block: var(--formpay-space-3); }
.formpay-ui .formpay-ui-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.75rem; border: 1px solid var(--color-formpay-border); background: var(--color-formpay-light-bg); color: var(--color-formpay-dark-text); }

/* Form base (non-invasive; respects .form-table structure) */
.formpay-ui .form-table th {
  color: var(--color-formpay-dark-text);
  font-weight: var(--formpay-font-weight-medium);
}
.formpay-ui .form-table td p.description {
  color: var(--color-formpay-medium-text);
}
.formpay-ui input[type="text"],
.formpay-ui input[type="password"],
.formpay-ui select,
.formpay-ui textarea {
  background: var(--input-background);
  border: 1px solid var(--color-formpay-border);
  border-radius: var(--radius-sm);
  padding: var(--formpay-space-2) var(--formpay-space-3);
}

/* Table base (targets WP list table safely via wrapper usage) */
.formpay-ui .wp-list-table {
  border-color: var(--color-formpay-border);
}
.formpay-ui .wp-list-table th {
  background: var(--color-formpay-light-bg);
  color: var(--color-formpay-dark-text);
  font-weight: var(--formpay-font-weight-medium);
}
.formpay-ui .wp-list-table td {
  color: var(--color-formpay-dark-text);
}

/* Backward-compat: status badges retain original classes and receive unified visuals in ui-components.css
   (No styles here to avoid duplication; see assets/css/ui-components.css) */

/* RTL adjustments: prefer logical properties; add overrides when needed */
body.rtl .formpay-ui .formpay-ui-container { padding-inline: var(--formpay-space-4); }
body.rtl .formpay-ui .form-table th { text-align: end; }
body.rtl .formpay-ui .formpay-ui-section { direction: rtl; }