/* ======================================================================
   AquariumLesson Member Experience System
   Phase 1: Token Bridge / Compatibility Layer

   Purpose:
   - Introduce canonical member tokens.
   - Keep existing local token names alive as aliases.
   - Preserve current page visuals as closely as possible.
   - Do not style components directly in this phase.
   ====================================================================== */

#alMemberArea {
  /* Brand and ecosystem colors */
  --almx-color-brand: #2c6b4a;
  --almx-color-brand-strong: #24543c;
  --almx-color-brand-soft: rgba(44, 107, 74, 0.08);
  --almx-color-moss: #2c6b4a;
  --almx-color-moss-light: #5ca892;
  --almx-color-aqua: #5ca892;
  --almx-color-water: #2563eb;
  --almx-color-water-light: #60a5fa;
  --almx-color-organic-surface: #f8fafc;
  --almx-color-deep-slate: #0f172a;

  /* Semantic colors */
  --almx-color-success: #16a34a;
  --almx-color-warning: #d97706;
  --almx-color-danger: #dc2626;
  --almx-color-info: #2563eb;

  /* Text, surfaces, borders */
  --almx-color-bg: #ffffff;
  --almx-color-surface: #ffffff;
  --almx-color-surface-muted: #f8fafc;
  --almx-color-surface-raised: #ffffff;
  --almx-color-border: #e6e8ec;
  --almx-color-border-soft: rgba(15, 23, 42, 0.08);
  --almx-color-text: #0f172a;
  --almx-color-text-muted: #64748b;
  --almx-color-text-soft: #94a3b8;

  /* Spacing */
  --almx-space-0: 0;
  --almx-space-1: 4px;
  --almx-space-2: 8px;
  --almx-space-3: 12px;
  --almx-space-4: 16px;
  --almx-space-5: 24px;
  --almx-space-6: 32px;
  --almx-space-7: 40px;
  --almx-space-8: 48px;

  /* Radius */
  --almx-radius-xs: 8px;
  --almx-radius-sm: 12px;
  --almx-radius-md: 14px;
  --almx-radius-lg: 18px;
  --almx-radius-xl: 24px;
  --almx-radius-2xl: 26px;
  --almx-radius-pill: 999px;

  /* Shadows and glows */
  --almx-shadow-xs: 0 1px 0 rgba(16, 24, 40, 0.04);
  --almx-shadow-sm: 0 8px 24px rgba(16, 24, 40, 0.06);
  --almx-shadow-md: 0 12px 30px rgba(16, 24, 40, 0.10);
  --almx-shadow-lg: 0 20px 60px rgba(16, 24, 40, 0.14);
  --almx-glow-brand: 0 0 0 4px rgba(44, 107, 74, 0.14);
  --almx-glow-water: 0 0 0 4px rgba(37, 99, 235, 0.14);
  --almx-glow-danger: 0 0 0 4px rgba(220, 38, 38, 0.14);

  /* Motion */
  --almx-motion-fast: 120ms;
  --almx-motion-med: 170ms;
  --almx-motion-slow: 220ms;
  --almx-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --almx-motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --almx-header-h: var(--al-header-h, 72px);
  --almx-content-max: 1120px;
  --almx-shell-max: 1200px;
  --almx-sidebar-w: var(--al-sidebar-w, 72px);
  --almx-sidebar-gap: var(--al-sidebar-gap, 16px);
  --almx-rail-left: 16px;
  --almx-rail-w: 260px;
  --almx-shell-gap-desktop: 28px;
  --almx-shell-gap-tablet: 22px;
  --almx-shell-gap: clamp(var(--almx-shell-gap-tablet), 1.6vw, var(--almx-shell-gap-desktop));
  --almx-shell-content-inset: 0px;
  --almx-page-gutter: 16px;
  --almx-control-h: 42px;

  /* Component aliases */
  --almx-card-bg: var(--almx-color-surface);
  --almx-card-border: var(--almx-color-border);
  --almx-card-radius: var(--almx-radius-lg);
  --almx-card-shadow: var(--almx-shadow-md);

  --almx-button-primary-bg: var(--almx-color-brand);
  --almx-button-primary-bg-hover: var(--almx-color-brand-strong);
  --almx-button-primary-text: #ffffff;
  --almx-button-ghost-bg: var(--almx-color-surface-muted);
  --almx-button-ghost-text: var(--almx-color-text);
  --almx-button-radius: var(--almx-radius-md);
  --almx-button-height: var(--almx-control-h);

  --almx-chip-bg: var(--almx-color-surface-muted);
  --almx-chip-border: var(--almx-color-border-soft);
  --almx-chip-text: var(--almx-color-text-muted);
  --almx-chip-radius: var(--almx-radius-pill);

  --almx-tab-bg: transparent;
  --almx-tab-active-bg: var(--almx-color-surface);
  --almx-tab-text: var(--almx-color-text-muted);
  --almx-tab-active-text: var(--almx-color-text);
  --almx-tab-border: var(--almx-color-border-soft);
  --almx-tab-radius: var(--almx-radius-md);

  --almx-form-bg: var(--almx-color-surface);
  --almx-form-border: rgba(15, 23, 42, 0.14);
  --almx-form-text: var(--almx-color-text);
  --almx-form-placeholder: rgba(15, 23, 42, 0.45);
  --almx-form-radius: var(--almx-radius-md);
  --almx-form-focus-ring: var(--almx-glow-brand);
}

