/*
 * Menyra Design Tokens — Module 2.1
 *
 * Use semantic variables in application CSS. Primitive palette variables are
 * exposed for exceptional cases, but components should prefer --mn-color-*.
 */

:root,
[data-theme="light"] {
    color-scheme: light;

    /* Brand primitives */
    --mn-teal-50: #f0fdfa;
    --mn-teal-100: #ccfbf1;
    --mn-teal-200: #99f6e4;
    --mn-teal-300: #5eead4;
    --mn-teal-400: #2dd4bf;
    --mn-teal-500: #14b8a6;
    --mn-teal-600: #0d9488;
    --mn-teal-700: #0f766e;
    --mn-teal-800: #115e59;
    --mn-teal-900: #134e4a;
    --mn-teal-950: #042f2e;

    --mn-amber-50: #fffbeb;
    --mn-amber-100: #fef3c7;
    --mn-amber-200: #fde68a;
    --mn-amber-300: #fcd34d;
    --mn-amber-400: #fbbf24;
    --mn-amber-500: #f59e0b;
    --mn-amber-600: #d97706;
    --mn-amber-700: #b45309;
    --mn-amber-800: #92400e;
    --mn-amber-900: #78350f;

    /* Neutral primitives */
    --mn-slate-0: #ffffff;
    --mn-slate-50: #f8fafc;
    --mn-slate-100: #f1f5f9;
    --mn-slate-200: #e2e8f0;
    --mn-slate-300: #cbd5e1;
    --mn-slate-400: #94a3b8;
    --mn-slate-500: #64748b;
    --mn-slate-600: #475569;
    --mn-slate-700: #334155;
    --mn-slate-800: #1e293b;
    --mn-slate-900: #0f172a;
    --mn-slate-950: #020617;

    /* Status primitives */
    --mn-green-50: #f0fdf4;
    --mn-green-600: #16a34a;
    --mn-green-700: #15803d;
    --mn-red-50: #fef2f2;
    --mn-red-600: #dc2626;
    --mn-red-700: #b91c1c;
    --mn-blue-50: #eff6ff;
    --mn-blue-600: #2563eb;
    --mn-blue-700: #1d4ed8;

    /* Semantic colors */
    --mn-color-bg: var(--mn-slate-50);
    --mn-color-surface: var(--mn-slate-0);
    --mn-color-surface-subtle: var(--mn-slate-100);
    --mn-color-surface-raised: var(--mn-slate-0);
    --mn-color-text: var(--mn-slate-900);
    --mn-color-text-muted: var(--mn-slate-600);
    --mn-color-text-subtle: var(--mn-slate-500);
    --mn-color-border: var(--mn-slate-200);
    --mn-color-border-strong: var(--mn-slate-300);

    --mn-color-primary: var(--mn-teal-700);
    --mn-color-primary-hover: var(--mn-teal-800);
    --mn-color-primary-active: var(--mn-teal-900);
    --mn-color-primary-soft: var(--mn-teal-50);
    --mn-color-primary-text: #ffffff;

    --mn-color-accent: var(--mn-amber-600);
    --mn-color-accent-hover: var(--mn-amber-700);
    --mn-color-accent-soft: var(--mn-amber-50);

    --mn-color-success: var(--mn-green-700);
    --mn-color-success-soft: var(--mn-green-50);
    --mn-color-danger: var(--mn-red-700);
    --mn-color-danger-soft: var(--mn-red-50);
    --mn-color-info: var(--mn-blue-700);
    --mn-color-info-soft: var(--mn-blue-50);
    --mn-color-warning: var(--mn-amber-700);
    --mn-color-warning-soft: var(--mn-amber-50);

    --mn-color-focus: var(--mn-teal-600);
    --mn-color-overlay: rgb(15 23 42 / 52%);

    /* Typography */
    --mn-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mn-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --mn-font-size-xs: 0.75rem;
    --mn-font-size-sm: 0.875rem;
    --mn-font-size-md: 1rem;
    --mn-font-size-lg: 1.125rem;
    --mn-font-size-xl: 1.25rem;
    --mn-font-size-2xl: 1.5rem;
    --mn-font-size-3xl: 1.875rem;
    --mn-font-size-4xl: 2.25rem;
    --mn-font-size-5xl: 3rem;

    --mn-font-weight-regular: 400;
    --mn-font-weight-medium: 500;
    --mn-font-weight-semibold: 600;
    --mn-font-weight-bold: 700;

    --mn-line-height-tight: 1.2;
    --mn-line-height-heading: 1.3;
    --mn-line-height-body: 1.6;

    /* Spacing: 4px base */
    --mn-space-0: 0;
    --mn-space-1: 0.25rem;
    --mn-space-2: 0.5rem;
    --mn-space-3: 0.75rem;
    --mn-space-4: 1rem;
    --mn-space-5: 1.25rem;
    --mn-space-6: 1.5rem;
    --mn-space-8: 2rem;
    --mn-space-10: 2.5rem;
    --mn-space-12: 3rem;
    --mn-space-16: 4rem;
    --mn-space-20: 5rem;
    --mn-space-24: 6rem;

    /* Radius */
    --mn-radius-none: 0;
    --mn-radius-sm: 0.375rem;
    --mn-radius-md: 0.625rem;
    --mn-radius-lg: 0.875rem;
    --mn-radius-xl: 1.125rem;
    --mn-radius-2xl: 1.5rem;
    --mn-radius-pill: 9999px;

    /* Borders */
    --mn-border-width: 1px;
    --mn-border-width-strong: 2px;
    --mn-border-default: var(--mn-border-width) solid var(--mn-color-border);
    --mn-border-strong: var(--mn-border-width) solid var(--mn-color-border-strong);

    /* Shadows */
    --mn-shadow-xs: 0 1px 2px rgb(15 23 42 / 5%);
    --mn-shadow-sm: 0 1px 3px rgb(15 23 42 / 8%), 0 1px 2px rgb(15 23 42 / 4%);
    --mn-shadow-md: 0 8px 24px rgb(15 23 42 / 10%);
    --mn-shadow-lg: 0 18px 48px rgb(15 23 42 / 14%);

    /* Layout */
    --mn-content-xs: 32rem;
    --mn-content-sm: 40rem;
    --mn-content-md: 48rem;
    --mn-content-lg: 64rem;
    --mn-content-xl: 80rem;
    --mn-content-2xl: 90rem;

    /* Motion */
    --mn-duration-fast: 120ms;
    --mn-duration-normal: 180ms;
    --mn-duration-slow: 260ms;
    --mn-ease-standard: cubic-bezier(0.2, 0, 0, 1);

    /* Focus */
    --mn-focus-ring: 0 0 0 3px rgb(13 148 136 / 24%);
}

