/* =============================================================================
   NotarisPlatform - Design Tokens
   
   SOURCE OF TRUTH: Colors are defined in MudBlazor Theme (ThemeConstants.cs).
   This file duplicates those values as CSS custom properties for edge-case
   styling outside MudBlazor components. Keep in sync with ThemeConstants.cs!
   ============================================================================= */

:root {
    /* ===== COLORS - Professional & Trustworthy ===== */
    /* Synced with: src/NotarisPlatform.WebApp/Services/ThemeConstants.cs */

    /* Primary Colors - Deep Navy (Professional) */
    --color-primary: #1a365d;
    --color-primary-light: #2c5282;
    --color-primary-dark: #1a202c;
    --color-primary-hover: #2d4a7c;
    --color-primary-contrast: #ffffff;

    /* Secondary Colors - Slate (WCAG AA compliant: #546b82 on white = ~6:1 contrast) */
    --color-secondary: #546b82;
    --color-secondary-light: #718096;
    --color-secondary-dark: #3d5166;
    --color-secondary-contrast: #ffffff;

    /* Accent Colors */
    --color-accent: #3182ce;
    --color-accent-light: #63b3ed;
    --color-accent-dark: #2c5282;
    --color-accent-contrast: #ffffff;

    /* Semantic Colors */
    --color-success: #38a169;
    --color-success-light: #68d391;
    --color-success-dark: #2f855a;
    --color-success-contrast: #ffffff;

    --color-warning: #d69e2e;
    --color-warning-light: #f6e05e;
    --color-warning-dark: #b7791f;
    --color-warning-contrast: #ffffff;

    --color-error: #e53e3e;
    --color-error-light: #fc8181;
    --color-error-dark: #c53030;
    --color-error-contrast: #ffffff;

    --color-info: #3182ce;
    --color-info-light: #63b3ed;
    --color-info-dark: #2c5282;
    --color-info-contrast: #ffffff;

    /* Background Colors - Light Mode */
    --bg-primary: #ffffff;
    --bg-secondary: #f7fafc;
    --bg-tertiary: #edf2f7;
    --bg-hover: #f1f5f9;
    --bg-active: #e2e8f0;
    --bg-surface: #ffffff;

    /* Text Colors - Light Mode (WCAG AA: ≥4.5:1 contrast on white) */
    --text-primary: #1a202c;
    --text-secondary: #3d5166;  /* ~7:1 contrast on white */
    --text-muted: #546b82;      /* ~6:1 contrast on white */
    --text-disabled: #718096;   /* Used for disabled elements, not body text */
    --text-inverse: #ffffff;

    /* Border Colors - Light Mode */
    --border-color: #e2e8f0;
    --border-color-hover: #cbd5e1;
    --border-color-focus: var(--color-primary);
    --border-color-error: var(--color-error);

    /* ===== SPACING SCALE ===== */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */

    /* ===== TYPOGRAPHY ===== */
    /* Roboto optimized for UI screens (better readability than Inter) */
    --font-family: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-family-mono: 'Fira Code', 'Consolas', 'Monaco', monospace;

    /* Font Sizes */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 2rem;        /* 32px */
    --font-size-4xl: 2.5rem;      /* 40px */

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ===== SHADOWS ===== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* ===== BORDERS ===== */
    --border-radius-sm: 0.25rem;   /* 4px */
    --border-radius-md: 0.5rem;    /* 8px */
    --border-radius-lg: 0.75rem;   /* 12px */
    --border-radius-xl: 1rem;      /* 16px */
    --border-radius-full: 9999px;

    --border-width: 1px;
    --border-width-thick: 2px;

    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;

    /* ===== Z-INDEX SCALE ===== */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;

    /* ===== ACCESSIBILITY ===== */
    /* Focus indicators */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--color-primary);
    --focus-ring-opacity: 0.5;

    /* Touch targets (WCAG 2.1 AA minimum: 44x44px) */
    --touch-target-min: 44px;

    /* ===== BREAKPOINTS (for reference, use MudBlazor breakpoints) ===== */
    /* xs: < 600px (default) */
    /* sm: >= 600px */
    /* md: >= 960px */
    /* lg: >= 1280px */
    /* xl: >= 1920px */
}

/* Dark mode support - Synced with MudBlazor PaletteDark in ThemeService.cs */
[data-theme="dark"],
.mud-theme-dark {
    /* Background Colors - Dark Mode */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-active: rgba(255, 255, 255, 0.1);
    --bg-surface: #1e293b;
    
    /* Text Colors - Dark Mode */
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-disabled: #64748b;
    
    /* Border Colors - Dark Mode */
    --border-color: #334155;
    --border-color-hover: #475569;
    
    /* Adjusted semantic colors for dark mode (lighter variants) */
    --color-primary: #2c5282;
    --color-primary-light: #63b3ed;
    --color-secondary: #a0aec0;
    --color-success: #68d391;
    --color-warning: #f6e05e;
    --color-error: #fc8181;
    --color-info: #63b3ed;
    
    /* Shadows for dark mode (subtle) */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

/* Smooth theme transition */
body,
.mud-layout,
.mud-main-content,
.mud-drawer,
.mud-appbar,
.mud-card,
.mud-paper {
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Apply dark mode tokens when system prefers dark and no explicit light theme set */
        --bg-primary: #0f172a;
        --bg-secondary: #1e293b;
        --bg-tertiary: #334155;
        --bg-surface: #1e293b;
        --text-primary: #f8fafc;
        --text-secondary: #cbd5e1;
        --text-muted: #94a3b8;
        --border-color: #334155;
    }
}

/* ===== UTILITY CLASSES ===== */

/* Skip to content link for accessibility */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: var(--text-inverse);
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    z-index: var(--z-index-tooltip);
    border-radius: var(--border-radius-md);
}

.skip-to-content:focus {
    top: 0;
}

/* Visually hidden but accessible to screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus visible utility */
.focus-visible-only:not(:focus-visible) {
    outline: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --border-color: #000000;
        --text-primary: #000000;
        --text-secondary: #000000;
    }
}

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