/*
 * Shared audit app design tokens.
 *
 * Dark mode is centralized here: every reusable app-shell component should use
 * these variables rather than hard-coding separate light/dark colors. Add a new
 * token when a repeated color role appears across pages; add page-local dark
 * overrides only for one-off report/workflow details that do not belong to the
 * shared internal tool shell.
 */

:root {
    color-scheme: light;
    /*
     * V6 platform tokens.
     * These names intentionally match docs/product/v6/design-system.md and
     * are the source for new shared internal-tool surfaces. The legacy --sg-*
     * aliases below remain during the phased migration.
     */
    --bg-50: #eef1f5;
    --bg-100: #e2e6ed;
    --bg-150: #d6dbe4;
    --bg-200: #c4cbd6;

    --surface: #f6f8fb;
    --surface-2: #eaeef4;
    --surface-3: #dde3ec;

    --ink-900: #0a0e1a;
    --ink-800: #141925;
    --ink-700: #2a3142;
    --ink-600: #4a5266;
    --ink-500: #6c7488;
    --ink-400: #9098ab;
    --ink-300: #b4bbcc;

    --cobalt: #3252ff;
    --cobalt-deep: #1d35d9;
    --cobalt-soft: #dde3ff;
    --cobalt-glow: rgba(50, 82, 255, 0.18);

    --teal: #0d6e6e;
    --teal-soft: #c8dee0;
    --steel: #5a7090;
    --steel-soft: #d4dbe6;
    --indigo: #3a4570;
    --indigo-soft: #d2d8e6;

    --line: #cbd2dc;
    --line-soft: #dbe1ea;
    --line-hair: #e7ebf2;

    --shadow-xs: 0 1px 0 rgba(10, 14, 26, 0.04);
    --shadow-sm: 0 1px 3px rgba(10, 14, 26, 0.06);
    --shadow-md: 0 4px 14px rgba(10, 14, 26, 0.08);

    --radius-panel: 2px;
    --radius-control: 5px;
    --radius-tag: 5px;

    --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --sg-shell-max-width: min(1680px, calc(100vw - 3rem));

    --sg-app-bg: #f9fafb;
    --sg-surface: #ffffff;
    --sg-surface-muted: #f3f4f6;
    --sg-surface-soft: #f8fafc;
    --sg-border: #e5e7eb;
    --sg-border-strong: #d1d5db;
    --sg-text: #111827;
    --sg-text-muted: #4b5563;
    --sg-text-faint: #6b7280;

    --sg-red: #c8102e;
    --sg-red-dark: #9a0c23;
    --sg-red-light: #fee2e5;
    --sg-accent: var(--sg-red);
    --sg-accent-strong: var(--sg-red-dark);
    --sg-navy: #0f1b2d;

    --sg-gray-900: #111827;
    --sg-gray-800: #1f2937;
    --sg-gray-700: #374151;
    --sg-gray-600: #4b5563;
    --sg-gray-500: #6b7280;
    --sg-gray-400: #9ca3af;
    --sg-gray-300: #d1d5db;
    --sg-gray-200: #e5e7eb;
    --sg-gray-100: #f3f4f6;
    --sg-gray-50: #f9fafb;

    --sg-blue-700: #1d4ed8;
    --sg-blue-600: #2563eb;
    --sg-blue-100: #dbeafe;
    --sg-green-700: #047857;
    --sg-green-600: #059669;
    --sg-green-100: #d1fae5;
    --sg-amber-700: #b45309;
    --sg-amber-600: #d97706;
    --sg-amber-100: #fef3c7;

    --sg-radius-xs: 0.375rem;
    --sg-radius-sm: 0.5rem;
    --sg-radius-md: 0.625rem;
    --sg-radius-lg: 0.75rem;
    --sg-radius-xl: 1rem;
    --sg-radius-pill: 9999px;

    --sg-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --sg-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    --sg-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);

    --sg-card-padding: 1.25rem;
    --sg-control-height: 2.5rem;
    --sg-control-height-lg: 2.875rem;

    --sg-tool-surface: #ffffff;
    --sg-tool-surface-muted: #f9fafb;
    --sg-tool-surface-soft: #f3f4f6;
    --sg-tool-control-active-bg: #111827;
    --sg-tool-control-active-text: #ffffff;
    --sg-tool-danger-soft: var(--sg-red-light);
    --sg-tool-warning-soft: var(--sg-amber-100);
    --sg-tool-clean-soft: var(--sg-green-100);
    --sg-tool-danger-border: #fecdd4;
    --sg-tool-warning-border: #fde68a;
    --sg-tool-clean-border: #a7f3d0;

    --sg-brand-charcoal: #424242;
    --sg-brand-charcoal-strong: #3a3a3a;
    --sg-brand-text: #f5f5f4;
    --sg-brand-text-muted: #d6d3d1;
}

