/* ════════════════════════════════════════════════════════════════════════════
   هویت بصری آلینکست — Allinext brand layer
   ────────────────────────────────────────────────────────────────────────────
   Loaded LAST on every page. It changes no markup and no layout: it retones the
   whole product from one place so every screen, from the sign-in page onward,
   speaks with the same voice.

   The brief this implements:
     · مدرن و دقیق — modern and precise
     · حذف عناصر غیرضروری — remove what is not needed; the message carries itself
     · انتقال پیچیدگی در قالبی ساده — convey the complexity simply

   What that meant in practice: the product was wearing a three-stop indigo →
   violet → fuchsia gradient on its sign-in page, its avatars, its card headers,
   its chat bubbles and its typing dots. That gradient is decoration, it is not
   the brand, and it is the single loudest thing on every screen. It is replaced
   here by the official two-stop brand gradient, used sparingly and only where a
   surface genuinely represents the brand.

   TO RETHEME THE ENTIRE PRODUCT, EDIT THE FOUR VALUES UNDER "brand" BELOW.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── brand ──────────────────────────────────────────────────────────────
     آبی نیمه‌شب تیره · Dark Midnight Blue — the primary.
     NOTE: the hex arrived truncated in the brand sheet; #003366 is the standard
     value for this colour name and pairs correctly with the Ocean Blue below.
     If the guide says otherwise, change this one line. */
  --amz-midnight:#003366;

  /* آبی اقیانوسی · Ocean Blue — CMYK 95 / 41 / 0 / 35. The gradient's far end. */
  --amz-ocean:#0862A6;

  /* نارنجی آفتابی · Vivid Orange — CMYK 0 / 74 / 100 / 0. The complement.
     Reserved for one thing at a time: the thing that wants a decision. */
  --amz-orange:#FF4200;

  /* The same orange, darkened until it passes AA as text on white (4.65:1).
     #FF4200 itself reaches only 3.48:1 and must never carry small text. */
  --amz-orange-ink:#D93800;

  /* Text that sits on an Ocean fill. White on light, near-black on the lifted dark-mode Ocean. */
  --amz-on-ocean:#FFFFFF;

  /* ── the official gradient ──────────────────────────────────────────── */
  --amz-gradient:linear-gradient(135deg, var(--amz-midnight) 0%, var(--amz-ocean) 100%);
  --amz-gradient-soft:linear-gradient(135deg, #06294F 0%, #0A4C80 100%);

  /* ── derived scale ──────────────────────────────────────────────────── */
  --amz-900:#00223F;
  --amz-800:var(--amz-midnight);
  --amz-700:#014A81;
  --amz-600:var(--amz-ocean);
  --amz-500:#1E7CC4;
  --amz-300:#7FBCE6;
  --amz-100:#D6E8F5;
  --amz-050:#EDF4FA;

  --amz-ink:var(--amz-midnight);
  --amz-soft:var(--amz-050);
  --amz-line:#D8E3EC;

  /* ── existing product tokens, remapped ──────────────────────────────────
     Every screen already reads these. Pointing them at the brand is what makes
     the change reach pages this file never mentions. */
  --primary-color:var(--amz-midnight);

  --app-primary:var(--amz-ocean);
  --app-primary-2:var(--amz-midnight);
  --app-primary-soft:var(--amz-050);

  --ai-primary:var(--amz-ocean);
  --ai-primary-strong:var(--amz-midnight);
  --ai-primary-soft:var(--amz-050);

  --ux-accent:var(--amz-ocean);
}

