/**
 * Sanamahi Graphix ERP — Premium Enterprise Design System Tokens
 * Architecture: Centralized Design Tokens (Dark-First Default & Dynamic Light Theme)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

@font-face {
    font-family: 'Product Sans';
    src: url('../fonts/product-sans/ProductSans-Regular.ttf') format('truetype'),
         url('/assets/fonts/product-sans/ProductSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../fonts/product-sans/ProductSans-Medium.ttf') format('truetype'),
         url('/assets/fonts/product-sans/ProductSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../fonts/product-sans/ProductSans-Bold.ttf') format('truetype'),
         url('/assets/fonts/product-sans/ProductSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../fonts/product-sans/ProductSans-Italic.ttf') format('truetype'),
         url('/assets/fonts/product-sans/ProductSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../fonts/product-sans/ProductSans-BoldItalic.ttf') format('truetype'),
         url('/assets/fonts/product-sans/ProductSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Moderna';
    src: url('../fonts/moderna/MODERNA_.TTF') format('truetype'),
         url('/assets/fonts/moderna/MODERNA_.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── Typography Stack ─────────────────────────────────── */
    --font-sans: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-code: 'JetBrains Mono', 'IBM Plex Mono', Menlo, Consolas, monospace;
    --font-brand: 'Moderna', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-product: 'Product Sans', 'ProductSans', -apple-system, BlinkMacSystemFont, sans-serif;

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

    /* ── Component Height Standards ───────────────────────── */
    --input-height-sm: 30px;
    --input-height-md: 36px;
    --input-height-lg: 42px;

    /* ── Moderate Border Radii ────────────────────────────── */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ── Subtle Micro-Transitions (150–200ms) ─────────────── */
    --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 240ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Semantic Status Colors (Enterprise Palette) ───────── */
    --color-success: #17C964;
    --color-success-bg: rgba(23, 201, 100, 0.12);
    --color-success-border: rgba(23, 201, 100, 0.25);
    --color-success-text: #6EE7B7;

    --color-warning: #F5A524;
    --color-warning-bg: rgba(245, 165, 36, 0.12);
    --color-warning-border: rgba(245, 165, 36, 0.25);
    --color-warning-text: #FDE047;

    --color-danger: #F31260;
    --color-danger-bg: rgba(243, 18, 96, 0.12);
    --color-danger-border: rgba(243, 18, 96, 0.25);
    --color-danger-text: #FDA4AF;

    --color-info: #006FEE;
    --color-info-bg: rgba(0, 111, 238, 0.12);
    --color-info-border: rgba(0, 111, 238, 0.25);
    --color-info-text: #93C5FD;

    --color-purple: #7828C8;
    --color-purple-bg: rgba(120, 40, 200, 0.12);
    --color-purple-border: rgba(120, 40, 200, 0.25);
    --color-purple-text: #D8B4FE;
}

/* ── Dark Theme (Default — Charcoal / Slate Enterprise) ────── */
[data-theme="dark"],
:root:not([data-theme="light"]) {
    color-scheme: dark;

    /* Surfaces */
    --bg-canvas: #09090B;
    --bg-surface: #121215;
    --bg-surface-elevated: #18181C;
    --bg-surface-hover: #202026;
    --bg-input: #0E0E12;

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-strong: #2D2D36;
    --border-focus: #006FEE;

    /* Text Hierarchy */
    --text-primary: #FAFAFA;
    --text-secondary: #A1A1AA;
    --text-muted: #71717A;
    --text-disabled: #52525B;
    --text-inverse: #09090B;

    /* Brand Primary Accent (Restrained Cyan/Blue) */
    --color-primary: #006FEE;
    --color-primary-hover: #005BC4;
    --color-primary-active: #004493;
    --color-primary-bg: rgba(0, 111, 238, 0.12);
    --color-primary-border: rgba(0, 111, 238, 0.3);
    --color-primary-text: #FFFFFF;
    --color-primary-glow: rgba(0, 111, 238, 0.18);

    /* Elevation & Shadows */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 2px 4px -1px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 6px 16px -2px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 12px 28px -4px rgba(0, 0, 0, 0.85);
    --shadow-modal: 0 24px 48px -8px rgba(0, 0, 0, 0.95);
}

/* ── Light Theme (Clean Crisp Enterprise SaaS) ─────────────── */
[data-theme="light"] {
    color-scheme: light;

    /* Surfaces */
    --bg-canvas: #F8FAFC;
    --bg-surface: #FFFFFF;
    --bg-surface-elevated: #FFFFFF;
    --bg-surface-hover: #F1F5F9;
    --bg-input: #FFFFFF;

    /* Borders */
    --border-subtle: #E2E8F0;
    --border-strong: #CBD5E1;
    --border-focus: #006FEE;

    /* Text Hierarchy */
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #64748B;
    --text-disabled: #94A3B8;
    --text-inverse: #FFFFFF;

    /* Brand Primary Accent */
    --color-primary: #006FEE;
    --color-primary-hover: #005BC4;
    --color-primary-active: #004493;
    --color-primary-bg: rgba(0, 111, 238, 0.08);
    --color-primary-border: rgba(0, 111, 238, 0.22);
    --color-primary-text: #FFFFFF;
    --color-primary-glow: rgba(0, 111, 238, 0.12);

    /* Elevation & Shadows */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 24px -4px rgba(0, 0, 0, 0.1);
    --shadow-modal: 0 20px 36px -6px rgba(0, 0, 0, 0.14);
}

/* ── Compatibility Aliases ─────────────────────────────────── */
:root {
    --bg-surface-0: var(--bg-canvas);
    --bg-surface-1: var(--bg-surface);
    --bg-surface-2: var(--bg-surface);
    --bg-surface-3: var(--bg-surface-elevated);
    --bg-surface-4: var(--bg-surface-hover);
    --border-color: var(--border-subtle);
    --text-dim: var(--text-muted);
}