/*
 * The theme toggle in ui-behavior.js switches this class on the html element.
 * Keep light and dark values paired by semantic role so new internal pages get
 * a consistent dark theme by using the shared sg-* and sg-tool-* classes.
 */
html.theme-dark {
    color-scheme: dark;
    --sg-app-bg: #111315;
    --sg-surface: #1a1d21;
    --sg-surface-muted: #23272c;
    --sg-surface-soft: #20242a;
    --sg-border: #2e343b;
    --sg-border-strong: #3b434c;
    --sg-text: #f3f4f6;
    --sg-text-muted: #d7dbe0;
    --sg-text-faint: #9aa3ad;

    --sg-red: #fb7185;
    --sg-red-dark: #fda4af;
    --sg-red-light: rgba(190, 24, 93, 0.22);
    --sg-accent: var(--sg-red);
    --sg-accent-strong: var(--sg-red-dark);
    --sg-navy: #f3f4f6;

    --sg-gray-900: #f3f4f6;
    --sg-gray-800: #e5e7eb;
    --sg-gray-700: #d7dbe0;
    --sg-gray-600: #c6ccd2;
    --sg-gray-500: #9aa3ad;
    --sg-gray-400: #6b7280;
    --sg-gray-300: #3b434c;
    --sg-gray-200: #2e343b;
    --sg-gray-100: #23272c;
    --sg-gray-50: #111315;

    --sg-blue-700: #93c5fd;
    --sg-blue-600: #bfdbfe;
    --sg-blue-100: rgba(51, 65, 85, 0.44);
    --sg-green-700: #bbf7d0;
    --sg-green-600: #86efac;
    --sg-green-100: rgba(20, 83, 45, 0.32);
    --sg-amber-700: #fde68a;
    --sg-amber-600: #fbbf24;
    --sg-amber-100: rgba(146, 64, 14, 0.28);

    --sg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
    --sg-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
    --sg-shadow-md: 0 18px 40px rgba(0, 0, 0, 0.32);

    --sg-tool-surface: var(--sg-surface);
    --sg-tool-surface-muted: var(--sg-app-bg);
    --sg-tool-surface-soft: var(--sg-surface-muted);
    --sg-tool-control-active-bg: var(--sg-border-strong);
    --sg-tool-control-active-text: var(--sg-text);
    --sg-tool-danger-soft: rgba(127, 29, 29, 0.3);
    --sg-tool-warning-soft: rgba(133, 77, 14, 0.3);
    --sg-tool-clean-soft: rgba(20, 83, 45, 0.32);
    --sg-tool-danger-border: rgba(248, 113, 113, 0.3);
    --sg-tool-warning-border: rgba(250, 204, 21, 0.24);
    --sg-tool-clean-border: rgba(74, 222, 128, 0.24);
}

html.theme-dark .sg-auth-page,
html.theme-dark .sg-intake-shell,
html.theme-dark .sg-dashboard-shell,
html.theme-dark .sg-activity-shell,
html.theme-dark .sg-status-shell,
html.theme-dark .sg-admin-page,
html.theme-dark .sg-tool-page,
html.theme-dark .sg-v6-workspace-body,
html.theme-dark .sg-v6-client-report-body {
    /*
     * V6 page surfaces use the newer --bg/--surface/--ink tokens directly.
     * Scope their dark-mode values to app content so the persistent hub chrome
     * can keep its fixed dark brand treatment.
     */
    --bg-50: #0f1216;
    --bg-100: #161b22;
    --bg-150: #202733;
    --bg-200: #2c3543;

    --surface: #151a21;
    --surface-2: #1d232d;
    --surface-3: #252d39;

    --ink-900: #f6f8fb;
    --ink-800: #e8edf4;
    --ink-700: #d0d8e5;
    --ink-600: #aeb8c8;
    --ink-500: #8d98aa;
    --ink-400: #69758a;
    --ink-300: #4b5568;

    --cobalt-deep: #8fa2ff;
    --cobalt-soft: rgba(50, 82, 255, 0.22);

    --teal-soft: rgba(13, 110, 110, 0.28);
    --steel-soft: rgba(90, 112, 144, 0.3);
    --indigo-soft: rgba(58, 69, 112, 0.42);

    --line: #2e3746;
    --line-soft: #26303d;
    --line-hair: #202837;

    --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.28);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32);
    --shadow-md: 0 14px 32px rgba(0, 0, 0, 0.28);
}