/* DevAPI Hub design tokens — shared by the public site (main.css) and the dashboard (Tailwind). */

:root {
    /* Brand: indigo (primary) and sky (secondary), taken from the logo gradient */
    --dh-brand-50: #eef2ff;
    --dh-brand-100: #e0e7ff;
    --dh-brand-200: #c7d2fe;
    --dh-brand-300: #a5b4fc;
    --dh-brand-400: #818cf8;
    --dh-brand-500: #6366f1;
    --dh-brand-600: #4f46e5;
    --dh-brand-700: #4338ca;
    --dh-brand-800: #3730a3;
    --dh-brand-900: #312e81;

    --dh-sky-400: #38bdf8;
    --dh-sky-500: #0ea5e9;
    --dh-sky-600: #0284c7;

    /* Neutrals: cool "ink" scale */
    --dh-ink-0: #ffffff;
    --dh-ink-25: #fafbfc;
    --dh-ink-50: #f4f5f8;
    --dh-ink-100: #eceef2;
    --dh-ink-200: #dfe2e8;
    --dh-ink-300: #c6cbd4;
    --dh-ink-400: #969dab;
    --dh-ink-500: #636b7b;
    --dh-ink-600: #4a5161;
    --dh-ink-700: #343a47;
    --dh-ink-800: #22262f;
    --dh-ink-850: #1a1d24;
    --dh-ink-900: #121419;
    --dh-ink-950: #0b0d11;

    /* Semantic surfaces & text (light) */
    --dh-bg: var(--dh-ink-0);
    --dh-bg-subtle: var(--dh-ink-25);
    --dh-surface: var(--dh-ink-0);
    --dh-surface-muted: var(--dh-ink-50);
    --dh-surface-raised: var(--dh-ink-0);
    --dh-border: var(--dh-ink-200);
    --dh-border-strong: var(--dh-ink-300);
    --dh-text: var(--dh-ink-900);
    --dh-text-muted: var(--dh-ink-500);
    --dh-text-subtle: var(--dh-ink-400);

    --dh-accent: var(--dh-brand-600);
    --dh-accent-hover: var(--dh-brand-700);
    --dh-accent-text: var(--dh-brand-600);
    --dh-accent-soft: var(--dh-brand-50);
    --dh-accent-2: var(--dh-sky-600);
    --dh-on-accent: #ffffff;
    --dh-focus-ring: rgba(79, 70, 229, 0.35);

    --dh-input-bg: var(--dh-ink-0);
    --dh-input-border: var(--dh-ink-300);
    --dh-nav-bg: rgba(255, 255, 255, 0.88);
    --dh-overlay: rgba(11, 13, 17, 0.5);

    /* Code panels stay dark in both themes */
    --dh-code-bg: #0e1016;
    --dh-code-bar: #151821;
    --dh-code-border: #242834;
    --dh-code-text: #e4e7ee;
    --dh-code-muted: #7c8494;
    --dh-code-key: #a5b4fc;
    --dh-code-string: #86efac;
    --dh-code-number: #fcd34d;
    --dh-code-flag: #7dd3fc;

    /* Status (operational / degraded / partial outage / major outage / info / neutral) */
    --dh-success: #15803d;
    --dh-success-soft: #e8f6ed;
    --dh-success-dot: #22c55e;
    --dh-warning: #a16207;
    --dh-warning-soft: #fdf6e3;
    --dh-warning-dot: #eab308;
    --dh-orange: #c2410c;
    --dh-orange-soft: #fdefe6;
    --dh-orange-dot: #f97316;
    --dh-danger: #b91c1c;
    --dh-danger-soft: #fdecec;
    --dh-danger-dot: #ef4444;
    --dh-info: #0369a1;
    --dh-info-soft: #e6f3fa;
    --dh-info-dot: #0ea5e9;
    --dh-neutral: var(--dh-ink-600);
    --dh-neutral-soft: var(--dh-ink-100);
    --dh-neutral-dot: var(--dh-ink-400);

    /* Charts */
    --dh-chart-1: #4f46e5;
    --dh-chart-2: #0ea5e9;
    --dh-chart-3: #14b8a6;
    --dh-chart-4: #f59e0b;
    --dh-chart-5: #ec4899;
    --dh-chart-grid: var(--dh-ink-100);

    /* Typography */
    --dh-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --dh-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Shape & depth */
    --dh-radius-sm: 4px;
    --dh-radius-md: 6px;
    --dh-radius-lg: 10px;
    --dh-shadow-sm: 0 1px 2px rgba(16, 18, 24, 0.06);
    --dh-shadow-md: 0 4px 12px -2px rgba(16, 18, 24, 0.08), 0 2px 4px -2px rgba(16, 18, 24, 0.06);
    --dh-shadow-lg: 0 16px 32px -8px rgba(16, 18, 24, 0.14), 0 4px 8px -4px rgba(16, 18, 24, 0.06);
}

.dark {
    --dh-bg: var(--dh-ink-950);
    --dh-bg-subtle: #0f1116;
    --dh-surface: #13161c;
    --dh-surface-muted: #181b22;
    --dh-surface-raised: #1c2028;
    --dh-border: #262a33;
    --dh-border-strong: #353a46;
    --dh-text: #e9ebef;
    --dh-text-muted: #9aa1ae;
    --dh-text-subtle: #6f7685;

    --dh-accent: var(--dh-brand-500);
    --dh-accent-hover: var(--dh-brand-400);
    --dh-accent-text: var(--dh-brand-300);
    --dh-accent-soft: rgba(99, 102, 241, 0.14);
    --dh-accent-2: var(--dh-sky-400);
    --dh-focus-ring: rgba(129, 140, 248, 0.45);

    --dh-input-bg: #0f1116;
    --dh-input-border: #353a46;
    --dh-nav-bg: rgba(11, 13, 17, 0.85);
    --dh-overlay: rgba(0, 0, 0, 0.65);

    --dh-success: #4ade80;
    --dh-success-soft: rgba(34, 197, 94, 0.12);
    --dh-warning: #facc15;
    --dh-warning-soft: rgba(234, 179, 8, 0.12);
    --dh-orange: #fb923c;
    --dh-orange-soft: rgba(249, 115, 22, 0.13);
    --dh-danger: #f87171;
    --dh-danger-soft: rgba(239, 68, 68, 0.13);
    --dh-info: #7dd3fc;
    --dh-info-soft: rgba(14, 165, 233, 0.13);
    --dh-neutral: #b3b9c5;
    --dh-neutral-soft: rgba(150, 157, 171, 0.14);
    --dh-neutral-dot: #6f7685;

    --dh-chart-1: #818cf8;
    --dh-chart-2: #38bdf8;
    --dh-chart-3: #2dd4bf;
    --dh-chart-4: #fbbf24;
    --dh-chart-5: #f472b6;
    --dh-chart-grid: #22262f;

    --dh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --dh-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
    --dh-shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.6);

    color-scheme: dark;
}