/**
FileName: assets/css/tokens.css
Version: 0.3.0
Written based on the version: 0.2.0
Purpose: Design system tokens — semantic light/dark surfaces, text, borders, state colors, and legacy aliases
Decision Log:
  0.3.0 NEW: Semantic surface/text/border/state tokens
  0.3.0 NEW: Dark-mode token layer with common selectors
  0.3.0 FIX: Legacy --bg-white, --bg-light, --bg-gray-* mapped to semantic tokens
Dependencies: None
Impact Map: All CSS files
Used By: components.css, auth.css, restriction.css, payment.css, account.css, admin.css
Namespace-location: CSS custom properties
Owner: A-SUN Studio
*/

:root {
    color-scheme: light;

    /* Semantic surfaces */
    --surface-page: #f7f7f8;
    --surface-card: #ffffff;
    --surface-muted: #f3f4f6;
    --surface-inset: #f9fafb;

    /* Borders */
    --border-color: #e7e7e7;
    --border-strong: #d1d5db;

    /* Text */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-light: #9ca3af;
    --text-white: #ffffff;
    --text-on-primary: #ffffff;

    /* Brand colors */
    --color-primary: #a46497;
    --color-primary-dark: #8a4f7f;
    --color-primary-light: #c084b5;

    --color-accent: #2d5c4d;
    --color-accent-dark: #1f4438;
    --color-accent-light: #4a7c6b;

    /* State colors */
    --color-success: #2d5c4d;
    --color-warning: #b45309;
    --color-error: #dc2626;
    --color-info: #2563eb;

    /* Tier colors */
    --tier-free: #6b7280;
    --tier-explorer: #2563eb;
    --tier-architect: #a46497;
    --tier-builder: #2d5c4d;

    /* Soft state surfaces */
    --surface-primary-soft: rgba(164, 100, 151, 0.10);
    --surface-accent-soft: rgba(45, 92, 77, 0.10);
    --surface-success: rgba(45, 92, 77, 0.10);
    --surface-warning: rgba(245, 158, 11, 0.14);
    --surface-error: rgba(220, 38, 38, 0.10);
    --surface-info: rgba(59, 130, 246, 0.10);

    /* Tier surfaces */
    --surface-tier-free: rgba(156, 163, 175, 0.16);
    --surface-tier-explorer: rgba(59, 130, 246, 0.12);
    --surface-tier-architect: rgba(164, 100, 151, 0.12);
    --surface-tier-builder: rgba(45, 92, 77, 0.12);

    /* Typography */
    --font-fa: 'Anjoman', 'Vazirmatn', system-ui, sans-serif;
    --font-en: 'Inter', system-ui, sans-serif;
    --font-primary: var(--font-fa);

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Radius */
    --radius-asymmetric: 0 7px 0 7px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* Legacy aliases for backward compatibility */
    --bg-white: var(--surface-card);
    --bg-light: var(--border-color);
    --bg-dark: var(--surface-page);
    --bg-gray-50: var(--surface-inset);
    --bg-gray-100: var(--surface-muted);
    --text-inverse: var(--text-white);
}

[dir="rtl"] {
    --font-primary: var(--font-fa);
}

[dir="ltr"] {
    --font-primary: var(--font-en);
}

body {
    font-family: var(--font-primary);
    color: var(--text-primary);
    line-height: 1.6;
}

/* ===================================================================
   Dark mode token layer
   NOTE: If Ahura theme uses another selector, add it here.
=================================================================== */
:root[data-mode="dark"],
:root.dark,
:root.dark-mode,
html[data-mode="dark"],
html[data-theme="dark"],
html.dark,
html.dark-mode,
body[data-mode="dark"],
body[data-theme="dark"],
body.dark,
body.dark-mode,
[data-mode="dark"],
[data-theme="dark"] {
    color-scheme: dark;

    --surface-page: #14181d;
    --surface-card: #1d2329;
    --surface-muted: #272e36;
    --surface-inset: #20262d;

    --border-color: #3a434e;
    --border-strong: #4a5563;

    --text-primary: #f3f4f6;
    --text-secondary: #c5cbd4;
    --text-light: #97a0ab;
    --text-white: #ffffff;
    --text-on-primary: #ffffff;

    --color-primary: #c58cbb;
    --color-primary-dark: #d3a4c9;
    --color-primary-light: #e0c4db;

    --color-accent: #83b9a8;
    --color-accent-dark: #9dcabc;
    --color-accent-light: #6aa292;

    --color-success: #83b9a8;
    --color-warning: #fbbf24;
    --color-error: #f87171;
    --color-info: #60a5fa;

    --tier-free: #9ca3af;
    --tier-explorer: #60a5fa;
    --tier-architect: #c58cbb;
    --tier-builder: #83b9a8;

    --surface-primary-soft: rgba(197, 140, 187, 0.16);
    --surface-accent-soft: rgba(131, 185, 168, 0.16);
    --surface-success: rgba(131, 185, 168, 0.16);
    --surface-warning: rgba(251, 191, 36, 0.16);
    --surface-error: rgba(248, 113, 113, 0.16);
    --surface-info: rgba(96, 165, 250, 0.18);

    --surface-tier-free: rgba(156, 163, 175, 0.18);
    --surface-tier-explorer: rgba(96, 165, 250, 0.18);
    --surface-tier-architect: rgba(197, 140, 187, 0.18);
    --surface-tier-builder: rgba(131, 185, 168, 0.18);

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45);

    /* Legacy aliases remain mapped */
    --bg-white: var(--surface-card);
    --bg-light: var(--border-color);
    --bg-dark: var(--surface-page);
    --bg-gray-50: var(--surface-inset);
    --bg-gray-100: var(--surface-muted);
    --text-inverse: var(--text-white);
}