/*!
 * ============================================================================
 * 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.4
 * - File Modified | Ary van der Pijl | 2026-09-05 | MKT-TEMPLATE-001 | Added --store-font-heading/--store-font-body tokens (default Poppins/Inter, matching the seeded "Community Storefront" template's first font_pairs entry) so a per-tenant storefront template's CSS override (WEB/public/css/templates/*.css) has a real token to redefine -- see store.js's applyTemplate() and GAP_ANALYSIS.md E.1. |
 * VERSION 1.0.3
 * - File Modified | Ary van der Pijl | 2026-07-17 | MKT-PHASE3-001 | Added storefront marketplace palette (--store-* forest green/amber, matching tenants.primary_colour default #2C5F2E) and layout tokens for the public storefront (Module 3/6/7), kept separate from the --color-*/backoffice admin skin tokens above. Spacing/radius/shadow/type/breakpoint/z-index scales are reused as-is, not duplicated. |
 * 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 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 {
  /* ── Brand Palette ────────────────────────────────────────────────────────── */
  --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);
  /* 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:        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-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;

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

  /* ── Storefront Marketplace Palette (public buyer-facing pages only) ────── */
  /* Default forest-green/amber -- matches tenants.primary_colour DB default
     (#2C5F2E). A merchant's own primary_colour overrides --store-primary via an
     inline style on the storefront layout root, same pattern as
     Technical Spec Section 24 (--brand-primary injected per-tenant). */
  --store-forest-900: #12261a;
  --store-forest-800: #1c3d29;
  --store-forest-700: #2C5F2E;   /* Default storefront primary */
  --store-forest-600: #35753a;
  --store-forest-500: #418c48;
  --store-forest-400: #6aab6f;
  --store-forest-300: #9bc79e;
  --store-forest-200: #c8e2ca;
  --store-forest-100: #e6f2e7;
  --store-forest-50:  #f3f9f3;

  --store-amber-900: #7a4e05;
  --store-amber-800: #96650a;
  --store-amber-700: #C1811A;   /* Default storefront accent */
  --store-amber-600: #d99a2e;
  --store-amber-500: #e6ac44;
  --store-amber-400: #edc06e;
  --store-amber-300: #f3d69b;
  --store-amber-200: #f8e6c2;
  --store-amber-100: #fcf3e2;
  --store-amber-50:  #fefaf2;

  --store-primary:       var(--store-forest-700);
  --store-primary-hover: var(--store-forest-600);
  --store-primary-dark:  var(--store-forest-800);
  --store-primary-light: var(--store-forest-50);
  --store-primary-text:  #ffffff;

  --store-accent:      var(--store-amber-700);
  --store-accent-hover: var(--store-amber-600);
  --store-accent-light: var(--store-amber-50);
  /* amber-700 is ~2.9:1 on white -- same WCAG caveat as --color-accent-text
     above: fine for icons/borders (3:1), not for body text (4.5:1). */
  --store-accent-text-on-light: var(--store-amber-900);

  /* ── Storefront Typography (overridden per-tenant by the selected template's
     CSS file, see WEB/public/css/templates/*.css and store.js's applyTemplate) ── */
  --store-font-heading: "Poppins", sans-serif;
  --store-font-body:    "Inter", sans-serif;

  /* ── Storefront Layout ────────────────────────────────────────────────────── */
  --store-header-height: 72px;
  --store-header-bg:     #ffffff;
  --store-header-border: var(--color-border);
  --store-footer-bg:     var(--store-forest-900);
  --store-footer-text:   rgba(255, 255, 255, 0.75);
  --store-card-radius:   var(--radius-md);
  --store-card-shadow:   var(--shadow-sm);
  --store-card-shadow-hover: var(--shadow-md);
}

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