/* Existing AL base token aliases. Kept compatible with al-members.modern.css. */
#alMemberArea {
  --al-bg: var(--almx-color-bg) !important;
  --al-surface: var(--almx-color-surface) !important;
  --al-surface-2: var(--almx-color-surface-muted) !important;
  --al-border: var(--almx-color-border) !important;
  --al-text: var(--almx-color-text) !important;
  --al-muted: var(--almx-color-text-muted) !important;
  --al-soft: var(--almx-color-text-soft) !important;
  --al-r1: var(--almx-radius-md) !important;
  --al-r2: var(--almx-radius-lg) !important;
  --al-r3: var(--almx-radius-xl) !important;
  --al-sh0: var(--almx-shadow-xs) !important;
  --al-sh1: var(--almx-shadow-md) !important;
  --al-sh2: var(--almx-shadow-lg) !important;
  --al-1: var(--almx-space-2) !important;
  --al-2: var(--almx-space-3) !important;
  --al-3: var(--almx-space-4) !important;
  --al-4: var(--almx-space-5) !important;
  --al-5: var(--almx-space-6) !important;
  --al-6: var(--almx-space-7) !important;
  --al-control-h: var(--almx-control-h) !important;
  --al-control-r: var(--almx-button-radius) !important;
  --al-ring: var(--almx-glow-brand) !important;
  --al-content-max: var(--almx-content-max) !important;
}

/* Tanks keeps its blue interaction identity while inheriting the system scale. */
#alMemberArea.al-tanks {
  --almx-color-accent: var(--almx-color-water);
  --almx-color-accent-2: var(--almx-color-water-light);
  --almx-form-focus-ring: var(--almx-glow-water);

  --al-tanks-success: var(--almx-color-success) !important;
  --al-tanks-warn: var(--almx-color-warning) !important;
  --al-tanks-danger: var(--almx-color-danger) !important;
  --al-tanks-surface-1: var(--almx-color-surface) !important;
  --al-tanks-surface-2: var(--almx-color-surface-muted) !important;
  --al-tanks-surface-3: #f1f5f9 !important;
  --al-tanks-border: var(--almx-color-border-soft) !important;
  --al-tanks-text: var(--almx-color-text) !important;
  --al-tanks-muted: var(--almx-color-text-muted) !important;
  --al-tanks-pad-m: 10px;
  --al-tanks-pad-d: var(--almx-space-5);
  --al-tanks-max: var(--almx-shell-max);
  --al-tanks-context-w: 380px;
  --al-tanks-trans-dur: var(--almx-motion-med);
  --al-tanks-trans-ease: var(--almx-motion-ease);
}

