/*
 * Design Tokens (Carbon-inspired layers)
 * Mobile-first, 8px rhythm
 */
:root {
    /* Typography */
    --font-family-base: "Tajawal", "Cairo", "Inter", "Segoe UI", sans-serif;
    --font-family-heading: "Tajawal", "Cairo", "Inter", "Segoe UI", sans-serif;
    --font-family-mono: "Fira Code", "SFMono-Regular", Consolas, monospace;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --line-height-tight: 1.35;
    --line-height-base: 1.6;

    /* Spacing (8px grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;

    /* Layered palette */
    --bg-page: #f5f7fb;
    --bg-inverse: #0f172a;
    --layer-background-01: #f8fafc;
    --layer-background-02: #eef2ff;
    --layer-background-03: #e7ecff;
    --layer-01: #ffffff;
    --layer-02: #f2f4f7;
    --layer-03: #e9ecf4;
    --layer-accent-01: #e8edff;
    --layer-accent-02: #e6f5ff;
    --layer-accent-03: #fff4e5;

    /* Field layers */
    --field-bg: #ffffff;
    --field-bg-hover: #f8fafc;
    --field-bg-disabled: #f3f4f6;
    --field-border: #e5e7eb;
    --field-border-strong: #cbd5e1;
    --field-text: #0f172a;
    --field-placeholder: #9ca3af;

    /* Semantic colors */
    --color-primary: #2153f6;
    --color-primary-strong: #163cc3;
    --color-secondary: #1f2937;
    --color-accent: #f97316;
    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-danger: #dc2626;
    --color-info: #0ea5e9;

    /* Text */
    --text-strong: #0f172a;
    --text-body: #1f2937;
    --text-muted: #4b5563;
    --text-soft: #6b7280;
    --text-placeholder: #9ca3af;
    --text-inverse: #ffffff;

    /* Links */
    --link-default: #2153f6;
    --link-hover: #163cc3;
    --link-visited: #4c1d95;

    /* Icons */
    --icon-default: #1f2937;
    --icon-muted: #6b7280;
    --icon-inverse: #ffffff;

    /* Support (notifications/status) */
    --support-success-bg: #ecfdf3;
    --support-success-border: #bbf7d0;
    --support-success-text: #166534;
    --support-warning-bg: #fff7ed;
    --support-warning-border: #fed7aa;
    --support-warning-text: #b45309;
    --support-error-bg: #fef2f2;
    --support-error-border: #fecdd3;
    --support-error-text: #b91c1c;
    --support-info-bg: #eff6ff;
    --support-info-border: #bfdbfe;
    --support-info-text: #1d4ed8;

    /* Borders & outlines */
    --border-strong: #cbd5e1;
    --border-subtle: #e5e7eb;
    --border-muted: #edf0f5;
    --border-focus: #2153f6;
    --focus-ring: 0 0 0 3px rgba(33, 83, 246, 0.2);

    /* Hover layers */
    --hover-layer-01: rgba(33, 83, 246, 0.06);
    --hover-layer-02: rgba(15, 23, 42, 0.06);

    /* Skeleton */
    --skeleton-bg: #e5e7eb;
    --skeleton-shimmer: linear-gradient(90deg, rgba(229, 231, 235, 0) 0%, rgba(229, 231, 235, 0.8) 50%, rgba(229, 231, 235, 0) 100%);

    /* Radii */
    --radius-1: 4px;
    --radius-2: 8px;
    --radius-3: 12px;
    --radius-4: 16px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 8px 20px rgba(15, 23, 42, 0.12);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.16);

    /* Motion */
    --ease-standard: 180ms ease;
    --ease-quick: 120ms ease;
    --ease-slow: 260ms ease;

    /* Breakpoints */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ease-standard: 0ms;
        --ease-quick: 0ms;
        --ease-slow: 0ms;
    }
}