/*!
 * ============================================================================
 * 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: ATH Accounts - 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.9
 * - File Modified | Ary van der Pijl | 2026-10-23 | ATH-GAP-052 | Added --glass-* tokens (bg/border/blur/shadow, light + dark variants) and --dash-backdrop (a faint two-tone radial gradient so the glass surfaces have something to blur against) per an explicit ask to bring a glassmorphism accent to the Books financial-health dashboard. Kept deliberately subtle - --glass-bg stays opaque enough (72% light / 62% dark) to hold the panel's existing 4.5:1 text contrast rather than the fuller frosted-overlay look the style is sometimes pushed to.
 * VERSION 1.0.8
 * - File Modified | Ary van der Pijl | 2026-10-01 | ATH-GAP-051 | Re-skinned to DESIGN/index.html (MicroOffice): palette repointed to its theme_variables.less (slate #2a3342 ink/sidebar, teal #11a8bb primary, #22cabf link, mint #47d1af/#39cda9, coral #ee5744, amber #fdb94b), page ground #f2f3f5, Oxygen replaces Inter, flat 4-12px radii, 64px header, transparent 18px-bold panel headings. Supersedes the ATH-GAP-036 brand palette by explicit request. Button-fill and link primary is the darkened #0b7c8b because template teal #11a8bb is only 2.9:1 with white text (WCAG 1.4.3); #11a8bb stays for fills, icons, progress and charts. Status colours darkened for 4.5:1 text. Added Layout 1 tokens: --greeting-*, --info-block-*, --progress-lg-height, --gradient-*, --text-5xl/6xl, --fw-light. Token names kept so no call site changed. The 6 alternate skins are untouched.
 * VERSION 1.0.7
 * - File Modified | Ary van der Pijl | 2026-09-13 | ATH-GAP-044 | --color-text-subtle repointed from --color-neutral-400 (#94a3b8, ~2.4-2.6:1 on white/--color-bg) to --color-neutral-600 (#475569, comfortably clears WCAG 1.4.3's 4.5:1) - a platform-wide UX/accessibility audit found this token used as real text color in 9 places (kpi deltas, breadcrumb separator, toast close icon, placeholder text, etc), not just decoration, so it needed to actually be readable.
 * VERSION 1.0.6
 * - File Modified | Ary van der Pijl | 2026-09-13 | ATH-GAP-039 | --panel-radius/--panel-shadow now transcribed directly from DESIGN/index2.html's actual dependency (assets/skin/default_skin/theme.css's `#content .panel` rule: box-shadow:0 2px 0 #e5eaee, border-radius:5px), replacing invented values (a 10px radius, a soft blurred elevation shadow) that were never actually derived from the reference. --panel-heading-bg/--panel-heading-pad/--panel-body-pad left as-is - those back this codebase's own heading-bar/region-padding enhancement on top of the reference's plainer single-shell-padding panel, not a mismatch with it.
 * VERSION 1.0.5
 * - File Modified | Ary van der Pijl | 2026-09-13 | ATH-GAP-036 | Full brand rebrand per DOCUMENTATION/ATH_ACCOUNTS_Style_Guide.md: replaced --color-navy-* /--color-gold-* (navy #1B2A4A / gold #B8860B) with the style guide's ATH Navy #010B26 / Electric Blue #0D76F8 / Cyan #00D6F3 / Teal #00CDB8 / Green #00D5A8 palette (new --color-blue-* /--color-cyan-* /--color-teal-* /--color-green-* scales). --color-accent now points at Electric Blue instead of Compass Gold; --chart-1..4 now follow the style guide's recommended Blue->Cyan->Teal->Green sequence (section 19). Existing --stat-gold-* /--sidebar-* /--auth-* token NAMES kept unchanged (only their values repointed) so no call site needed touching. --font-sans switched from Roboto to Inter (style guide section 7), vendored locally under assets/ext-libs/inter/ (same zero-CDN convention as Bootstrap/Roboto, ATH-SKELETON-SEC). The 6 alternate skins (ocean/forest/rose/amber/slate/midnight) are deliberately untouched - user confirmed default-only scope, alternates remain selectable as before. Also removed --auth-crest-bg/--auth-crest-border/--shadow-glow-gold - all 3 became dead (a literal old-gold rgba baked into --shadow-glow-gold would otherwise have silently survived the rebrand) once auth.php's no-tenant-logo fallback switched from a generic Boxicons circle-crest to the actual ATH symbol image (see auth.php/main.css changelogs).
 * VERSION 1.0.4
 * - File Modified | Ary van der Pijl | 2026-09-10 | ATH-SKELETON-021 | Design system rollout (index2.html look-and-feel): added categorical --chart-1..8 palette, --panel-* tokens (heading bar, denser body), content background --color-bg -> #f4f7f9, tighter --header-height, chart grid/ink aliases. Brand navy/gold unchanged. |
 * VERSION 1.0.3
 * - File Modified | Ary van der Pijl | 2026-07-22 | ATH-SKELETON-011 | Dashtreme look-and-feel: swapped --font-sans from Inter to Roboto |
 * VERSION 1.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.1
 * - File Modified | Ary van der Pijl | 2026-06-16 | DS-001 | Replace generic indigo primary with ATH Accounts navy/gold brand palette; add extended lodge colour scale; add auth layout tokens |
 * - File Created | Ary van der Pijl | 2026-05-01 | ATH-SKELETON-001 | Initial file |
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */

