/**
 * Account4All — Theme Design System (reusable token layer) · v2
 * -------------------------------------------------------------------------
 * Refined per a ui-ux-pro-max audit for a premium fintech/SaaS/e-commerce feel:
 *   - Brand electric blue kept, but large actions use a refined royal-blue
 *     gradient (premium depth) instead of a flat, over-saturated fill.
 *   - Disciplined SLATE neutral scale (replaces the earlier muddy grays).
 *   - Layered, restrained elevation scale (no "glowy" shadows).
 *   - Consistent radius + 8pt spacing + focus-ring tokens.
 *   - IRANYekan (400/800) body, already @font-face'd in app.css.
 *
 * Additive & namespace-safe: tokens on :root; components scoped under `.a4a-ds`.
 */

/* Display face — Vazirmatn (variable), self-hosted from the theme's /fonts.
   Paired with IRANYekan (body) for a real display/body hierarchy. No CDN. */
@font-face {
  font-family: "Vazirmatn A4A";
  src: url("../../fonts/vazirmatn.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand blue (royal, premium) ---------------------------------- */
  --a4a-brand:          #1f1eff;   /* exact site is-info, used sparingly */
  --a4a-blue-700:       #1740c9;
  --a4a-blue-600:       #1746e6;
  --a4a-blue-500:       #2557ff;   /* primary action (refined royal) */
  --a4a-blue-500-hover: #1c46e0;
  --a4a-blue-500-active:#1740c9;
  --a4a-blue-400:       #5f82ff;   /* links / soft accents */
  --a4a-blue-200:       #b9c8ff;
  --a4a-blue-100:       #dbe3ff;
  --a4a-blue-50:        #eef2ff;   /* tint surface */
  --a4a-primary-grad:   linear-gradient(140deg, #3466ff 0%, #1f4fff 58%, #2f62ff 100%);

  /* ---- Navy (dark surfaces / hero) ---------------------------------- */
  --a4a-navy-900: #0b1330;
  --a4a-navy-800: #111c52;
  --a4a-navy-700: #182a76;

  /* ---- Slate neutrals ----------------------------------------------- */
  --a4a-ink:        #0f172a;  /* slate-900 — headings */
  --a4a-ink-2:      #1e293b;  /* slate-800 */
  --a4a-body:       #334155;  /* slate-700 — body */
  --a4a-muted:      #475569;  /* slate-600 — secondary (AA on white ~7:1) */
  --a4a-muted-2:    #64748b;  /* slate-500 — tertiary  (AA on white ~4.6:1) */
  --a4a-line:       #e2e8f0;  /* slate-200 — borders */
  --a4a-line-soft:  #eef2f7;  /* slate-100 — hairlines */
  --a4a-surface:    #ffffff;
  --a4a-canvas:     #f6f8fc;  /* app background */
  --a4a-canvas-2:   #eef2f9;

  /* ---- Semantic / channels ------------------------------------------ */
  --a4a-success: #16a34a;
  --a4a-success-50: #e7f7ee;
  --a4a-warn:    #f59e0b;
  --a4a-danger:  #dc2626;
  --a4a-telegram: #229ed9;
  --a4a-whatsapp: #25d366;

  /* ---- Typography ---------------------------------------------------- */
  --a4a-font: iranyekan, "Vazirmatn A4A", "Segoe UI", Tahoma, sans-serif;
  --a4a-font-display: "Vazirmatn A4A", iranyekan, "Segoe UI", Tahoma, sans-serif;
  --a4a-weight-normal: 400;
  --a4a-weight-bold: 800;
  --a4a-fs-display: clamp(2rem, 1.25rem + 3.2vw, 3.15rem);
  --a4a-fs-h2:      clamp(1.4rem, 1.05rem + 1.5vw, 2rem);
  --a4a-fs-h3:      clamp(1.12rem, 0.98rem + 0.7vw, 1.35rem);
  --a4a-fs-lead:    clamp(1rem, 0.96rem + 0.4vw, 1.16rem);
  --a4a-fs-body:    1rem;
  --a4a-fs-sm:      0.9rem;
  --a4a-fs-xs:      0.8rem;

  /* ---- Spacing (4pt) ------------------------------------------------- */
  --a4a-1: 0.25rem; --a4a-2: 0.5rem; --a4a-3: 0.75rem; --a4a-4: 1rem;
  --a4a-5: 1.5rem;  --a4a-6: 2rem;   --a4a-7: 3rem;    --a4a-8: 4rem;

  /* ---- Radius -------------------------------------------------------- */
  --a4a-r-sm: 10px;
  --a4a-r-md: 14px;
  --a4a-r-lg: 20px;
  --a4a-r-xl: 28px;
  --a4a-r-pill: 999px;

  /* ---- Elevation (layered, restrained) ------------------------------ */
  --a4a-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --a4a-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
  --a4a-shadow-md: 0 12px 28px -14px rgba(15, 23, 42, 0.20), 0 3px 8px -4px rgba(15, 23, 42, 0.08);
  --a4a-shadow-lg: 0 28px 60px -26px rgba(15, 23, 42, 0.32), 0 10px 24px -14px rgba(15, 23, 42, 0.16);
  --a4a-shadow-primary: 0 14px 28px -12px rgba(37, 87, 255, 0.48);
  --a4a-shadow-blue: var(--a4a-shadow-primary); /* back-compat alias */

  /* ---- Focus / motion ------------------------------------------------ */
  --a4a-ring: 0 0 0 3px rgba(37, 87, 255, 0.35);
  --a4a-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --a4a-dur: 0.2s;
}

/* =======================================================================
   Namespaced base (only inside `.a4a-ds`)
   ======================================================================= */
.a4a-ds {
  font-family: var(--a4a-font);
  color: var(--a4a-body);
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
}
.a4a-ds *, .a4a-ds *::before, .a4a-ds *::after { box-sizing: border-box; }

.a4a-ds .a4a-container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 0.4rem + 2.5vw, 2rem);
}

