/*!
 * ============================================================================
 * 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 Monitor - 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.3
 * - File Modified | Ary van der Pijl | 2026-07-03 | DESIGN-002 | Fixed metatra skin: sidebar/auth backgrounds were a vivid blue-cyan-purple gradient clashing with the logo's flattened-black canvas; now near-black surfaces with the gradient reserved for accents |
 * - File Modified | Joshua | 2026-07-14 | DES-002 | Added filing-cabinet auth token set (login redesign), mapped onto existing navy/gold brand scale; dark-theme overrides |
 * 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 ATH Monitor navy/gold brand palette; add extended lodge colour scale; add auth layout tokens |
 * - File Created | Ary van der Pijl | 2026-05-01 | ATH-MONITOR-001 | Initial file |
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */

:root {
  /* ── Lodge Brand ──────────────────────────────────────────────────────────── */
  --color-navy-900: #0d1624;
  --color-navy-800: #131e35;
  --color-navy-700: #1B2A4A;
  /* Primary brand - Deep Navy */
  --color-navy-600: #243761;
  --color-navy-500: #2e477a;
  --color-navy-400: #4a6399;
  --color-navy-300: #7a95be;
  --color-navy-200: #b0c3da;
  --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);

  /* ── 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: var(--color-navy-300);
  --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-lodge-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);

  /* ── Filing-Cabinet Auth (login redesign, DES-002) ────────────────────────
     The handoff's kraft/steel palette is remapped onto the brand scale:
     manila folder → gold tints, steel drawer front → brand navy. */
  --cabinet-stage-bg: var(--color-navy-50);
  --cabinet-stage-ink: var(--color-navy-900);
  --cabinet-ink: var(--color-navy-900);
  --cabinet-text-muted: var(--color-neutral-600);
  --cabinet-tab-bg: var(--color-gold-200);
  --cabinet-file-bg: var(--color-gold-100);
  --cabinet-input-bg: var(--color-gold-50);
  --cabinet-input-border: var(--color-gold-300);
  --cabinet-drawer-bg: var(--color-navy-700);
  --cabinet-drawer-stroke: var(--color-navy-400);
  --cabinet-drawer-marker: var(--color-gold-500);
  --cabinet-tab-height: 56px;
  --cabinet-peek-reveal: 150px;
  --cabinet-file-width: 600px;
  --cabinet-file-shadow: 0 18px 40px rgba(13, 22, 36, 0.18);
  --cabinet-peek-shadow: drop-shadow(0 26px 30px rgba(13, 22, 36, 0.40));
  --cabinet-motion: 0.62s cubic-bezier(0.34, 1.56, 0.64, 1);

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

  /* ── 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: 'Inter', -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;
}

/* ── Dark Theme ──────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-surface-2: #263347;

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

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

  --color-primary-light: rgba(27, 42, 74, 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: #1e293b;
  --header-border: #334155;

  --auth-page-bg: #0d1624;
  --auth-card-bg: #1e293b;

  /* Filing-cabinet auth: darken the room, keep the folder manila (its ink stays dark) */
  --cabinet-stage-bg: var(--color-navy-900);
  --cabinet-stage-ink: #f1f5f9;
  --cabinet-drawer-bg: var(--color-navy-800);
  --cabinet-drawer-stroke: var(--color-navy-500);

  --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);
}

/* ── Theme Skins (override primary accent only) ──────────────────────────── */
[data-skin="lodge"] {
  --color-primary: #1B2A4A;
  --color-primary-hover: #243761;
  --color-primary-light: #e0e8f2;
  --color-accent: #B8860B;
  --sidebar-active-bg: rgba(184, 134, 11, 0.18);
  --sidebar-active-text: #e8b830;
}

[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;
}

[data-skin="ath"] {
  --color-primary: #0044ff;
  --color-primary-hover: #648af3;
  --color-primary-light: #f5f3ff;
  --sidebar-active-bg: #0d2c81;
  --sidebar-active-text: #ffffff;
  --sidebar-active-border: #0044ff;
}

[data-skin="special"] {
  --color-primary: #0ef70e;
  --color-primary-hover: #175817;
  --color-primary-light: #f5f3ff;
  --sidebar-active-bg: #028a02;
  --sidebar-active-text: #ffffff;
  --sidebar-active-border: #0ef70e;
}

/* ── MetATHra Theme ───────────────────────────────────────────────────────
   The logo artwork is flattened onto a solid black canvas (see
   scripts/resize-logos.js), so any surface it sits on must be near-black
   or it reads as a floating box. The blue → cyan → purple gradient from
   the mark is reserved for accents (active nav, borders, links, buttons)
   rather than painted across full sidebar/auth backgrounds. ─────────────── */
[data-skin="metatra"] {
  /* Primary: Deep Blue from logo */
  --color-primary: #0066CC;
  --color-primary-hover: #0052B3;
  --color-primary-light: #E6F0FF;

  /* Accent: Bright Cyan from logo */
  --color-accent: #00B4D8;
  --color-accent-hover: #0099B8;

  /* Extended MetATHra palette */
  --metatra-cyan: #00B4D8;
  --metatra-deep-blue: #0066CC;
  --metatra-bright-purple: #9D4EDD;
  --metatra-dark-purple: #5A189A;

  /* Surfaces the logo sits on: near-black, matching the logo canvas */
  --sidebar-bg: linear-gradient(180deg, #0a0e18 0%, #05070d 100%);
  --sidebar-text: rgba(255, 255, 255, 0.65);
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
  --sidebar-active-bg: rgba(0, 180, 216, 0.16);
  --sidebar-active-text: #00B4D8;
  --sidebar-active-border: #00B4D8;
  --auth-page-bg: linear-gradient(135deg, #05070d 0%, #0d1220 100%);
  --auth-crest-border: #00B4D8;
  --auth-footer-link: #00B4D8;

  /* Status colors with MetATHra accent */
  --color-info: #00B4D8;
  --color-info-bg: rgba(0, 180, 216, 0.08);
}

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