/*!
 * ============================================================================
 * Copyright (c) 2025 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: design-tokens.css
 * @TITLE: ZENATH - Design Tokens
 * @DESCRIPTION: CSS custom properties defining the full design system token set. All component stylesheets must reference these tokens exclusively - no hardcoded hex values, magic numbers, or bare pixel values.
 * @AUTHOR: Ary van der Pijl
 * @COMPANY: ATH SOLUTIONS (PTY) LTD
 * @WEBSITE: https://www.ath.solutions/
 * @EMAIL: info@ath.solutions
 * @COPYRIGHT: All Rights Reserved
 * @LICENSE: ATH SOLUTIONS - PROPRIETARY SOFTWARE LICENCE AGREEMENT (https://www.ath.solutions/documents/ath_solutions_software_licence_agreement.pdf)
 *
 * BEGIN CHANGELOG
 * @IMPORTANT NOTICE: Developers working on these files MUST update and maintain the Developers Change Log, failure to do is not an option:
 * !==================================================================================================================================================================
 * VERSION 1.0.0.6
 * - File Modified | Ary van der Pijl | 2026-08-04 | ATH-STUDIOS-014 | Phase 24 (Dark Mode & Theme System) - added a background-color/color/border-color transition (var(--transition-base), 150ms) on * so switching data-theme/data-skin fades instead of flipping instantly, per spec 24.1. Scoped to colour properties only; the existing prefers-reduced-motion block already neutralises it for users who need that.
 * VERSION 1.0.0.5
 * - File Modified | Ary van der Pijl | 2026-08-04 | ATH-STUDIOS-014 | Phase 22 (WCAG 2.2 AA) - --sidebar-text (inactive nav-link colour, navy-300 #911f2e) against --sidebar-bg (navy-700 #000000) computes to 2.44:1 - fails both the 4.5:1 text minimum AND the 3:1 non-text/UI-component minimum, on every nav link on every authenticated page. Changed to a lighter rose (#c9707e, same hue family) that computes to 6.10:1 against black - still reads as "dimmed" relative to the white hover/gold active states without failing contrast.
 * VERSION 1.0.0.4
 * - File Modified | Ary van der Pijl | 2026-07-26 | ATH-STUDIOS-006 | Added glassmorphism tokens (--glass-bg/--glass-border/--glass-blur/--glass-shadow, light + dark variants) and --app-bg-gradient (soft primary/accent blobs behind --color-bg via color-mix(), so it auto-follows the active tenant skin) - brings WEB's surfaces in line with the glass treatment already shipped on MOBILE, which was skin-agnostic there for the same reason. |
 * VERSION 1.0.0.3
 * - File Modified | Ary van der Pijl | 2026-07-22 | ATH-STOCK-011 | Dashtreme look-and-feel: swapped --font-sans from Inter to Roboto |
 * VERSION 1.0.0.2
 * - File Modified | Ary van der Pijl | 2026-06-16 | ATH-COMPLIANCE-001 | Applied ATH Solutions 2026 standards: updated header to use /*! format per G-17 |
 * VERSION 1.0.0.1
 * - File Modified | Ary van der Pijl | 2026-06-16 | DS-001 | Replace generic indigo primary with ZENATH navy/gold brand palette; add extended lodge colour scale; add auth layout tokens |
 * - File Created | Ary van der Pijl | 2026-05-01 | ATH-STOCK-001 | Initial file |
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */

