@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&family=Tajawal:wght@400;500;700&display=swap');
@import "tailwindcss";

@theme inline {
  --font-display: "Cairo", sans-serif; /* Hero headings, large brand typography */
  --font-header: "Tajawal", sans-serif; /* Section titles, card headers, form labels */
  --font-body: "IBM Plex Sans Arabic", sans-serif; /* Dense tables, data inputs, readable text */

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

  --color-meshwar-brand: var(--meshwar-brand);
  --color-meshwar-dark: var(--meshwar-dark);
  --color-meshwar-orange: var(--meshwar-orange);

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.5); /* subtle depth for tiny elements */
  --shadow-sm: 0 0 10px rgba(100, 49, 126, 0.15); /* minimal purple glow for inputs */
  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 15px rgba(100, 49, 126, 0.2); /* standard glass card elevation */
  --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 25px rgba(100, 49, 126, 0.25); /* popovers, modals */
  --shadow-neon-primary: 0 0 10px rgba(100, 49, 126, 0.5), 0 0 20px rgba(100, 49, 126, 0.3); /* focus rings, active states */
  --shadow-neon-accent: 0 0 10px rgba(241, 110, 0, 0.6), 0 0 20px rgba(241, 110, 0, 0.4); /* primary submit button glow */

  --radius-sm: 0.5rem; /* modern rounded inputs */
  --radius-md: 0.75rem; /* elegant buttons and minor cards */
  --radius-lg: 1.25rem; /* glassmorphism outer cards */
  --radius-xl: 1.75rem; /* large dashboard structural containers */
}

@layer base {
  :root {
    --background: #0b040f;
    --foreground: #eae0f1;
    --primary: #64317e;
    --primary-foreground: #ffffff;
    --secondary: #2e113b;
    --secondary-foreground: #e4d5ee;
    --accent: #f16e00;
    --accent-foreground: #ffffff;
    --muted: #1c0a26;
    --muted-foreground: #9a87a8;
    --destructive: #ef4444;
    --destructive-foreground: #ffffff;
    --card: #14071c;
    --card-foreground: #eae0f1;
    --popover: #1a0824;
    --popover-foreground: #eae0f1;
    --border: #341c46;
    --input: #1a0824;
    --ring: #8f46b5;

    --chart-1: #64317e;
    --chart-2: #f16e00;
    --chart-3: #9b59b6;
    --chart-4: #ff9800;
    --chart-5: #d946ef;

    --meshwar-brand: #64317e;
    --meshwar-dark: #2e113b;
    --meshwar-orange: #f16e00;
    
    --gradient-hero-bg: radial-gradient(circle at top right, rgba(100, 49, 126, 0.15), transparent 40%), radial-gradient(circle at bottom left, rgba(241, 110, 0, 0.08), transparent 40%);
  }

  /*
   * Next 根布局先加载 @/index.css，再加载本文件；本文件内的 Tailwind Preflight 含 `* { border: 0 solid }`，
   * 会作为更晚的 @layer base 覆盖 index.css 里对 border-color 的修复。必须在「本 Tailwind 入口」内、Preflight 之后
   * 再设一次默认 border-color（前台 theme-style 已在 @layer base 中对 * 做过同类处理）。
   */
  *,
  ::before,
  ::after,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-border, var(--border, #d6dde8));
  }
}