/**
 * Wayflow design tokens — adapted from Sloth Mint brand book.
 * Primary: mint green → navy blue scale. Neutrals, type, and shadows follow the brand book.
 *
 * Source: sloth-mint-brandbook.html (Townmaking)
 */

:root {
    /* ----- Primary scale (mint → navy blue) ----- */
    --brand-blue-50: #EFF6FF;
    --brand-blue-100: #DBEAFE;
    --brand-blue-200: #BFDBFE;
    --brand-blue-300: #93C5FD;
    --brand-blue-400: #3B82F6;
    --brand-blue-500: #2563EB;
    --brand-blue-600: #1D4ED8;
    --brand-blue-700: #1E40AF;
    --brand-blue-800: #1E3A8A;

    /* ----- Neutrals (brand book) ----- */
    --brand-carbon: #0A0A0A;
    --brand-ink: #1F2937;
    --brand-cloud: #F7F8FA;
    --brand-border: #E5E7EB;
    --brand-slate-400: #94A3B8;
    --brand-slate-ink: #475569;
    --brand-surface: #FFFFFF;

    /* ----- Semantic accents (tuned; success no longer = primary green) ----- */
    --brand-primary: var(--brand-blue-600);
    --brand-primary-hover: var(--brand-blue-700);
    --brand-primary-light: var(--brand-blue-400);
    --brand-success: #14B8A6;
    --brand-success-hover: #0D9488;
    --brand-danger: #EF4444;
    --brand-danger-hover: #DC2626;
    --brand-warning: #F59E0B;
    --brand-info: #60A5FA;

    --brand-on-primary: #FFFFFF;
    --brand-on-inverse: #FFFFFF;
    --brand-on-carbon: var(--brand-carbon);

    /* ----- Semantic tokens ----- */
    --wf-accent: var(--brand-primary);
    --wf-accent-hover: var(--brand-primary-hover);
    --wf-accent-light: var(--brand-primary-light);
    --wf-success: var(--brand-success);
    --wf-danger: var(--brand-danger);
    --wf-danger-hover: var(--brand-danger-hover);
    --wf-warn: var(--brand-warning);
    --wf-warning: var(--brand-warning);
    --wf-info: var(--brand-info);
    --wf-muted: var(--brand-slate-400);
    --wf-muted-2: var(--brand-slate-ink);

    --wf-bg-page: var(--brand-cloud);
    --wf-bg-elevated: var(--brand-surface);
    --wf-bg-muted: var(--brand-cloud);
    --wf-bg-hover: #EEF2F6;
    --wf-border: var(--brand-border);
    --wf-border-soft: #F1F5F9;
    --wf-text: var(--brand-ink);
    --wf-text-muted: var(--brand-slate-ink);
    --wf-heading: var(--brand-carbon);
    --wf-heading-2: var(--brand-ink);

    --wf-header-bg: #0F172A;
    --wf-header-bg-top: var(--brand-blue-800);
    --wf-header-text: var(--brand-on-inverse);
    --wf-header-link: var(--brand-blue-100);
    --wf-header-muted: var(--brand-blue-200);
    --wf-header-border: rgba(255, 255, 255, 0.08);
    --wf-header-accent: linear-gradient(90deg, var(--brand-blue-600) 0%, var(--brand-blue-400) 55%, var(--brand-info) 100%);
    --wf-on-accent: var(--brand-on-primary);
    --wf-on-inverse: var(--brand-on-inverse);

    --wf-shadow: rgba(10, 10, 10, 0.04);
    --wf-shadow-strong: rgba(10, 10, 10, 0.18);
    --wf-shadow-card: 0 1px 2px rgba(10, 10, 10, 0.04), 0 0 0 1px rgba(10, 10, 10, 0.04);
    --wf-shadow-lift: 0 10px 25px -10px rgba(10, 10, 10, 0.18);
    --wf-overlay-on-dark: rgba(255, 255, 255, 0.3);
    --wf-danger-surface: rgba(239, 68, 68, 0.1);

    --wf-selected-border: var(--brand-primary);
    --wf-selected-bg: var(--brand-blue-50);

    --wf-slider-track: var(--brand-border);
    --wf-slider-thumb-border: var(--brand-surface);
    --wf-close-icon: var(--brand-slate-ink);
    --wf-close-icon-hover: var(--brand-carbon);

    --wf-profile-bg: var(--brand-surface);
    --wf-profile-border: var(--brand-border);
    --wf-profile-text: var(--brand-carbon);
    --wf-profile-hover: var(--brand-cloud);
    --wf-menu-bg: var(--brand-surface);
    --wf-menu-border: var(--brand-border);
    --wf-menu-divider: var(--brand-border);

    --wf-login-bg: var(--brand-cloud);
    --wf-login-card: var(--brand-surface);
    --wf-login-header-bg: var(--brand-carbon);
    --wf-input-border: var(--brand-border);
    --wf-input-focus: var(--brand-primary);
    --wf-input-focus-ring: var(--brand-blue-50);
    --wf-btn-signin: var(--brand-primary);
    --wf-btn-signin-hover: var(--brand-primary-hover);

    --wf-toggle-bg: var(--brand-surface);
    --wf-toggle-border: var(--brand-border);
    --wf-toggle-text: var(--brand-slate-ink);
    --wf-toggle-track: #CBD5E1;
    --wf-toggle-thumb: var(--brand-surface);

    /* ----- Typography (brand book) ----- */
    --wf-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --wf-font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
    --wf-letter-tight: -0.03em;
    --wf-letter-tight-sm: -0.02em;

    --wf-text-xs: 0.75rem;
    --wf-text-sm: 0.875rem;
    --wf-text-base: 0.9375rem;
    --wf-text-lg: 1.25rem;
    --wf-text-xl: 1.5rem;

    /* ----- Spacing (4px base) ----- */
    --wf-space-2xs: 0.25rem;
    --wf-space-xs: 0.5rem;
    --wf-space-sm: 0.75rem;
    --wf-space-md: 1rem;
    --wf-space-lg: 1.5rem;
    --wf-space-xl: 2rem;

    /* ----- Radius (brand book) ----- */
    --wf-radius-sm: 6px;
    --wf-radius-md: 8px;
    --wf-radius-lg: 12px;
    --wf-radius-xl: 16px;
    --wf-radius-pill: 9999px;

    --wf-focus-ring: 0 0 0 4px var(--wf-input-focus-ring);

    /* ----- Widget surfaces ----- */
    --wf-surface-card: var(--brand-surface);
    --wf-surface-inset: var(--brand-cloud);
    --wf-header-chrome-bg: rgba(255, 255, 255, 0.06);
    --wf-header-chrome-border: rgba(255, 255, 255, 0.12);
    --wf-header-chrome-hover: rgba(255, 255, 255, 0.1);
    --wf-header-toolbar-bg: rgba(0, 0, 0, 0.2);

    --wf-badge-primary-bg: var(--brand-blue-50);
    --wf-badge-primary-text: var(--brand-blue-700);
    --wf-badge-primary-border: var(--brand-blue-100);
    --wf-badge-success-bg: #CCFBF1;
    --wf-badge-success-text: #0F766E;
    --wf-badge-success-border: #99F6E4;
    --wf-badge-warn-bg: #FFFBEB;
    --wf-badge-warn-text: #B45309;
    --wf-badge-warn-border: #FDE68A;
    --wf-badge-danger-bg: #FEF2F2;
    --wf-badge-danger-text: #DC2626;
    --wf-badge-danger-border: #FECACA;
    --wf-badge-neutral-bg: #F1F5F9;
    --wf-badge-neutral-text: var(--brand-slate-ink);
    --wf-badge-neutral-border: var(--brand-border);
}