:root {
  /* ── Palette (DESIGN/index.html, MicroOffice theme_variables.less) ─────────
     Scale NAMES (navy/blue/cyan/teal/green) are kept from the previous rebrand so no call
     site changes; only the VALUES are repointed. Read them as:
       navy  = slate / dark ink  (#2a3342 sidebar + text)
       blue  = brand primary teal (#11a8bb)
       cyan  = info / link teal   (#22cabf)
       teal  = mint               (#47d1af)
       green = positive mint      (#39cda9) */
  --color-navy-900: #1e2535;
  /* @brand-dark2 - dark UI surfaces */
  --color-navy-800: #2a3342;
  /* Slate - sidebar, text, primary dark */
  --color-navy-700: #333d4f;
  --color-navy-600: #3f4a5d;
  --color-navy-500: #566174;
  --color-navy-400: #7a8496;
  --color-navy-300: #a3abb8;
  --color-navy-200: #cfdce2;
  /* @muted2 */
  --color-navy-100: #e5eaee;
  /* @brand-light */
  --color-navy-50: #f4f7f9;

  --color-blue-700: #0b7c8b;
  /* Darkened primary - clears 4.5:1 with white, used for button fills + link text */
  --color-blue-600: #11a8bb;
  /* @brand-primary - fills, icons, progress, charts */
  --color-blue-500: #3bbccc;
  --color-blue-100: #e3f6f8;

  --color-cyan-600: #17a89f;
  --color-cyan-500: #22cabf;
  /* @brand-info - template link / highlight colour */
  --color-cyan-100: #e0f8f6;

  --color-teal-600: #2fb594;
  --color-teal-500: #47d1af;
  --color-teal-100: #e4f8f2;

  --color-green-600: #1f9a7b;
  --color-green-500: #39cda9;
  --color-green-100: #e1f7f1;

  /* ── Primary Brand Aliases ────────────────────────────────────────────────── */
  --color-primary: var(--color-blue-700);
  --color-primary-hover: #086270;
  --color-primary-dark: #064e59;
  --color-primary-light: var(--color-blue-100);
  --color-primary-text: #ffffff;

  --color-accent: var(--color-blue-600);
  --color-accent-hover: var(--color-blue-700);
  --color-accent-light: var(--color-blue-100);
  --color-accent-text: #ffffff;
  --color-accent-text-on-light: var(--color-blue-700);

  /* ── Neutral Scale ────────────────────────────────────────────────────────── */
  --color-neutral-900: #2a3342;
  --color-neutral-800: #333d4f;
  --color-neutral-700: #434d5f;
  --color-neutral-600: #4a5362;
  --color-neutral-500: #6a7380;
  --color-neutral-400: #a9a9ab;
  --color-neutral-300: #cfdce2;
  --color-neutral-200: #e5eaee;
  --color-neutral-100: #eeeff1;
  --color-neutral-50: #f4f5f6;

  /* ── Backgrounds ──────────────────────────────────────────────────────────── */
  --color-bg: #f2f3f5;
  /* @main-bg */
  --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-600);

  /* ── Semantic Status ─────────────────────────────────────────────────────── */
  /* The template's "success"/"warning" are decorative purple/indigo; status colours keep their
     conventional meaning (green/amber/red) in the template's mint/amber/coral family, darkened
     enough for 4.5:1 text on white. Info takes the template's indigo so it stays distinct from
     the teal primary. */
  --color-success: #1f9a7b;
  --color-success-bg: #e6f7f2;
  --color-warning: #a85d08;
  --color-warning-bg: #fff4df;
  --color-danger: #cf3c2a;
  --color-danger-bg: #fdecea;
  --color-info: #5866c7;
  --color-info-bg: #eef0fb;

  /* ── Chart Palette ───────────────────────────────────────────────────────── */
  /* Template contextual colours in order: primary, info, alert, danger, success, warning. */
  --chart-1: var(--color-blue-600);
  /* #11a8bb */
  --chart-2: var(--color-teal-500);
  /* #47d1af */
  --chart-3: #fdb94b;
  /* @brand-alert */
  --chart-4: #ee5744;
  /* @brand-danger */
  --chart-5: #8892da;
  /* @brand-success (purple) */
  --chart-6: #5866c7;
  /* @brand-warning (indigo) */
  --chart-7: var(--color-navy-800);
  --chart-8: #a9a9ab;
  --chart-grid: var(--color-border-light);
  --chart-ink: var(--color-text-muted);

  /* ── Panels (DESIGN/index.html `#content .panel`): flat 2px under-shadow, 5px radius,
     transparent heading with an optional leading icon and an 18px bold title. ───────── */
  --panel-bg: var(--color-surface);
  --panel-border: var(--color-border);
  --panel-radius: 5px;
  --panel-shadow: 0 2px 0 var(--color-border);
  --panel-heading-pad: var(--space-5) var(--space-6) var(--space-2);
  --panel-body-pad: var(--space-4) var(--space-6) var(--space-6);
  --panel-heading-bg: transparent;
  --panel-title-size: var(--text-xl);
  --panel-title-weight: var(--fw-bold);

  /* ── Layout 1 dashboard primitives (greeting, info tiles, gradient bars, table head) ── */
  --greeting-size: var(--text-5xl);
  --greeting-weight: var(--fw-light);
  --greeting-color: var(--color-text-muted);
  --info-block-number-size: var(--text-6xl);
  --info-block-number-color: #7d8794;
  --info-block-icon-color: var(--color-blue-600);
  --progress-lg-height: var(--space-6);
  --gradient-grey: linear-gradient(to bottom, #f5f6f7, #eaebec);
  --gradient-primary: linear-gradient(to right, #22cabf, #11a8bb);
  --gradient-info: linear-gradient(to right, #39cda9, #30c19e);
  --gradient-danger: linear-gradient(to right, #ee5744, #eb3821);
  --gradient-alert: linear-gradient(to right, #fdba4b, #ff7444);

  /* ── Sidebar ──────────────────────────────────────────────────────────────── */
  --sidebar-bg: var(--color-navy-800);
  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;
  --sidebar-text: var(--color-navy-200);
  --sidebar-text-hover: #ffffff;
  --sidebar-hover-bg: var(--color-navy-700);
  --sidebar-active-bg: rgba(34, 202, 191, 0.16);
  --sidebar-active-text: #ffffff;
  --sidebar-active-border: var(--color-cyan-500);
  --sidebar-border: var(--color-navy-700);

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

  /* ── Auth Layout ──────────────────────────────────────────────────────────── */
  --auth-page-bg: var(--color-navy-800);
  --auth-card-bg: #ffffff;
  --auth-card-radius: 5px;
  --auth-card-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
  --auth-crest-size: 80px;
  --auth-brand-color: #ffffff;
  --auth-sub-color: rgba(255, 255, 255, 0.65);
  --auth-footer-color: rgba(255, 255, 255, 0.70);
  --auth-footer-link: var(--color-cyan-500);

  /* ── Dashboard Stat Cards ─────────────────────────────────────────────────── */
  --stat-navy-bg: rgba(42, 51, 66, 0.08);
  --stat-navy-color: var(--color-navy-800);
  --stat-gold-bg: rgba(17, 168, 187, 0.10);
  --stat-gold-color: var(--color-blue-700);
  --stat-red-bg: rgba(238, 87, 68, 0.10);
  --stat-red-color: var(--color-danger);
  --stat-green-bg: rgba(57, 205, 169, 0.12);
  --stat-green-color: var(--color-green-600);
  --stat-blue-bg: rgba(88, 102, 199, 0.10);
  --stat-blue-color: var(--color-info);
  --stat-amber-bg: rgba(253, 185, 75, 0.15);
  --stat-amber-color: var(--color-warning);

  /* ── Module Shortcut Tiles ────────────────────────────────────────────────── */
  --module-tile-bg: rgba(42, 51, 66, 0.05);
  --module-tile-bg-gold: rgba(17, 168, 187, 0.06);
  --module-tile-bg-green: rgba(57, 205, 169, 0.08);
  --module-tile-bg-blue: rgba(88, 102, 199, 0.06);
  --module-tile-disabled-opacity: 0.45;

  /* ── Shadows ──────────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(42, 51, 66, 0.05);
  --shadow-sm: 0 1px 3px rgba(42, 51, 66, 0.08), 0 1px 2px rgba(42, 51, 66, 0.04);
  --shadow-md: 0 4px 6px rgba(42, 51, 66, 0.06), 0 2px 4px rgba(42, 51, 66, 0.04);
  --shadow-lg: 0 10px 15px rgba(42, 51, 66, 0.08), 0 4px 6px rgba(42, 51, 66, 0.04);
  --shadow-xl: 0 20px 25px rgba(42, 51, 66, 0.09), 0 10px 10px rgba(42, 51, 66, 0.04);

  /* ── Glass (dashboard surfaces only - .panel/.info-block opt in via .glass) ──
     Translucent white + backdrop-blur per the Glassmorphism style (financial
     dashboards, modern SaaS). Kept subtle: enough opacity to hold 4.5:1 text
     contrast over --dash-backdrop, not a full frosted-overlay look. */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-blur: 16px;
  --glass-shadow: 0 8px 32px rgba(42, 51, 66, 0.10);
  --dash-backdrop: radial-gradient(circle at 15% 0%, rgba(17, 168, 187, 0.08), transparent 45%),
                    radial-gradient(circle at 85% 20%, rgba(71, 209, 175, 0.07), transparent 40%);

  /* ── Radii (template is flat: 5px panels, small control radii) ───────────── */
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --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: 'Oxygen', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, 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;
  --text-5xl: 36px;
  --text-6xl: 56px;

  --fw-light: 300;
  --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;
}

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

[data-theme="dark"] {
  --color-bg: #1e2535;
  --color-surface: #2a3342;
  --color-surface-2: #333d4f;

  --color-border: #3f4a5d;
  --color-border-light: #333d4f;

  --color-text: #eeeff1;
  --color-text-muted: #a9b1bf;
  --color-text-subtle: #8a93a3;

  --color-primary: #11a8bb;
  --color-primary-hover: #3bbccc;
  --color-primary-light: rgba(17, 168, 187, 0.18);

  --color-success: #39cda9;
  --color-warning: #fdb94b;
  --color-danger: #ee5744;
  --color-info: #8892da;
  --color-success-bg: rgba(57, 205, 169, 0.14);
  --color-warning-bg: rgba(253, 185, 75, 0.14);
  --color-danger-bg: rgba(238, 87, 68, 0.14);
  --color-info-bg: rgba(136, 146, 218, 0.14);

  --header-bg: #2a3342;
  --header-border: #3f4a5d;

  --panel-bg: #2a3342;
  --panel-border: #3f4a5d;
  --panel-heading-bg: transparent;
  --info-block-number-color: #a9b1bf;
  --gradient-grey: linear-gradient(to bottom, #3a4558, #333d4f);
  --chart-grid: #3f4a5d;
  --chart-ink: #a9b1bf;
  --chart-7: #cfdce2;
  --chart-8: #7a8496;

  --sidebar-bg: #1e2535;
  --sidebar-hover-bg: #2a3342;
  --sidebar-border: #2a3342;

  --auth-page-bg: #1e2535;
  --auth-card-bg: #2a3342;

  --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(42, 51, 66, 0.62);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --dash-backdrop: radial-gradient(circle at 15% 0%, rgba(17, 168, 187, 0.12), transparent 45%),
                    radial-gradient(circle at 85% 20%, rgba(71, 209, 175, 0.10), transparent 40%);
}

/* ── 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;
  }
}