/*
  Afrandeh Design System — CSS tokens
  منبع: برند بوک جدید افرنده (Claude Design — پروژه "OfficeAutomation Blazor")
  Primary blue #03B0F7 | Accent/Danger red #F33B4A | Warning yellow #FAC23A | Success green (derived)
  توکن‌های اصلی رنگ در design_handoff_afrandeh/tokens/colors.css (پروژه برند) — نسخه‌ی زیر مقادیر
  همان طیف OKLCH را به hex معادل ترجمه می‌کند تا با ساختار موجود این فایل سازگار بماند.
*/

:root {
    /* Brand */
    --afr-brand-primary: #008cce;
    --afr-brand-primary-rgb: 0, 140, 206;
    --afr-brand-accent: #f33b4a;
    --afr-brand-accent-rgb: 243, 59, 74;
    --afr-brand-warning: #fac23a;
    --afr-brand-error: #f33b4a;
    --afr-brand-success: #22a261;
    --afr-brand-on-primary: #ffffff;

    /* Spacing (base 4px) */
    --afr-space-1: 4px;
    --afr-space-2: 8px;
    --afr-space-3: 12px;
    --afr-space-4: 16px;
    --afr-space-5: 20px;
    --afr-space-6: 24px;
    --afr-space-8: 32px;
    --afr-space-10: 40px;
    --afr-space-12: 48px;
    --afr-space-16: 64px;

    /* Radius */
    --afr-radius-sm: 6px;
    --afr-radius-md: 10px;
    --afr-radius-lg: 14px;
    --afr-radius-xl: 20px;
    --afr-radius-pill: 999px;

    /* Shadow — ملایم */
    --afr-shadow-sm: 0 1px 2px rgba(var(--afr-brand-primary-rgb), 0.06);
    --afr-shadow-md: 0 4px 12px rgba(var(--afr-brand-primary-rgb), 0.08);
    --afr-shadow-lg: 0 12px 32px rgba(var(--afr-brand-primary-rgb), 0.12);

    /* Typography */
    --afr-font-family: "Vazirmatn", "Inter", "Segoe UI", Tahoma, sans-serif;
    --afr-font-size-xs: 0.75rem;
    --afr-font-size-sm: 0.875rem;
    --afr-font-size-md: 1rem;
    --afr-font-size-lg: 1.125rem;
    --afr-font-size-xl: 1.25rem;
    --afr-font-size-2xl: 1.5rem;
    --afr-line-height-tight: 1.35;
    --afr-line-height-normal: 1.5;

    /* Layout */
    --afr-content-max-width: 1440px;
    --afr-touch-min: 44px;
    --afr-breakpoint-mobile: 768px;
    --afr-appbar-height: 56px;
    --afr-drawer-width: 220px;

    /* Surfaces — Light */
    --afr-bg: #f5f7f9;
    --afr-surface: #ffffff;
    --afr-surface-muted: #ebeff2;
    --afr-border: #dadee3;
    --afr-text: #0b1015;
    --afr-text-muted: #4d535a;

    /* Components — هم‌راستا با MudTheme (light/dark) */
    --afr-toolbar-bg: #ebeff2;
    --afr-tab-idle-bg: var(--mud-palette-background-gray);
    --afr-tab-idle-text: var(--mud-palette-text-secondary);
    --afr-tab-active-bg: color-mix(in srgb, var(--afr-brand-primary) 12%, var(--mud-palette-surface));
    --afr-tab-active-border: var(--afr-brand-primary);
    --afr-tab-active-text: var(--afr-brand-primary);

    /* Chrome — AppBar / Drawer / Nav / Session */
    --afr-chrome-bg: rgba(255, 255, 255, 0.96);
    --afr-chrome-text: var(--afr-brand-primary);
    --afr-chrome-text-muted: #4d535a;
    --afr-chrome-border: #dadee3;
    --afr-chrome-icon: #33393f;
    --afr-chrome-divider: rgba(var(--afr-brand-primary-rgb), 0.12);
    --afr-nav-text: #33393f;
    --afr-nav-icon: #6c727a;
    --afr-nav-hover-bg: #ebeff2;
    --afr-nav-active-bg: color-mix(in srgb, var(--afr-brand-primary) 14%, #ffffff);
    --afr-nav-active-text: var(--afr-brand-primary);
    --afr-nav-active-border: var(--afr-brand-primary);
    --afr-nav-group-title: #4d535a;
    --afr-session-pill-bg: color-mix(in srgb, var(--afr-brand-primary) 8%, #ffffff);
    --afr-session-pill-border: color-mix(in srgb, var(--afr-brand-primary) 22%, #dadee3);
    --afr-session-label: #4d535a;
    --afr-session-value: var(--afr-brand-primary);
    --afr-user-name: #0b1015;
    --afr-user-code: #4d535a;
    --afr-tab-bar-bg: #f5f7f9;

    /* Feedback */
    --afr-snackbar-duration: 1000ms;
}

.mud-theme-dark,
html[data-theme="dark"],
html.mud-theme-dark {
    --afr-bg: #05080c;
    --afr-surface: #0b1015;
    --afr-surface-muted: #1a2026;
    --afr-border: rgba(255, 255, 255, 0.08);
    --afr-text: rgba(255, 255, 255, 0.94);
    --afr-text-muted: rgba(255, 255, 255, 0.68);

    --afr-toolbar-bg: #10151a;
    --afr-tab-idle-bg: rgba(255, 255, 255, 0.1);
    --afr-tab-idle-text: rgba(255, 255, 255, 0.82);
    --afr-tab-active-bg: color-mix(in srgb, var(--afr-brand-primary) 22%, var(--afr-surface));
    --afr-tab-active-border: var(--afr-brand-primary);
    --afr-tab-active-text: #77c5f2;

    --afr-chrome-bg: rgba(5, 8, 12, 0.96);
    --afr-chrome-text: rgba(255, 255, 255, 0.94);
    --afr-chrome-text-muted: rgba(255, 255, 255, 0.68);
    --afr-chrome-border: rgba(255, 255, 255, 0.08);
    --afr-chrome-icon: rgba(255, 255, 255, 0.88);
    --afr-chrome-divider: rgba(255, 255, 255, 0.14);
    --afr-nav-text: rgba(255, 255, 255, 0.86);
    --afr-nav-icon: rgba(255, 255, 255, 0.68);
    --afr-nav-hover-bg: rgba(255, 255, 255, 0.08);
    --afr-nav-active-bg: color-mix(in srgb, var(--afr-brand-primary) 20%, var(--afr-surface));
    --afr-nav-active-text: #77c5f2;
    --afr-nav-active-border: var(--afr-brand-primary);
    --afr-nav-group-title: rgba(255, 255, 255, 0.75);
    --afr-session-pill-bg: rgba(0, 140, 206, 0.14);
    --afr-session-pill-border: rgba(0, 140, 206, 0.30);
    --afr-session-label: rgba(255, 255, 255, 0.60);
    --afr-session-value: #77c5f2;
    --afr-user-name: rgba(255, 255, 255, 0.94);
    --afr-user-code: rgba(255, 255, 255, 0.55);
    --afr-tab-bar-bg: #10151a;

    --afr-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.35);
    --afr-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.4);
    --afr-shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.45);
}

/* Utilities tied to tokens */
.afr-page {
    color: var(--afr-text);
    font-family: var(--afr-font-family);
}

.afr-content-shell {
    max-width: var(--afr-content-max-width);
    margin-inline: auto;
    width: 100%;
}

@media (max-width: 768px) {
    .afr-page-padding {
        padding: var(--afr-space-2);
    }
}

@media (min-width: 769px) {
    .afr-page-padding {
        padding: var(--afr-space-4);
    }
}

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