/* Buttons ---------------------------------------------------------------- */
.a4a-ds .a4a-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: inherit; font-size: 1rem; font-weight: var(--a4a-weight-bold); line-height: 1;
  padding: 0.9rem 1.6rem;
  border-radius: var(--a4a-r-pill);
  border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background-color var(--a4a-dur) var(--a4a-ease),
              transform var(--a4a-dur) var(--a4a-ease),
              box-shadow var(--a4a-dur) var(--a4a-ease),
              border-color var(--a4a-dur) var(--a4a-ease),
              filter var(--a4a-dur) var(--a4a-ease);
}
.a4a-ds .a4a-btn:focus-visible { outline: none; box-shadow: var(--a4a-ring); }
.a4a-ds .a4a-btn--primary {
  background: var(--a4a-primary-grad);
  color: #fff;
  box-shadow: var(--a4a-shadow-primary);
}
.a4a-ds .a4a-btn--primary:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 18px 34px -12px rgba(37, 87, 255, 0.55); color: #fff; }
.a4a-ds .a4a-btn--primary:active { transform: translateY(0); filter: brightness(0.97); }
.a4a-ds .a4a-btn--ghost {
  background: var(--a4a-surface); color: var(--a4a-ink);
  border-color: var(--a4a-line); box-shadow: var(--a4a-shadow-xs);
}
.a4a-ds .a4a-btn--ghost:hover { border-color: var(--a4a-blue-200); background: var(--a4a-blue-50); color: var(--a4a-ink); transform: translateY(-2px); }
.a4a-ds .a4a-btn--block { width: 100%; }

/* Cards ------------------------------------------------------------------ */
.a4a-ds .a4a-card {
  background: var(--a4a-surface);
  border: 1px solid var(--a4a-line);
  border-radius: var(--a4a-r-lg);
  box-shadow: var(--a4a-shadow-sm);
}

/* Pills / eyebrows ------------------------------------------------------- */
.a4a-ds .a4a-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--a4a-fs-xs); font-weight: var(--a4a-weight-bold);
  padding: 0.32rem 0.72rem; border-radius: var(--a4a-r-pill);
}
.a4a-ds .a4a-section { padding-block: clamp(2.75rem, 1.6rem + 4.5vw, 5rem); }
.a4a-ds .a4a-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--a4a-fs-sm); font-weight: var(--a4a-weight-bold);
  color: var(--a4a-blue-500); letter-spacing: 0.005em;
}
.a4a-ds .a4a-eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: var(--a4a-blue-500);
}

