/**
 * AFT ERP v2 — Field & Freight design tokens.
 * Palette, typography, spacing, radii, and elevation for the Control Tower UI.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..700;1,9..40,400..700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root,
[data-theme="light"] {
    /* Ink / text */
    --aft-ink: #0B1220;
    --aft-ink-muted: #5C6578;
    --aft-ink-subtle: #8A92A3;

    /* Surfaces */
    --aft-canvas: #F4F1EB;
    --aft-surface: #FFFFFF;
    --aft-surface-raised: #FAFAF8;
    --aft-surface-hover: #EFEDE7;

    /* Borders */
    --aft-border: #D8D2C8;
    --aft-border-subtle: #E8E4DC;

    /* Accent / status */
    --aft-accent: #E87722;
    --aft-accent-hover: #D06618;
    --aft-accent-dim: #FEF3E8;
    --aft-link: #0D6EAE;
    --aft-link-hover: #0A568A;
    --aft-live: #0D9488;
    --aft-live-dim: #E6F5F4;
    --aft-warn: #CA8A04;
    --aft-warn-dim: #FEF9E8;
    --aft-danger: #DC2626;
    --aft-danger-dim: #FEF2F2;
    --aft-info: #2563EB;
    --aft-info-dim: #EFF6FF;

    /* Elevation */
    --aft-shadow-sm: 0 1px 0 rgba(11, 18, 32, 0.04);
    --aft-shadow-md: 0 1px 0 rgba(11, 18, 32, 0.04), 0 4px 12px rgba(11, 18, 32, 0.06);
    --aft-shadow-lg: 0 1px 0 rgba(11, 18, 32, 0.04), 0 12px 32px rgba(11, 18, 32, 0.12);

    /* Radius */
    --aft-radius-sm: 6px;
    --aft-radius-md: 8px;
    --aft-radius-lg: 10px;
    --aft-radius-pill: 999px;

    /* Spacing (4px base) */
    --aft-space-1: 0.25rem;
    --aft-space-2: 0.5rem;
    --aft-space-3: 0.75rem;
    --aft-space-4: 1rem;
    --aft-space-5: 1.5rem;
    --aft-space-6: 2rem;
    --aft-space-7: 3rem;
    --aft-space-8: 4rem;

    /* Typography scale */
    --aft-text-xs: 0.6875rem;  /* 11px */
    --aft-text-sm: 0.75rem;    /* 12px */
    --aft-text-md: 0.875rem;   /* 14px */
    --aft-text-base: 1rem;     /* 16px */
    --aft-text-lg: 1.25rem;    /* 20px */
    --aft-text-xl: 1.5rem;     /* 24px */
    --aft-text-2xl: 2rem;      /* 32px */

    /* Layout regions */
    --aft-masthead-height: 48px;
    --aft-context-height: 40px;
    --aft-workflow-height: 36px;
    --aft-content-max: 1400px;
}

[data-theme="dark"] {
    --aft-ink: #E8ECF4;
    --aft-ink-muted: #9AA3B5;
    --aft-ink-subtle: #6B7289;
    --aft-canvas: #0F1419;
    --aft-surface: #161C26;
    --aft-surface-raised: #1C2430;
    --aft-surface-hover: #222A38;
    --aft-border: #2A3344;
    --aft-border-subtle: #232B38;
    --aft-accent: #F09040;
    --aft-accent-hover: #F5A860;
    --aft-accent-dim: #3D2818;
    --aft-link: #5EB3E8;
    --aft-link-hover: #8BCAF0;
    --aft-live: #2DD4BF;
    --aft-live-dim: #103630;
    --aft-warn: #FACC15;
    --aft-warn-dim: #3D3208;
    --aft-danger: #F87171;
    --aft-danger-dim: #451A1A;
    --aft-info: #60A5FA;
    --aft-info-dim: #1E3A8A;
    --aft-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.2);
    --aft-shadow-md: 0 1px 0 rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.3);
    --aft-shadow-lg: 0 1px 0 rgba(0, 0, 0, 0.2), 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Theme-aware variables exposed with legacy-friendly aliases so existing
   component classes continue to work during the v2 migration. */
:root,
[data-theme="light"],
[data-theme="dark"] {
    --erp-text-primary: var(--aft-ink);
    --erp-text-secondary: var(--aft-ink-muted);
    --erp-text-tertiary: var(--aft-ink-subtle);
    --erp-bg: var(--aft-canvas);
    --erp-bg-page: var(--aft-canvas);
    --erp-bg-surface: var(--aft-surface);
    --erp-bg-surface-raised: var(--aft-surface-raised);
    --erp-bg-hover: var(--aft-surface-hover);
    --erp-border: var(--aft-border);
    --erp-border-subtle: var(--aft-border-subtle);
    --erp-primary: var(--aft-accent);
    --erp-primary-hover: var(--aft-accent-hover);
    --erp-primary-subtle: var(--aft-accent-dim);
    --erp-accent: var(--aft-accent);
    --erp-link: var(--aft-link);
    --erp-success: var(--aft-live);
    --erp-success-subtle: var(--aft-live-dim);
    --erp-warning: var(--aft-warn);
    --erp-warning-subtle: var(--aft-warn-dim);
    --erp-danger: var(--aft-danger);
    --erp-danger-subtle: var(--aft-danger-dim);
    --erp-info: var(--aft-info);
    --erp-info-subtle: var(--aft-info-dim);
    --erp-shadow-sm: var(--aft-shadow-sm);
    --erp-shadow-md: var(--aft-shadow-md);
    --erp-shadow-lg: var(--aft-shadow-lg);
    --erp-shadow: var(--aft-shadow-md);
    --erp-radius-sm: var(--aft-radius-sm);
    --erp-radius: var(--aft-radius-md);
    --erp-radius-md: var(--aft-radius-md);
    --erp-radius-lg: var(--aft-radius-lg);
    --erp-radius-pill: var(--aft-radius-pill);
    --erp-space-1: var(--aft-space-1);
    --erp-space-2: var(--aft-space-2);
    --erp-space-3: var(--aft-space-3);
    --erp-space-4: var(--aft-space-4);
    --erp-space-5: var(--aft-space-5);
    --erp-space-6: var(--aft-space-6);
    --erp-space-8: var(--aft-space-7);
    --erp-space-10: var(--aft-space-8);
    --erp-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --erp-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --erp-text-xs: var(--aft-text-xs);
    --erp-text-sm: var(--aft-text-sm);
    --erp-text-base: var(--aft-text-md);
    --erp-text-md: var(--aft-text-base);
    --erp-text-lg: var(--aft-text-lg);
    --erp-text-xl: var(--aft-text-xl);
    --erp-text-2xl: var(--aft-text-2xl);
    --erp-page-max-width: var(--aft-content-max);
}

/* Typography defaults */
body {
    font-family: var(--erp-font);
    color: var(--erp-text-primary);
    background-color: var(--erp-bg-page);
}

code,
pre,
tt,
kbd,
.erp-mono {
    font-family: var(--erp-mono);
}

/* Reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}