[data-theme="dark"] {
    color-scheme: dark;

    --mn-color-bg: #0b1120;
    --mn-color-surface: #111827;
    --mn-color-surface-subtle: #172033;
    --mn-color-surface-raised: #182235;
    --mn-color-text: #f8fafc;
    --mn-color-text-muted: #cbd5e1;
    --mn-color-text-subtle: #94a3b8;
    --mn-color-border: #293548;
    --mn-color-border-strong: #3b4a61;

    --mn-color-primary: var(--mn-teal-400);
    --mn-color-primary-hover: var(--mn-teal-300);
    --mn-color-primary-active: var(--mn-teal-200);
    --mn-color-primary-soft: rgb(20 184 166 / 14%);
    --mn-color-primary-text: var(--mn-teal-950);

    --mn-color-accent: var(--mn-amber-400);
    --mn-color-accent-hover: var(--mn-amber-300);
    --mn-color-accent-soft: rgb(245 158 11 / 14%);

    --mn-color-success: #4ade80;
    --mn-color-success-soft: rgb(34 197 94 / 14%);
    --mn-color-danger: #f87171;
    --mn-color-danger-soft: rgb(239 68 68 / 14%);
    --mn-color-info: #60a5fa;
    --mn-color-info-soft: rgb(59 130 246 / 14%);
    --mn-color-warning: #fbbf24;
    --mn-color-warning-soft: rgb(245 158 11 / 14%);

    --mn-color-focus: var(--mn-teal-400);
    --mn-color-overlay: rgb(2 6 23 / 72%);

    --mn-shadow-xs: 0 1px 2px rgb(0 0 0 / 20%);
    --mn-shadow-sm: 0 2px 8px rgb(0 0 0 / 22%);
    --mn-shadow-md: 0 10px 30px rgb(0 0 0 / 28%);
    --mn-shadow-lg: 0 22px 60px rgb(0 0 0 / 34%);

    --mn-focus-ring: 0 0 0 3px rgb(45 212 191 / 28%);
}

/*
 * Follow OS preference only when the application has not explicitly set
 * data-theme="light" or data-theme="dark".
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;

        --mn-color-bg: #0b1120;
        --mn-color-surface: #111827;
        --mn-color-surface-subtle: #172033;
        --mn-color-surface-raised: #182235;
        --mn-color-text: #f8fafc;
        --mn-color-text-muted: #cbd5e1;
        --mn-color-text-subtle: #94a3b8;
        --mn-color-border: #293548;
        --mn-color-border-strong: #3b4a61;

        --mn-color-primary: var(--mn-teal-400);
        --mn-color-primary-hover: var(--mn-teal-300);
        --mn-color-primary-active: var(--mn-teal-200);
        --mn-color-primary-soft: rgb(20 184 166 / 14%);
        --mn-color-primary-text: var(--mn-teal-950);

        --mn-color-accent: var(--mn-amber-400);
        --mn-color-accent-hover: var(--mn-amber-300);
        --mn-color-accent-soft: rgb(245 158 11 / 14%);

        --mn-color-success: #4ade80;
        --mn-color-success-soft: rgb(34 197 94 / 14%);
        --mn-color-danger: #f87171;
        --mn-color-danger-soft: rgb(239 68 68 / 14%);
        --mn-color-info: #60a5fa;
        --mn-color-info-soft: rgb(59 130 246 / 14%);
        --mn-color-warning: #fbbf24;
        --mn-color-warning-soft: rgb(245 158 11 / 14%);

        --mn-color-focus: var(--mn-teal-400);
        --mn-color-overlay: rgb(2 6 23 / 72%);

        --mn-shadow-xs: 0 1px 2px rgb(0 0 0 / 20%);
        --mn-shadow-sm: 0 2px 8px rgb(0 0 0 / 22%);
        --mn-shadow-md: 0 10px 30px rgb(0 0 0 / 28%);
        --mn-shadow-lg: 0 22px 60px rgb(0 0 0 / 34%);

        --mn-focus-ring: 0 0 0 3px rgb(45 212 191 / 28%);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --mn-duration-fast: 0ms;
        --mn-duration-normal: 0ms;
        --mn-duration-slow: 0ms;
    }
}