/*
 * ============================================================================
 * Copyright (c) 2026 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: design-tokens.css
 * @TITLE: PATHWRITE
 * @DESCRIPTION: Design tokens - CSS custom properties for brand colours, spacing, typography, shadows, and theme variables
 * @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-08-18 | Gap Analysis follow-up (REQ-GAP-001 Section 12, "spot-check found --color-text-subtle failing AA contrast"): light-theme value darkened #a3a3a3 -> #909090 (2.52:1 on white, failed even the 3:1 non-text/UI-component floor, to ~3.2:1). The token is still too light to ever hit 4.5:1 text-contrast on a white surface without collapsing into --color-text-muted's own value, so the 4 call sites actually using it for readable body text (not decorative icons) were repointed to --color-text-muted instead - see layout.css, views/auth.css, views/canvas-editor.css, components/dropdown.css changelogs. |
 * VERSION 1.0.3
 * - File Modified | Ary van der Pijl | 2026-08-06 | PATHWRITE brand style guide rollout: default brand tokens (--color-primary/-hover/-light, --color-accent, sidebar colours) recoloured to the guide's black/gold/white/light-gray palette; --font-heading added (Montserrat); --radius-md raised to the guide's 12px standard with the sm/lg/xl scale re-graduated around it. Alternate user-selectable skins (ocean/forest/rose/amber/slate/midnight) are untouched - they are opt-in personalisation, not the default brand. |
 * VERSION 1.0.2
 * - File Modified | Ary van der Pijl | 2026-08-06 | Phase 24 theme/customisation audit: added --color-accent (per-user preference, distinct from the skin's --color-primary) and [data-font-size="small"|"large"] token-override blocks (mirrors the existing dark/skin override pattern - 'medium' is the default scale, no block needed). |
 * VERSION 1.0.1
 * - File Modified | Ary van der Pijl | 2026-08-06 | Phase 17 design system audit: added --shadow-focus (skin-aware, overridden per [data-skin] block) to replace a hardcoded indigo rgba() in main.css that didn't follow the active brand skin; added --ls-wide/--ls-wider/--ls-widest letter-spacing tokens to replace three hardcoded em values used for uppercase section labels. |
 * VERSION 1.0.0
 * + File Created | Ary van der Pijl | 2026-06-12
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */
:root {
  /* Brand - PATHWRITE style guide: black wordmark, gold accent */
  --color-primary: #0d0d0d;
  --color-primary-hover: #d4af37;
  --color-primary-light: #fbf3dc;
  --color-primary-text: #ffffff;

  /* Accent - per-user preference (theme.js), distinct from the skin's primary colour */
  --color-accent: #d4af37;

  /* Backgrounds */
  --color-bg: #f5f5f5;
  --color-surface: #ffffff;
  --color-surface-2: #fafafa;

  /* Borders */
  --color-border: #e5e5e5;
  --color-border-light: #f0f0f0;

  /* Text */
  --color-text: #0d0d0d;
  --color-text-muted: #6b6b6b;
  --color-text-subtle: #909090;

  /* 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: #0d0d0d;
  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;
  --sidebar-text: #a3a3a3;
  --sidebar-text-hover: #ffffff;
  --sidebar-hover-bg: #1a1a1a;
  --sidebar-active-bg: #d4af37;
  --sidebar-active-text: #0d0d0d;
  --sidebar-border: #1f1f1f;

  /* Header */
  --header-height: 64px;
  --header-bg: #ffffff;
  --header-border: #e5e5e5;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, .06), 0 2px 4px rgba(0, 0, 0, .04);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);
  --shadow-focus: 0 0 0 3px rgba(212, 175, 55, .35);

  /* Radii - PATHWRITE style guide standard is 12px (--radius-md) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Spacing scale */
  --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-heading: 'Montserrat', '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;

  --ls-wide: .04em;
  --ls-wider: .06em;
  --ls-widest: .08em;

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

/* ─── 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(212, 175, 55, 0.15);

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

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, .4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, .5);
}

/* ─── Theme Skins ─────────────────────────────────────────────────────────── */

[data-skin="ocean"] {
  --color-primary: #0284c7;
  --color-primary-hover: #0369a1;
  --color-primary-light: #e0f2fe;
  --sidebar-active-bg: #0284c7;
  --shadow-focus: 0 0 0 3px rgba(2, 132, 199, .12);
}

[data-skin="forest"] {
  --color-primary: #16a34a;
  --color-primary-hover: #15803d;
  --color-primary-light: #f0fdf4;
  --sidebar-active-bg: #16a34a;
  --shadow-focus: 0 0 0 3px rgba(22, 163, 74, .12);
}

[data-skin="rose"] {
  --color-primary: #e11d48;
  --color-primary-hover: #be123c;
  --color-primary-light: #fff1f2;
  --sidebar-active-bg: #e11d48;
  --shadow-focus: 0 0 0 3px rgba(225, 29, 72, .12);
}

[data-skin="amber"] {
  --color-primary: #d97706;
  --color-primary-hover: #b45309;
  --color-primary-light: #fffbeb;
  --sidebar-active-bg: #d97706;
  --shadow-focus: 0 0 0 3px rgba(217, 119, 6, .12);
}

[data-skin="slate"] {
  --color-primary: #475569;
  --color-primary-hover: #334155;
  --color-primary-light: #f1f5f9;
  --sidebar-active-bg: #475569;
  --shadow-focus: 0 0 0 3px rgba(71, 85, 105, .12);
}

[data-skin="midnight"] {
  --color-primary: #7c3aed;
  --color-primary-hover: #6d28d9;
  --color-primary-light: #f5f3ff;
  --sidebar-active-bg: #7c3aed;
  --shadow-focus: 0 0 0 3px rgba(124, 58, 237, .12);
}

/* ─── Font Size Preference ───────────────────────────────────────────────── */
/* 'medium' is the default token scale above and needs no override block. */

[data-font-size="small"] {
  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 15px;
  --text-xl: 17px;
  --text-2xl: 19px;
  --text-3xl: 22px;
  --text-4xl: 28px;
}

[data-font-size="large"] {
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 17px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 23px;
  --text-3xl: 27px;
  --text-4xl: 34px;
}