@import "tailwindcss";

/*
 * Design tokens per winofyfrontenddoc.md §1.2 (Figma design-system page).
 * Light-mode only — the source file documents no dark-mode variants, so we
 * don't invent any rather than guess.
 */
:root {
  --background: #FFFFFF; /* پس‌زمینه — app background */
  --surface: #fffbfe; /* سفید — card/sheet surface */
  --foreground: #111827; /* gray-900 */

  --primary: #006a6a; /* فیروزه‌ای — customer brand accent */
  --primary-foreground: #ffffff;
  --primary-action: #223d5d; /* auth-flow button/heading accent, see §1.2 */

  --brand-secondary: #1a237e; /* یاقوتی — seller brand accent */

  --success: #1b6b3a;
  --error: #ba1a1a;
  --destructive: #ba1a1a;
  --destructive-foreground: #ffffff;

  --teal: #2e807a;
  --teal-light: #e0f2f1;
  --teal-bg: #e6f0f0;
  --teal-border: #a7f3d0;
  --blue-bg: #ecf2f8;

  /* designspec.md (C05/C06) §1.2 — exact hex, not Tailwind's OKLCH-based emerald/slate defaults */
  --page-bg: #f8fafc;
  --emerald-bg: #ecfdf5;
  --emerald-border: #a7f3d0;
  --emerald-text-strong: #065f46;
  --emerald-500: #10b981;

  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-300: #e5e7eb;
  --gray-500: #9ca3af;
  --gray-600: #6b7280;
  --gray-700: #4b5563;
  --gray-800: #1f2937;
  --gray-900: #111827;

  --secondary: var(--gray-100); /* generic UI secondary surface, distinct from brand-secondary */
  --secondary-foreground: var(--gray-900);
  --muted: var(--gray-100);
  --muted-foreground: var(--gray-600);
  --border: var(--gray-300);
}

@theme inline {
  --color-background: var(--background);
  --color-surface: var(--surface);
  --color-foreground: var(--foreground);

  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary-action: var(--primary-action);
  --color-brand-secondary: var(--brand-secondary);

  --color-success: var(--success);
  --color-error: var(--error);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);

  --color-teal: var(--teal);
  --color-teal-light: var(--teal-light);
  --color-teal-bg: var(--teal-bg);
  --color-teal-border: var(--teal-border);
  --color-blue-bg: var(--blue-bg);

  --color-page-bg: var(--page-bg);
  --color-emerald-bg: var(--emerald-bg);
  --color-emerald-border: var(--emerald-border);
  --color-emerald-text-strong: var(--emerald-text-strong);
  --color-emerald-500: var(--emerald-500);

  --color-gray-50: var(--gray-50);
  --color-gray-100: var(--gray-100);
  --color-gray-300: var(--gray-300);
  --color-gray-500: var(--gray-500);
  --color-gray-600: var(--gray-600);
  --color-gray-700: var(--gray-700);
  --color-gray-800: var(--gray-800);
  --color-gray-900: var(--gray-900);

  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);

  --font-sans: var(--font-vazirmatn);

  /* Type scale — §1.3. Line-height is 100% throughout the source file. */
  --text-display-large: 57px;
  --text-display-large--line-height: 1;
  --text-display-medium: 45px;
  --text-display-medium--line-height: 1;
  --text-headline-large: 32px;
  --text-headline-large--line-height: 1;
  --text-headline-medium: 28px;
  --text-headline-medium--line-height: 1;
  --text-title-large: 22px;
  --text-title-large--line-height: 1;
  --text-title-medium: 16px;
  --text-title-medium--line-height: 1;
  --text-body-large: 16px;
  --text-body-large--line-height: 1;
  --text-body-medium: 14px;
  --text-body-medium--line-height: 1;
  --text-label: 12px;
  --text-label--line-height: 1;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans), system-ui, sans-serif;
}