/* =========================================================
   ZOMNIVERSE / ZAR DESIGN TOKENS
   File: Styles/modes/zar/zar_token.css

   Purpose:
   - Central color palette for ZAR and authentication surfaces
   - Shared light, dark, accent, border, shadow, and typography tokens
   - Contains variables only; component layout remains in component CSS
========================================================= */

:root {
  /* =======================================================
     BRAND ACCENTS
  ======================================================= */

  --zar-blue: #7fb5ff;
  --zar-blue-strong: #6ea8ff;
  --zar-violet: #8b7cff;
  --zar-violet-deep: #7154c5;
  --zar-violet-dark: #49368e;
  --zar-green: #8fd4bd;
  --zar-green-bright: #7ee7c7;
  --zar-cyan: #48a7c7;
  --zar-danger: #ff9ca9;
  --zar-danger-strong: #e11d48;

  /* =======================================================
     LIGHT SYSTEM SURFACES
  ======================================================= */

  --zar-light-100: #ffffff;
  --zar-light-075: #fcfdff;
  --zar-light-050: #f8faff;
  --zar-light-040: #f7f9fd;
  --zar-light-025: #f4f7fc;
  --zar-light-000: #eef3fb;
  --zar-light-025: #eaeff6;

  --zar-surface-light:
    radial-gradient(
      circle at 5% 0%,
      rgba(111, 212, 190, 0.08),
      transparent 34%
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(113, 145, 255, 0.08),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(252, 253, 255, 0.995),
      rgba(244, 247, 252, 0.995)
    );

  --zar-surface-light-mobile:
    radial-gradient(
      circle at 10% 0%,
      rgba(111, 212, 190, 0.07),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      var(--zar-light-050),
      var(--zar-light-000)
    );

  --zar-surface-white-card:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.82),
      rgba(247, 249, 253, 0.92)
    );

  /* =======================================================
     TEXT
  ======================================================= */

  --zar-text-on-light: #111827;
  --zar-text-on-light-strong: #111827;
  --zar-text-on-light-secondary: #526077;
  --zar-text-on-light-muted: #64748b;
  --zar-text-on-light-soft: #68778d;
  --zar-text-on-light-card: #172033;
  --zar-text-on-light-card-secondary: #5b687c;
  --zar-text-on-light-detail: #4f5d72;
  --zar-text-on-light-detail-strong: #263449;

  --zar-text-on-dark: #f5f2ff;
  --zar-text-on-dark-strong: #ffffff;
  --zar-text-on-dark-secondary: rgba(218, 216, 239, 0.74);
  --zar-text-on-dark-label: rgba(239, 236, 255, 0.9);
  --zar-text-on-dark-detail: rgba(213, 208, 235, 0.76);
  --zar-text-on-dark-detail-strong: #e9e1ff;

  --zar-link: #3f4e91;

  /* =======================================================
     BORDERS
  ======================================================= */

  --zar-border-light: #dbe2ed;
  --zar-border-input: #c9d2e1;
  --zar-border-control: #d5dce8;
  --zar-border-control-hover: #b8c3d4;

  --zar-border-shell: rgba(146, 165, 204, 0.22);
  --zar-border-dark-card: rgba(103, 83, 184, 0.34);
  --zar-border-dark-soft: rgba(196, 176, 255, 0.16);
  --zar-border-detail: rgba(148, 163, 184, 0.22);
  --zar-border-badge: rgba(184, 153, 255, 0.28);
  --zar-border-input-dark: rgba(180, 164, 225, 0.27);
  --zar-border-submit: rgba(194, 169, 255, 0.3);

  /* =======================================================
     BACKDROPS
  ======================================================= */

  --zar-backdrop:
    radial-gradient(
      circle at 50% 40%,
      rgba(59, 83, 137, 0.14),
      transparent 46%
    ),
    rgba(3, 7, 16, 0.78);

  --zar-backdrop-mobile: rgba(3, 7, 16, 0.84);

  /* =======================================================
     SHADOWS
  ======================================================= */

  --zar-shadow-shell:
    0 34px 100px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

  --zar-shadow-dark-card:
    0 18px 44px rgba(44, 35, 91, 0.22),
    0 0 0 1px rgba(153, 120, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);

  --zar-shadow-white-card:
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

  --zar-shadow-submit:
    0 12px 28px rgba(77, 54, 147, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);

  --zar-shadow-submit-hover:
    0 16px 32px rgba(77, 54, 147, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);

  --zar-shadow-focus:
    0 0 0 3px rgba(125, 99, 202, 0.16);

  /* =======================================================
     RADII
  ======================================================= */

  --zar-radius-shell: 28px;
  --zar-radius-card: 22px;
  --zar-radius-mobile-card: 20px;
  --zar-radius-control: 15px;
  --zar-radius-input: 13px;
  --zar-radius-submit: 14px;
  --zar-radius-pill: 999px;

  /* =======================================================
     FOCUS
  ======================================================= */

  --zar-focus-color: rgba(119, 91, 196, 0.42);
  --zar-focus-outline: 3px solid var(--zar-focus-color);
  --zar-focus-offset: 3px;

  /* =======================================================
     AUTHENTICATION SEMANTIC TOKENS
  ======================================================= */

  --zar-auth-backdrop: var(--zar-backdrop);
  --zar-auth-shell-bg: var(--zar-surface-light);
  --zar-auth-shell-bg-mobile: var(--zar-surface-light-mobile);
  --zar-auth-shell-text: var(--zar-text-on-light);

  --zar-auth-private-bg: var(--zar-surface-dark-elevated);
  --zar-auth-private-text: var(--zar-text-on-dark);
  --zar-auth-private-heading: var(--zar-text-on-dark-strong);

  --zar-auth-google-bg: var(--zar-surface-white-card);
  --zar-auth-google-bg-mobile: var(--zar-light-100);
  --zar-auth-google-text: var(--zar-text-on-light-card);
}