/* Pixels Art — selected identity tokens — warm / balanced, 24 October 2026.
   Base colors: edit these five values only. Components consume semantic roles. */
:root {
  --pa-color-1: #141311; /* page */
  --pa-color-2: #201F1C; /* surface */
  --pa-color-3: #2B2924; /* raised */
  --pa-color-4: #F4CF46; /* accent */
  --pa-color-5: #F5F2E9; /* text */
  --pa-bg: var(--pa-color-1);
  --pa-surface: var(--pa-color-2);
  --pa-surface-raised: var(--pa-color-3);
  --pa-accent: var(--pa-color-4);
  --pa-text: var(--pa-color-5);
  --pa-text-muted: color-mix(in srgb, var(--pa-text) 72%, var(--pa-surface));
  --pa-border: color-mix(in srgb, var(--pa-text) 16%, var(--pa-surface));
  --pa-control-border: color-mix(in srgb, var(--pa-text) 34%, var(--pa-bg));
  --pa-selected-bg: color-mix(in srgb, var(--pa-accent) 12%, var(--pa-surface));
  --pa-on-accent: var(--pa-bg); /* Recheck contrast when changing the palette */
  --pa-menu-bg: var(--pa-surface);
  --pa-field-bg: var(--pa-bg);
  --pa-model-art-scrim: linear-gradient(90deg,color-mix(in srgb,var(--pa-bg) 75.2%,transparent) 0%,color-mix(in srgb,var(--pa-bg) 62.4%,transparent) 25%,color-mix(in srgb,var(--pa-bg) 56%,transparent) 50%,color-mix(in srgb,var(--pa-bg) 62.4%,transparent) 75%,color-mix(in srgb,var(--pa-bg) 75.2%,transparent) 100%);
  --pa-focus: var(--pa-accent);
  --pa-radius-control: 6px;
  --pa-radius-card: 15px;
  --pa-radius-menu: var(--pa-radius-control);
  --pa-disabled-opacity: .48;
  --pa-space-1: 4px; --pa-space-2: 8px; --pa-space-3: 12px;
  --pa-space-4: 16px; --pa-space-5: 24px; --pa-space-6: 32px;
  --pa-footer-rule-space: calc(var(--pa-space-4) + var(--pa-space-3));
  --pa-page-width: 1360px;
  --pa-page-gutter: 48px;
  --pa-font-ui: Inter, Tajawal, Arial, sans-serif;
  --pa-control-height: 44px;
  --pa-header-logo-height: 44px;
  --pa-header-block-space: 23px;
  --pa-nav-font-size: 14px;
  --pa-nav-font-weight: 700;
  /* Compatibility aliases: remove component-level literal overrides during migration. */
  --pa-obsidian: var(--pa-bg);
  --pa-panel: var(--pa-surface);
  --pa-charcoal: var(--pa-surface);
  --pa-panel-strong: var(--pa-surface-raised);
  --pa-gold: var(--pa-accent);
  --pa-pearl: var(--pa-text);
  --pa-muted: var(--pa-text-muted);
  --pa-line: var(--pa-border);
  --pa-border-control: var(--pa-control-border);
  --pa-select-surface: var(--pa-field-bg);
  --pa-select-text: var(--pa-text);
}
html[lang=ar] { --pa-font-ui: Tajawal, Inter, Arial, sans-serif; }
@media(max-width:1050px){:root{--pa-page-gutter:24px}}
@media(max-width:760px){:root{--pa-page-gutter:16px}}
/* Status colors, payment logos and content images are separately governed, not recolored by a blanket rule. */

/* Functional colors are centralized separately from decorative brand colors. */
:root {
 --pa-status-error:#FF6B6B; --pa-status-success:#8BE0B4;
 --pa-status-warning:var(--pa-accent); --pa-status-info:#A9D6E5;
 --pa-danger:var(--pa-status-error); --pa-error:var(--pa-status-error);
 --pa-success:var(--pa-status-success); --pa-warning:var(--pa-status-warning);
 --pa-error-bg:color-mix(in srgb,var(--pa-status-error) 10%,var(--pa-surface));
 --pa-success-bg:color-mix(in srgb,var(--pa-status-success) 10%,var(--pa-surface));
 --pa-warning-bg:var(--pa-selected-bg);
 --pa-info-bg:color-mix(in srgb,var(--pa-status-info) 10%,var(--pa-surface));
 --pa-shadow:color-mix(in srgb,var(--pa-bg) 65%,transparent);
 --pa-overlay:color-mix(in srgb,var(--pa-bg) 86%,transparent);
 --pa-divider:var(--pa-border); --pa-ink:var(--pa-on-accent);
 --pa-copper:var(--pa-accent); --pa-teal:var(--pa-accent); --pa-mint:var(--pa-accent);
 --pa-text-body:16px; --pa-text-label:14px; --pa-text-caption:12px;
 --pa-text-title:30px; --pa-text-section:24px; --pa-text-card:20px;
 --pa-space:8px;
}