:root {
  /* ── Brand Palette ────────────────────────────────────────────────────────── */
  --color-navy-900: #a41d27;
  --color-navy-800: #1f1c1d;
  --color-navy-700: #000000;
  /* Primary brand - RED */
  --color-navy-600: #8d2046;
  --color-navy-500: #a41b41;
  --color-navy-400: #a51c33;
  --color-navy-300: #911f2e;
  --color-navy-200: #a21c4b;
  --color-navy-100: #e0e8f2;
  --color-navy-50: #f0f4f9;

  --color-gold-900: #7a5800;
  --color-gold-800: #9a6e00;
  --color-gold-700: #B8860B;
  /* Primary accent - Compass Gold */
  --color-gold-600: #d4a017;
  --color-gold-500: #e8b830;
  --color-gold-400: #f0ca5a;
  --color-gold-300: #f5d98a;
  --color-gold-200: #fae9b8;
  --color-gold-100: #fdf3da;
  --color-gold-50: #fffbf0;

  /* ── Primary Brand Aliases ────────────────────────────────────────────────── */
  --color-primary: var(--color-navy-700);
  /* #1B2A4A */
  --color-primary-hover: var(--color-navy-600);
  /* #243761 */
  --color-primary-dark: var(--color-navy-800);
  --color-primary-light: var(--color-navy-50);
  --color-primary-text: #ffffff;

  --color-accent: var(--color-gold-700);
  /* #B8860B */
  --color-accent-hover: var(--color-gold-600);
  --color-accent-light: var(--color-gold-50);
  --color-accent-text: var(--color-navy-900);
  /* Gold-700 is only ~3.25:1 on white - fine for icons/borders (WCAG 1.4.11, 3:1)
     but fails 1.4.3 (4.5:1) for actual text. Use this variant for gold text/links
     on a light surface; gold-900 clears 6.5:1. */
  --color-accent-text-on-light: var(--color-gold-900);

  /* ── Neutral Scale ────────────────────────────────────────────────────────── */
  --color-neutral-900: #0f172a;
  --color-neutral-800: #1e293b;
  --color-neutral-700: #334155;
  --color-neutral-600: #475569;
  --color-neutral-500: #64748b;
  --color-neutral-400: #94a3b8;
  --color-neutral-300: #cbd5e1;
  --color-neutral-200: #e2e8f0;
  --color-neutral-100: #f1f5f9;
  --color-neutral-50: #f8fafc;

  /* ── Backgrounds ──────────────────────────────────────────────────────────── */
  --color-bg: var(--color-neutral-100);
  --color-surface: #ffffff;
  --color-surface-2: var(--color-neutral-50);

  /* ── Borders ──────────────────────────────────────────────────────────────── */
  --color-border: var(--color-neutral-200);
  --color-border-light: var(--color-neutral-100);

  /* ── Text ─────────────────────────────────────────────────────────────────── */
  --color-text: var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-500);
  --color-text-subtle: var(--color-neutral-400);

  /* ── Semantic Status ─────────────────────────────────────────────────────── */
  --color-success: #16a34a;
  --color-success-bg: #f0fdf4;
  --color-warning: #d97706;
  --color-warning-bg: #fffbeb;
  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --color-info: #0284c7;
  --color-info-bg: #f0f9ff;

  /* ── Sidebar ──────────────────────────────────────────────────────────────── */
  --sidebar-bg: var(--color-navy-700);
  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;
  --sidebar-text: #c9707e;
  /* navy-300 (#911f2e) on black sidebar-bg was 2.44:1 - fails WCAG AA. This clears 6.10:1. */
  --sidebar-text-hover: #ffffff;
  --sidebar-hover-bg: var(--color-navy-600);
  --sidebar-active-bg: rgba(184, 134, 11, 0.18);
  --sidebar-active-text: var(--color-gold-500);
  --sidebar-active-border: var(--color-accent);
  --sidebar-border: var(--color-navy-600);

  /* ── Header ───────────────────────────────────────────────────────────────── */
  --header-height: 64px;
  --header-bg: #ffffff;
  --header-border: var(--color-border);

  /* ── Auth Layout ──────────────────────────────────────────────────────────── */
  --auth-page-bg: var(--color-navy-700);
  --auth-card-bg: #ffffff;
  --auth-card-radius: 12px;
  --auth-card-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
  --auth-crest-size: 80px;
  --auth-crest-bg: rgba(184, 134, 11, 0.15);
  --auth-crest-border: var(--color-accent);
  --auth-brand-color: #ffffff;
  --auth-sub-color: rgba(255, 255, 255, 0.55);
  --auth-footer-color: rgba(255, 255, 255, 0.60);
  --auth-footer-link: var(--color-gold-500);

  /* ── Dashboard Stat Cards ─────────────────────────────────────────────────── */
  --stat-navy-bg: rgba(27, 42, 74, 0.08);
  --stat-navy-color: var(--color-navy-700);
  --stat-gold-bg: rgba(184, 134, 11, 0.10);
  --stat-gold-color: var(--color-gold-700);
  --stat-red-bg: rgba(220, 38, 38, 0.08);
  --stat-red-color: var(--color-danger);
  --stat-green-bg: rgba(22, 163, 74, 0.08);
  --stat-green-color: var(--color-success);
  --stat-blue-bg: rgba(2, 132, 199, 0.08);
  --stat-blue-color: var(--color-info);
  --stat-amber-bg: rgba(217, 119, 6, 0.08);
  --stat-amber-color: var(--color-warning);

  /* ── Module Shortcut Tiles ────────────────────────────────────────────────── */
  --module-tile-bg: rgba(27, 42, 74, 0.05);
  --module-tile-bg-gold: rgba(184, 134, 11, 0.05);
  --module-tile-bg-green: rgba(25, 135, 84, 0.05);
  --module-tile-bg-blue: rgba(13, 110, 253, 0.05);
  --module-tile-disabled-opacity: 0.45;

  /* ── Glassmorphism ────────────────────────────────────────────────────────── */
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-blur: 20px;
  --glass-shadow: 0 8px 32px rgba(27, 42, 74, 0.10), 0 1px 2px rgba(27, 42, 74, 0.06);

  --app-bg-gradient:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--color-primary) 16%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--color-accent) 14%, transparent) 0%, transparent 50%),
    radial-gradient(circle at 50% 95%, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, transparent 55%),
    var(--color-bg);

  /* ── Shadows ──────────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.09), 0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-glow-gold: 0 0 0 3px rgba(184, 134, 11, 0.25);

  /* ── Radii ────────────────────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ── Spacing (4px base grid) ─────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Typography ──────────────────────────────────────────────────────────── */
  --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 30px;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --lh-loose: 1.75;

  /* ── Transitions ─────────────────────────────────────────────────────────── */
  --transition-fast: 100ms ease;
  --transition-base: 150ms ease;
  --transition-slow: 250ms ease;

  /* ── Z-index Scale ───────────────────────────────────────────────────────── */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1050;
  --z-toast: 1080;
  --z-tooltip: 1090;

  /* ── Breakpoints (reference - use in media queries, not var()) ───────────── */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}