html.dark {
    --brand-primary: #60A5FA;
    --brand-primary-hover: #93C5FD;
    --brand-primary-light: #3B82F6;

    --brand-carbon: #F7F8FA;
    --brand-ink: #E2E8F0;
    --brand-cloud: #0A0A0A;
    --brand-border: #30363D;
    --brand-slate-400: #8B949E;
    --brand-slate-ink: #94A3B8;
    --brand-surface: #161B22;

    --brand-success: #2DD4BF;
    --brand-danger: #F87171;
    --brand-danger-hover: #EF4444;
    --brand-warning: #FBBF24;
    --brand-info: #60A5FA;

    --wf-bg-hover: #21262D;
    --wf-border-soft: #21262D;
    --wf-heading: #F0F6FC;
    --wf-heading-2: #C9D1D9;
    --wf-text: #E6EDF3;

    --wf-header-bg: #010409;
    --wf-header-bg-top: #1E293B;
    --wf-header-link: #E2E8F0;
    --wf-header-muted: #94A3B8;
    --wf-header-border: rgba(255, 255, 255, 0.06);
    --wf-header-toolbar-bg: rgba(0, 0, 0, 0.35);
    --wf-shadow: rgba(0, 0, 0, 0.45);
    --wf-shadow-strong: rgba(0, 0, 0, 0.6);
    --wf-selected-bg: #1E293B;
    --wf-danger-surface: rgba(248, 113, 113, 0.15);
    --wf-input-focus-ring: rgba(37, 99, 235, 0.25);

    --wf-toggle-bg: #21262D;
    --wf-toggle-border: var(--brand-border);
    --wf-toggle-text: var(--brand-ink);
    --wf-toggle-track: #475569;
    --wf-toggle-thumb: #F7F8FA;

    --wf-header-chrome-bg: rgba(255, 255, 255, 0.06);
    --wf-header-chrome-border: rgba(255, 255, 255, 0.1);
    --wf-header-chrome-hover: rgba(255, 255, 255, 0.1);

    --wf-badge-primary-bg: #1E293B;
    --wf-badge-primary-text: #93C5FD;
    --wf-badge-primary-border: #334155;
    --wf-badge-success-bg: rgba(45, 212, 191, 0.15);
    --wf-badge-success-text: #5EEAD4;
    --wf-badge-success-border: rgba(45, 212, 191, 0.35);
    --wf-badge-warn-bg: rgba(251, 191, 36, 0.15);
    --wf-badge-warn-text: #FCD34D;
    --wf-badge-warn-border: rgba(251, 191, 36, 0.35);
    --wf-badge-danger-bg: rgba(248, 113, 113, 0.15);
    --wf-badge-danger-text: #FCA5A5;
    --wf-badge-danger-border: rgba(248, 113, 113, 0.35);
    --wf-badge-neutral-bg: #21262D;
    --wf-badge-neutral-text: #94A3B8;
    --wf-badge-neutral-border: #30363D;
}