@media (prefers-reduced-motion: reduce) {
  .a4a-ds *, .a4a-ds *::before, .a4a-ds *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =======================================================================
   v3 — REDESIGN-PROGRAM CANON (additive; approved 2026-07-27)
   -----------------------------------------------------------------------
   Canon = the electric-blue system already shipped on Checkout and the
   My Account panel (source: User Panel handoff colors_and_type.css and
   checkout.css). Everything above is v2, kept untouched for back-compat.
   This section (a) publishes the canon vocabulary at :root for all new
   page CSS, and (b) re-points the v2 `--a4a-*` palette aliases to the
   canon so every consumer resolves one identity. Verified consumers of
   `--a4a-*` at re-point time: contact.css / templates/contact.php only
   (dormant v2 contact template; live contact does not use it).

   FUTURE DARK-MODE CONTRACT: new page CSS must express every color,
   shadow and border through var(--…) from this block — a future dark
   theme is then a single [data-theme="dark"] remap of these tokens.
   ======================================================================= */
:root {
  /* Brand */
  --brand-blue:        #000aff;
  --brand-blue-hover:  #0008c7;
  --brand-blue-accent: #004aff;  /* links, active states */
  --brand-info:        #1f1eff;  /* legacy site "is-info" */
  --brand-indigo:      #282895;
  --grad-primary: linear-gradient(45deg, #0d0eff, #5a59fe);
  --grad-logo:    linear-gradient(135deg, #00d2ff 0%, #1e8bff 50%, #1b4dff 100%);

  /* Ink / foreground scale */
  --ink-900: #0e121c;
  --fg-1: #1a1a1a;
  --fg-2: #585968;
  --fg-3: #898989;
  --fg-4: #9f9f9f;
  --fg-meta: #9998a6;

  /* Surfaces */
  --bg: #ffffff;
  --bg-soft: #f7f7fa;
  --bg-lilac: #f6f6fe;
  --surface: #ffffff;

  /* Lines / hairlines */
  --line: #eff1f7;
  --line-2: #e9e9e9;
  --pale-grey: #e5e5e9;
  --pale-lilac: #d2d2ff;
  --notice-bg: #e1e6ff;

  /* Status */
  --success: #06a731;   --success-bg: #e8f8ee;
  --danger:  #d20000;   --danger-bg:  #fde8e8;
  --warning: #ffd067;   --warning-bg: #fff6e1;  --warning-fg: #9a6300;
  --pending: #6961ff;   --pending-bg: #f5f3ff;

  /* Typography (IRANYekan files ship 400+800; 500/700 render via the
     variable Vazirmatn fallback or synthesis — prefer 400/700/800) */
  --font-sans: "IRANYekan", "Vazirmatn A4A", Vazirmatn, Tahoma, system-ui, sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-extrabold: 800;
  --fs-display: 40px; --fs-h1: 32px; --fs-h2: 26px; --fs-h3: 22px; --fs-h4: 18px;
  --fs-lead: 20px; --fs-body: 16px; --fs-sm: 14px; --fs-xs: 12px;
  --lh-tight: 1.3; --lh-snug: 1.5; --lh-body: 1.9; /* Persian breathes */

  /* Radius */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 15px;
  --r-xl: 20px; --r-2xl: 40px; --r-pill: 999px;

  /* Elevation */
  --sh-card:   0 8px 32px rgba(41, 43, 62, 0.08);
  --sh-card-2: 0 10px 48px rgba(41, 43, 62, 0.10);
  --sh-blue:   0 8px 48px 0 rgba(74, 104, 255, 0.15);
  --sh-pop:    0 8px 16px rgba(10, 10, 10, 0.10);
  --sh-meta:   0 6px 18px rgba(197, 197, 255, 0.6);

  /* Focus / motion (checkout-observed focus ring) */
  --focus-ring: 0 0 0 3px rgba(0, 74, 255, 0.12);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.2s;
}

/* v3 re-point of v2 aliases → canon (cascade: this later block wins).
   Sole `--a4a-*` consumers verified dormant (contact v2). */
:root {
  --a4a-blue-500:        var(--brand-blue);
  --a4a-blue-500-hover:  var(--brand-blue-hover);
  --a4a-blue-500-active: var(--brand-blue-hover);
  --a4a-blue-400:        var(--brand-blue-accent);
  --a4a-primary-grad:    var(--grad-primary);
  --a4a-ink:       var(--ink-900);
  --a4a-ink-2:     var(--fg-1);
  --a4a-body:      var(--fg-2);
  --a4a-muted:     var(--fg-3);
  --a4a-muted-2:   var(--fg-4);
  --a4a-line:      var(--line);
  --a4a-line-soft: var(--line);
  --a4a-canvas:    var(--bg-soft);
  --a4a-canvas-2:  var(--bg-lilac);
  --a4a-success:   var(--success);
  --a4a-danger:    var(--danger);
  --a4a-font:      var(--font-sans);
  --a4a-r-sm: var(--r-sm);
  --a4a-r-md: var(--r-md);
  --a4a-r-lg: var(--r-lg);
  --a4a-r-xl: var(--r-xl);
  --a4a-shadow-primary: var(--sh-blue);
  --a4a-ring: var(--focus-ring);
}

/* v3 component nudges (additive overrides; keep .a4a-ds namespace) */
.a4a-ds .a4a-btn--primary:hover {
  box-shadow: 0 12px 30px -10px rgba(0, 10, 255, 0.35);
}