:root[data-theme="dark"]{
  /* Lifted for legibility on a dark ground: Ocean at #0862A6 reaches only
     1.9:1 there. These clear 6.5:1. The brand is the hue, not the exact hex. */
  --amz-midnight:#0B2138;
  --amz-ocean:#4FA3DC;
  --amz-orange:#FF8552;
  --amz-orange-ink:#FF9E75;
  --amz-on-ocean:#04101C;

  --amz-gradient:linear-gradient(135deg, #062A4A 0%, #0E5C93 100%);
  --amz-gradient-soft:linear-gradient(135deg, #08203A 0%, #0A3F66 100%);

  --amz-900:#06192B;
  --amz-800:#0B2138;
  --amz-700:#0E4571;
  --amz-600:#1B6FAF;
  --amz-500:#3E92CE;
  --amz-300:#84C2E9;
  --amz-100:#17324A;
  --amz-050:#12283C;

  --amz-ink:#B8D8EE;
  --amz-soft:#12283C;
  --amz-line:#22384E;

  --primary-color:var(--amz-ocean);
  --app-primary:var(--amz-ocean);
  --app-primary-2:var(--amz-300);
  --app-primary-soft:var(--amz-050);
  --ai-primary:var(--amz-ocean);
  --ai-primary-strong:var(--amz-300);
  --ai-primary-soft:var(--amz-050);
  --ux-accent:var(--amz-ocean);
}

/* ════════════════════════════════════════════════════════════════════════════
   Surfaces that were wearing the old gradient.
   Each one is listed rather than swept, so it stays obvious what carries the
   brand and what merely used to be purple.
   ════════════════════════════════════════════════════════════════════════════ */

/* The sign-in page: the first thing anyone sees of Amozen.
   It is a split shell — a light form beside a brand panel — so the gradient
   belongs on the panel, which is the surface that represents the company. The
   older full-page violet wash (still in style.css for .auth-page) is left
   overridden rather than removed, in case a page still uses the plain shell. */
.auth-page .auth-brand-panel{
  background:var(--amz-gradient) !important;
  color:#fff !important;
}
:root[data-theme="dark"] .auth-page .auth-brand-panel{ background:var(--amz-gradient-soft) !important; }
.auth-page .auth-kicker{
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.22) !important;
}
.auth-page:not(.enterprise-auth){ background:var(--amz-gradient) !important; }

/* The mark itself is allowed the gradient. */
.logo-circle,
.app-brand-mark,
.app-page .app-brand-mark{
  background:var(--amz-gradient) !important;
  box-shadow:0 6px 18px -8px rgba(0,51,102,.55) !important;
}

/* Avatars are identity, not brand: one flat, quiet fill reads better at 28px
   than a three-stop gradient nobody can see. */
.user-avatar,
.user-avatar-large,
.chat-avatar,
.app-avatar{
  background:var(--amz-midnight) !important;
  color:#fff !important;
  box-shadow:none !important;
}
.chat-message.user .chat-avatar{ background:var(--amz-ocean) !important; }
:root[data-theme="dark"] .user-avatar,
:root[data-theme="dark"] .user-avatar-large,
:root[data-theme="dark"] .chat-avatar,
:root[data-theme="dark"] .app-avatar{ background:var(--amz-700) !important; }

/* Utility gradients used across cards and headers. */
.bg-gradient-primary{ background:var(--amz-gradient) !important; }
.bg-gradient-warning{ background:linear-gradient(135deg, var(--amz-orange) 0%, #FF8552 100%) !important; }

/* A card header does not need to shout; the brand reads from the ink and the
   one accent, not from a coloured band across every card. */
.project-card .card-header{
  background:var(--amz-gradient) !important;
  color:#fff !important;
}

/* The person's own message is the one thing in a thread that should feel like
   the product speaking back. */
.chat-message.user .chat-bubble{
  background:var(--amz-gradient) !important;
  color:#fff !important;
}
.typing-indicator span{ background:var(--amz-ocean) !important; }

/* The dashboard hero kept a purple wash behind everything. */
.dashboard-hero{
  background:var(--amz-gradient) !important;
  color:#fff !important;
}
:root[data-theme="dark"] .dashboard-hero{ background:var(--amz-gradient-soft) !important; }

/* Left over from the violet era. */
.text-purple{ color:var(--amz-ocean) !important; }

/* ════════════════════════════════════════════════════════════════════════════
   Accent discipline.
   Vivid Orange marks exactly one class of thing across the whole product: work
   that is waiting for the owner's decision. Using it for anything else makes it
   stop meaning that.
   ════════════════════════════════════════════════════════════════════════════ */
.amz-attention,
.badge.bg-warning,
.app-admin-badge{
  background:color-mix(in srgb, var(--amz-orange) 14%, transparent) !important;
  color:var(--amz-orange-ink) !important;
  border:1px solid color-mix(in srgb, var(--amz-orange) 34%, transparent) !important;
}
:root[data-theme="dark"] .amz-attention,
:root[data-theme="dark"] .badge.bg-warning,
:root[data-theme="dark"] .app-admin-badge{
  background:color-mix(in srgb, var(--amz-orange) 18%, transparent) !important;
  color:var(--amz-orange-ink) !important;
}

/* ── controls ──────────────────────────────────────────────────────────── */
.btn-primary,
.btn-primary:visited,
.app-page .btn-primary,
.auth-page .auth-submit{
  background:var(--amz-ocean) !important; border-color:var(--amz-ocean) !important; color:var(--amz-on-ocean) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.app-page .btn-primary:hover,
.auth-page .auth-submit:hover{
  background:var(--amz-midnight) !important; border-color:var(--amz-midnight) !important; color:#fff !important;
}
.btn-outline-primary{ color:var(--amz-ocean); border-color:var(--amz-ocean); }
.btn-outline-primary:hover{ background:var(--amz-ocean); border-color:var(--amz-ocean); color:var(--amz-on-ocean); }
/* Dark mode: the lifted Ocean is light, so its text goes dark (white on it measured 2.76:1). */
:root[data-theme="dark"] :is(.btn-primary,.app-page .btn-primary,.auth-page .auth-submit):is(:hover,:focus){ background:var(--amz-300) !important; border-color:var(--amz-300) !important; color:var(--amz-on-ocean) !important; }
.stn-step.is-done .stn-dot, .rv-kbd.is-primary, .rv-btn.is-primary{ color:var(--amz-on-ocean) !important; }

a{ color:var(--amz-ocean); }
a:hover{ color:var(--amz-midnight); }
:root[data-theme="dark"] a:hover{ color:var(--amz-300); }

/* One focus ring for the whole product, in the brand, always visible. */
:focus-visible{
  outline:2px solid var(--amz-ocean) !important;
  outline-offset:2px !important;
}

/* ── restraint ─────────────────────────────────────────────────────────────
   "حذف عناصر غیرضروری". Shadows that were tinted violet now read as depth
   rather than as colour, which is what a shadow is for. */
.card,
.app-card,
.command-card{
  box-shadow:0 1px 2px rgba(0,34,63,.05), 0 10px 28px -14px rgba(0,34,63,.20);
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .app-card,
:root[data-theme="dark"] .command-card{
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
}

/* The review desk derives from the same four values rather than keeping a
   palette of its own. */
:root{
  --rv-brand:var(--amz-ocean);
  --rv-brand-deep:var(--amz-midnight);
  --rv-brand-soft:var(--amz-050);
  --rv-brand-ink:var(--amz-midnight);
  --rv-attention:var(--amz-orange-ink);
  --rv-attention-soft:color-mix(in srgb, var(--amz-orange) 12%, transparent);
}
:root[data-theme="dark"]{
  --rv-brand:var(--amz-ocean);
  --rv-brand-deep:var(--amz-300);
  --rv-brand-soft:var(--amz-050);
  --rv-brand-ink:var(--amz-300);
  --rv-attention:var(--amz-orange);
  --rv-attention-soft:color-mix(in srgb, var(--amz-orange) 18%, transparent);
}