/*!
 * ============================================================================
 * 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 Skeleton - 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-02 | EWC-002 | Add Earthwood brand colour scale (teal/brown/cream) imported from the live earthwoodcraft.co.za site; repoint Primary Brand Aliases to it. Legacy lodge navy/gold scale is kept as-is - main.css/dashboard.js reference --color-navy-* and --color-gold-* directly |
 * 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 Skeleton 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 {
  /* ── Earthwood Brand (from live earthwoodcraft.co.za) ────────────────────── */
  --color-teal-700: #7EBEC5;   /* Primary brand - theme accent teal */
  --color-teal-600: #7fa9b5;   /* Muted teal - button fill */
  --color-teal-100: #e8f2f3;

  --color-brown-700: #894b42;  /* Secondary brand - button fill */
  --color-brown-600: #6a4a35;  /* Eyebrow / kicker text */

  --color-cream-100: #fbf2e5;
  --color-cream-200: #f6f1ea;
  --color-cream-300: #eee7e3;

  /* ── Lodge Brand (legacy - referenced directly by main.css/dashboard.js, do not repurpose) ── */
  --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-teal-600);   /* #7fa9b5 */
  --color-primary-hover:  var(--color-brown-700);  /* #894b42 */
  --color-primary-dark:   var(--color-brown-600);
  --color-primary-light:  var(--color-teal-100);
  --color-primary-text:   #ffffff;

  --color-accent:         var(--color-brown-700);  /* #894b42 */
  --color-accent-hover:   var(--color-brown-600);
  --color-accent-light:   var(--color-cream-100);
  --color-accent-text:    #ffffff;

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

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

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

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

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