/**
 * emadbrz – Centralized design tokens (Indigo-violet palette, light + dark)
 */

:root {
    /* Raw palette – indigo / violet accent */
    --color-50: #f5f5ff;
    --color-100: #ededff;
    --color-200: #dcdcff;
    --color-300: #c4c3ff;
    --color-400: #9b98f5;
    --color-500: #5b58f2;
    --color-600: #4a47e0;
    --color-700: #3d3ac8;
    --color-800: #312fa8;
    --color-900: #252388;

    /* Semantic */
    --background-primary: #ffffff;
    --background-secondary: #f5f5ff;
    --surface: #ffffff;
    --surface-hover: #f5f5ff;

    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #6b7280;

    --primary: #5b58f2;
    --primary-hover: #4a47e0;
    --primary-light: #9b98f5;

    --border: #e5e7eb;
    --border-hover: #d1d5db;

    --success: #4292c6;
    --focus-ring: rgba(91, 88, 242, 0.25);

    --text-on-primary: #ffffff;
    --text-on-surface: var(--text-primary);

    /* Feedback (accessible on light backgrounds) */
    --error: #b42318;
    --error-bg: rgba(180, 35, 24, 0.08);
    --error-border: rgba(180, 35, 24, 0.35);
    --success-bg: rgba(91, 88, 242, 0.08);
    --success-border: rgba(91, 88, 242, 0.25);

    /* Elevation & overlays */
    --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
    --shadow-sm: 0 2px 8px rgba(17, 24, 39, 0.06);
    --shadow-md: 0 8px 24px rgba(17, 24, 39, 0.08);
    --shadow-lg: 0 16px 40px rgba(17, 24, 39, 0.1);
    --overlay: rgba(17, 24, 39, 0.35);
    --overlay-strong: rgba(17, 24, 39, 0.5);

    /* Surfaces */
    --glass-bg: #ffffff;
    --glass-border: var(--border);
    --glass-shadow: var(--shadow-md);

    /* Interaction */
    --state-disabled-opacity: 0.5;
    --state-disabled-bg: var(--color-200);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 100px;

    /* Gradients */
    --gradient-heading: linear-gradient(135deg, var(--text-primary) 0%, var(--primary) 100%);
    --gradient-primary: linear-gradient(135deg, var(--color-500) 0%, var(--color-600) 100%);
    --gradient-primary-hover: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    --gradient-surface: linear-gradient(180deg, var(--surface) 0%, var(--background-secondary) 100%);
    --gradient-accent-border: linear-gradient(135deg, var(--primary-light) 0%, transparent 50%, var(--color-500) 100%);

    /* Legacy aliases (section files – map to semantic tokens) */
    --accent: var(--primary);
    --accent-hover: var(--primary-hover);
    --accent-light: var(--primary-light);
    --accent-soft: rgba(91, 88, 242, 0.1);
    --accent-faint: rgba(91, 88, 242, 0.05);
    --accent-border: rgba(91, 88, 242, 0.25);
    --section-text: var(--text-primary);
    --section-muted: var(--text-muted);
    --card-bg: var(--surface);
    --card-border: var(--border);
    --card-border-hover: var(--border-hover);
    --input-bg: var(--surface);
    --input-border: var(--border);
    --input-focus: var(--focus-ring);

    /* Page & hero – pure white */
    --page-bg: #ffffff;

    --hero-shell-bg: #ffffff;
    --hero-shell-shadow: 0 4px 24px rgba(17, 24, 39, 0.06);
    --hero-badge-bg: #ffffff;
    --hero-badge-shadow: 0 2px 8px rgba(17, 24, 39, 0.04);
    --hero-text: #111827;
    --hero-text-muted: #6b7280;
    --hero-glass-bg: #ffffff;
    --hero-glass-border: var(--border);
    --hero-glass-shadow: 0 4px 16px rgba(17, 24, 39, 0.05);
    --hero-border-subtle: var(--border);
    --hero-btn-secondary-bg: #ffffff;
    --hero-btn-secondary-border: var(--border);
    --hero-btn-secondary-hover: #f5f5ff;
    --hero-icon-bg: #ffffff;
}

html[data-theme="dark"] {
    --color-50: #12121a;
    --color-100: #1a1a24;
    --color-200: #252532;
    --color-300: #35354a;
    --color-400: #6b68e8;
    --color-500: #9b98f5;
    --color-600: #b4b2ff;
    --color-700: #c4c3ff;
    --color-800: #dcdcff;
    --color-900: #ededff;

    --background-primary: #0f1117;
    --background-secondary: #161822;
    --surface: #1c1f2b;
    --surface-hover: #252936;

    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;

    --primary: #9b98f5;
    --primary-hover: #b4b2ff;
    --primary-light: #7c79f0;

    --border: #2d3344;
    --border-hover: #3d4458;

    --success: #6eb5e0;
    --focus-ring: rgba(155, 152, 245, 0.28);

    --text-on-primary: #0f1117;
    --text-on-surface: var(--text-primary);

    --error: #fca5a5;
    --error-bg: rgba(248, 113, 113, 0.12);
    --error-border: rgba(248, 113, 113, 0.35);
    --success-bg: rgba(155, 152, 245, 0.12);
    --success-border: rgba(155, 152, 245, 0.35);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4);
    --overlay: rgba(0, 0, 0, 0.55);
    --overlay-strong: rgba(0, 0, 0, 0.72);

    --glass-bg: rgba(28, 31, 43, 0.92);
    --glass-border: rgba(148, 163, 184, 0.18);
    --glass-shadow: var(--shadow-md);

    --state-disabled-bg: var(--color-200);

    --gradient-heading: linear-gradient(135deg, #f1f5f9 0%, var(--primary) 100%);
    --gradient-primary: linear-gradient(135deg, var(--color-500) 0%, var(--color-600) 100%);
    --gradient-primary-hover: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    --gradient-surface: linear-gradient(180deg, var(--surface) 0%, var(--background-secondary) 100%);
    --gradient-accent-border: linear-gradient(135deg, var(--primary-light) 0%, transparent 50%, var(--color-500) 100%);

    --accent-soft: rgba(155, 152, 245, 0.14);
    --accent-faint: rgba(155, 152, 245, 0.08);
    --accent-border: rgba(155, 152, 245, 0.35);

    --page-bg: #0f1117;

    --hero-shell-bg: #161822;
    --hero-shell-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    --hero-badge-bg: #1c1f2b;
    --hero-badge-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    --hero-text: #f1f5f9;
    --hero-text-muted: #94a3b8;
    --hero-glass-bg: rgba(28, 31, 43, 0.88);
    --hero-glass-border: rgba(148, 163, 184, 0.16);
    --hero-glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
    --hero-border-subtle: var(--border);
    --hero-btn-secondary-bg: #1c1f2b;
    --hero-btn-secondary-border: var(--border);
    --hero-btn-secondary-hover: #252936;
    --hero-icon-bg: #252936;
}

/* Global interaction utilities */
.emadbrz-btn,
button.emadbrz-cta,
a.emadbrz-cta-primary {
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

.emadbrz-btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--focus-ring);
}

.emadbrz-btn:disabled,
button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    opacity: var(--state-disabled-opacity);
    cursor: not-allowed;
    background: var(--state-disabled-bg);
}