/* TeMS theme foundation. Page CSS owns layout; this file owns shared values.
   Keep the --tems-* tokens here and use the legacy aliases during migration. */
:root {
    color-scheme: light;

    /* Four CRUD hues; these tokens affect action controls only. */
    --tems-crud-create: #15803d;
    --tems-crud-read: #1d4ed8;
    --tems-crud-update: #b45309;
    --tems-crud-delete: #b91c1c;
    --tems-crud-create-fill: #15803d;
    --tems-crud-read-fill: #1d4ed8;
    --tems-crud-update-fill: #b45309;
    --tems-crud-delete-fill: #b91c1c;

    /* Brand and neutral colors */
    --tems-color-red: #c1121f;
    --tems-color-red-dark: #8f0d17;
    --tems-color-red-soft: #fef2f2;
    --tems-color-blue: #1d4ed8;
    --tems-color-blue-dark: #1e3a8a;
    --tems-color-black: #111111;
    --tems-color-heading: #111827;
    --tems-color-text: #1f2937;
    --tems-color-muted: #526078;
    --tems-color-on-brand: #ffffff;
    --tems-background: #f5f7fb;
    --tems-page-background: linear-gradient(180deg, var(--tems-surface), var(--tems-background) 55%, var(--tems-surface-blue));
    --tems-surface: #ffffff;
    --tems-surface-subtle: #f8fafc;
    --tems-surface-blue: #eef3ff;
    --tems-border: #dbe3f0;
    --tems-border-strong: #c8d4e5;
    --tems-sidebar-start: #111827;
    --tems-sidebar-end: #1f2937;
    --tems-brand-gradient: linear-gradient(135deg, var(--tems-color-red), var(--tems-color-blue));
    --tems-sidebar-gradient: linear-gradient(180deg, var(--tems-sidebar-start), var(--tems-sidebar-end));

    /* Status colors describe outcomes independently of the brand. */
    --tems-success-text: #166534;
    --tems-success-bg: #ecfdf3;
    --tems-success-border: #bbf7d0;
    --tems-warning-text: #92400e;
    --tems-warning-bg: #fffbeb;
    --tems-warning-border: #fde68a;
    --tems-danger-text: #991b1b;
    --tems-danger-bg: #fef2f2;
    --tems-danger-border: #fecaca;
    --tems-info-text: var(--tems-color-blue);
    --tems-info-bg: #eff6ff;
    --tems-info-border: #bfdbfe;

    /* Native fonts require no external font download. */
    --tems-font-body: Arial, Helvetica, sans-serif;
    --tems-font-mono: Consolas, "Liberation Mono", monospace;
    --tems-font-size-xs: 0.75rem;
    --tems-font-size-sm: 0.875rem;
    --tems-font-size-base: 1rem;
    --tems-font-size-lg: 1.125rem;
    --tems-font-size-xl: 1.5rem;
    --tems-line-height-body: 1.5;
    --tems-line-height-heading: 1.2;

    /* Spacing and surfaces; role navigation dimensions remain separate. */
    --tems-space-1: 4px;
    --tems-space-2: 8px;
    --tems-space-3: 12px;
    --tems-space-4: 16px;
    --tems-space-5: 20px;
    --tems-space-6: 24px;
    --tems-space-8: 32px;
    --tems-space-10: 40px;
    --tems-space-12: 48px;
    --tems-section-gap: var(--tems-space-6);
    --tems-content-gap: var(--tems-space-4);
    --tems-action-gap: var(--tems-space-3);
    --tems-radius-sm: 12px;
    --tems-radius-md: 18px;
    --tems-radius-lg: 24px;
    --tems-radius-pill: 999px;
    --tems-shadow-sm: 0 8px 18px rgba(15, 23, 42, 0.06);
    --tems-shadow-md: 0 10px 25px rgba(15, 23, 42, 0.08);
    --tems-shadow-lg: 0 18px 35px rgba(15, 23, 42, 0.12);
    --tems-focus-ring: 0 0 0 3px rgba(29, 78, 216, 0.25);
    --tems-duration-fast: 0.15s;
    --tems-duration-normal: 0.28s;
    --tems-transition: all var(--tems-duration-normal) ease;

    /* Shared component controls */
    --tems-control-height: 44px;
    --tems-control-padding-y: 10px;
    --tems-control-padding-x: 16px;
    --tems-disabled-bg: #edf1f7;
    --tems-dialog-backdrop: rgba(15, 23, 42, 0.65);

    /* Compatibility aliases for existing page selectors. */
    --primary-red: var(--tems-color-red);
    --red: var(--tems-color-red);
    --brand: var(--tems-color-red);
    --dark-red: var(--tems-color-red-dark);
    --brand-dark: var(--tems-color-red-dark);
    --brand-soft: var(--tems-color-red-soft);
    --primary-blue: var(--tems-color-blue);
    --blue: var(--tems-color-blue);
    --dark-blue: var(--tems-color-blue-dark);
    --blue-dark: var(--tems-color-blue-dark);
    --navy: var(--tems-color-blue-dark);
    --black: var(--tems-color-black);
    --dark: var(--tems-color-heading);
    --ink: var(--tems-color-heading);
    --text-dark: var(--tems-color-text);
    --text-main: var(--tems-color-text);
    --text: var(--tems-color-text);
    --text-muted: var(--tems-color-muted);
    --muted: var(--tems-color-muted);
    --white: var(--tems-surface);
    --surface: var(--tems-surface);
    --bg-main: var(--tems-background);
    --soft-bg: var(--tems-background);
    --bg: var(--tems-background);
    --soft: var(--tems-background);
    --bg-soft: var(--tems-surface-blue);
    --alt-bg: var(--tems-surface-blue);
    --pale: var(--tems-surface-blue);
    --surface-subtle: var(--tems-surface-subtle);
    --border: var(--tems-border);
    --line: var(--tems-border);
    --border-strong: var(--tems-border-strong);
    --sidebar-dark: var(--tems-sidebar-start);
    --sidebar-dark-soft: var(--tems-sidebar-end);
    --shadow-sm: var(--tems-shadow-sm);
    --shadow: var(--tems-shadow-md);
    --shadow-hover: var(--tems-shadow-lg);
    --radius-sm: var(--tems-radius-sm);
    --radius-md: var(--tems-radius-md);
    --radius: var(--tems-radius-md);
    --radius-lg: var(--tems-radius-lg);
    --radius-xl: var(--tems-radius-lg);
    --transition: var(--tems-transition);
    --success: var(--tems-success-text);
    --green: var(--tems-success-text);
    --success-text: var(--tems-success-text);
    --success-bg: var(--tems-success-bg);
    --success-border: var(--tems-success-border);
    --error-text: var(--tems-danger-text);
    --error-bg: var(--tems-danger-bg);
    --error-border: var(--tems-danger-border);
    --danger-text: var(--tems-danger-text);
    --danger-bg: var(--tems-danger-bg);
    --danger-border: var(--tems-danger-border);
    --pending-text: var(--tems-warning-text);
    --pending-bg: var(--tems-warning-bg);
    --pending-border: var(--tems-warning-border);
    --warning-text: var(--tems-warning-text);
    --warning-bg: var(--tems-warning-bg);
    --warning-border: var(--tems-warning-border);
    --info-text: var(--tems-info-text);
    --info-bg: var(--tems-info-bg);
    --info-border: var(--tems-info-border);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --tems-duration-fast: 0.01ms;
        --tems-duration-normal: 0.01ms;
    }
}

@media screen {
    body {
        font-family: var(--tems-font-body);
    }
}

/* Bright accents keep outline/icon controls legible on dark surfaces. */
html[data-tems-theme="dark"] {
    --tems-crud-create: #86efac;
    --tems-crud-read: #93c5fd;
    --tems-crud-update: #fcd34d;
    --tems-crud-delete: #fca5a5;
}