/* Dashboard bridge: preserve the current dashboard palette, then alias --dash-* to it. */
#alMemberArea #alDash.al-dash--premium {
  --almx-dash-bg: #f5f7f6;
  --almx-dash-surface: #ffffff;
  --almx-dash-surface-soft: #f8fbfa;
  --almx-dash-surface-tint: #eef6f2;
  --almx-dash-line: #dce7e1;
  --almx-dash-line-strong: #c8d8d0;
  --almx-dash-text: #16211d;
  --almx-dash-text-soft: #44544e;
  --almx-dash-text-muted: #6c7d76;
  --almx-dash-brand: #2f7d5b;
  --almx-dash-brand-strong: #1f6948;
  --almx-dash-brand-soft: #e8f4ee;
  --almx-dash-blue: #dff1f8;
  --almx-dash-blue-strong: #327a93;
  --almx-dash-rose: #f8e8ec;
  --almx-dash-rose-strong: #a85168;
  --almx-dash-violet: #efebfb;
  --almx-dash-violet-strong: #6d5ea8;

  --dash-bg: var(--almx-dash-bg);
  --dash-surface: var(--almx-dash-surface);
  --dash-surface-soft: var(--almx-dash-surface-soft);
  --dash-surface-tint: var(--almx-dash-surface-tint);
  --dash-line: var(--almx-dash-line);
  --dash-line-strong: var(--almx-dash-line-strong);
  --dash-text: var(--almx-dash-text);
  --dash-text-soft: var(--almx-dash-text-soft);
  --dash-text-muted: var(--almx-dash-text-muted);
  --dash-brand: var(--almx-dash-brand);
  --dash-brand-strong: var(--almx-dash-brand-strong);
  --dash-brand-soft: var(--almx-dash-brand-soft);
  --dash-blue: var(--almx-dash-blue);
  --dash-blue-strong: var(--almx-dash-blue-strong);
  --dash-rose: var(--almx-dash-rose);
  --dash-rose-strong: var(--almx-dash-rose-strong);
  --dash-violet: var(--almx-dash-violet);
  --dash-violet-strong: var(--almx-dash-violet-strong);
  --dash-shadow: 0 18px 50px rgba(20, 34, 27, 0.08);
  --dash-shadow-soft: 0 8px 24px rgba(20, 34, 27, 0.05);
  --dash-radius: var(--almx-radius-xl);
  --dash-radius-sm: var(--almx-radius-lg);
  --dash-gap: 20px;
  --dash-pad-inline-mobile: 10px;
  --dash-pad-inline-desktop: var(--almx-space-5);
}

/* Account details bridge. */
#alMemberArea #alAccount {
  --al-ac-surface: var(--almx-color-surface);
  --al-ac-muted: var(--almx-color-surface-muted);
  --al-ac-elevated: #f9fafb;
  --al-ac-border: #e5e7eb;
  --al-ac-ink: var(--almx-color-text);
  --al-ac-sub: var(--almx-color-text-muted);
  --al-ac-soft: #9ca3af;
  --al-ac-brand: var(--almx-color-brand);
  --al-ac-brand-soft: var(--almx-color-brand-soft);
  --al-ac-brand-border: rgba(44, 107, 74, 0.35);
  --al-ac-danger: #e11d48;
  --al-ac-radius-lg: var(--almx-radius-lg);
  --al-ac-radius-md: var(--almx-radius-sm);
  --al-ac-radius-pill: var(--almx-radius-pill);
  --al-ac-shadow-soft: 0 18px 35px rgba(15, 23, 42, 0.08);
  --al-ac-shadow-subtle: 0 10px 25px rgba(15, 23, 42, 0.05);
  --al-ac-gap: 1.5rem;
  --al-ac-transition-fast: 160ms ease-out;
  --al-ac-transition-med: var(--almx-motion-slow) var(--almx-motion-ease-out);
}

/* Settings inline-style bridge. Higher specificity keeps this token alias stable. */
body #alMemberArea.alpp-shell--settings {
  --al-set-max: 1160px;
  --al-set-radius-xl: var(--almx-radius-2xl);
  --al-set-radius-lg: 20px;
  --al-set-border: var(--almx-color-border-soft);
  --al-set-border-strong: rgba(44, 107, 74, 0.18);
  --al-set-muted: #667085;
  --al-set-ink: #111827;
  --al-set-soft: #f7f9f8;
  --al-set-brand: var(--almx-color-brand);
  --al-set-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  --al-set-shadow-soft: 0 10px 26px rgba(15, 23, 42, 0.05);
}

/* Header bridge: keep the header independently scoped but token-compatible. */
html #alHeader {
  --almx-header-h: var(--al-header-h, 72px);
  --al-header-accent: var(--almx-color-brand, #2c6b4a);
  --al-header-ink: #102018;
  --al-header-muted: #5f6f67;
  --al-header-border: rgba(20, 33, 27, 0.10);
  --al-header-soft: #f6f8f6;
}

/* Auth modal bridge. Values match the current auth-local palette. */
html #al-auth-neo {
  --al-brand: var(--almx-color-brand, #2c6b4a);
  --al-brand-700: var(--almx-color-brand-strong, #24543c);
  --al-ink: var(--almx-color-text, #0f172a);
  --al-sub: #6b7280;
  --al-bg: var(--almx-color-surface, #ffffff);
  --al-border: rgba(15, 23, 42, 0.12);
  --al-ring: rgba(59, 130, 246, 0.22);
  --al-header-h: var(--almx-header-h, 64px);
}