/* ── Theme Switch Transition ─────────────────────────────────────────────── */
/* Fades colour-driven properties when data-theme/data-skin changes, instead of
   an instant jarring flip. Scoped to colour properties only (not layout/transform),
   consistent with the animation-perf rule of only ever animating cheap properties.
   Automatically neutralised by the prefers-reduced-motion block below. */

*, *::before, *::after {
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

/* ── Dark Theme ──────────────────────────────────────────────────────────── */

[data-theme="dark"] {
  --color-bg: #490025;
  --color-surface: #2e0024;
  --color-surface-2: #472639;

  --color-border: #334155;
  --color-border-light: #1e293b;

  --color-text: #f1f5f9;
  --color-text-muted: #94a3b8;
  --color-text-subtle: #64748b;

  --color-primary-light: rgba(74, 27, 72, 0.25);

  --color-success-bg: rgba(22, 163, 74, 0.12);
  --color-warning-bg: rgba(217, 119, 6, 0.12);
  --color-danger-bg: rgba(220, 38, 38, 0.12);
  --color-info-bg: rgba(2, 132, 199, 0.12);

  --header-bg: #3b1e2c;
  --header-border: #334155;

  --auth-page-bg: #240d1c;
  --auth-card-bg: #3b1e30;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.50);

  --glass-bg: rgba(30, 41, 59, 0.55);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

/* ── Theme Skins (override primary accent only) ──────────────────────────── */

[data-skin="ocean"] {
  --color-primary: #0284c7;
  --color-primary-hover: #0369a1;
  --color-primary-light: #e0f2fe;
  --sidebar-active-bg: #0284c7;
  --sidebar-active-text: #ffffff;
  --sidebar-active-border: #0284c7;
}

[data-skin="forest"] {
  --color-primary: #16a34a;
  --color-primary-hover: #15803d;
  --color-primary-light: #f0fdf4;
  --sidebar-active-bg: #16a34a;
  --sidebar-active-text: #ffffff;
  --sidebar-active-border: #16a34a;
}

[data-skin="rose"] {
  --color-primary: #e11d48;
  --color-primary-hover: #be123c;
  --color-primary-light: #fff1f2;
  --sidebar-active-bg: #e11d48;
  --sidebar-active-text: #ffffff;
  --sidebar-active-border: #e11d48;
}

[data-skin="amber"] {
  --color-primary: #d97706;
  --color-primary-hover: #b45309;
  --color-primary-light: #fffbeb;
  --sidebar-active-bg: #d97706;
  --sidebar-active-text: #ffffff;
  --sidebar-active-border: #d97706;
}

[data-skin="slate"] {
  --color-primary: #475569;
  --color-primary-hover: #334155;
  --color-primary-light: #f1f5f9;
  --sidebar-active-bg: #475569;
  --sidebar-active-text: #ffffff;
  --sidebar-active-border: #475569;
}

[data-skin="midnight"] {
  --color-primary: #7c3aed;
  --color-primary-hover: #6d28d9;
  --color-primary-light: #f5f3ff;
  --sidebar-active-bg: #7c3aed;
  --sidebar-active-text: #ffffff;
  --sidebar-active-border: #7c3aed;
}

/* ── Reduced Motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}