@charset "UTF-8";
/* ==========================================================================
   کامان دیزل پارس — Design Tokens
   Light is the default surface; .dark flips the roles consistently.
   Brand: black + gold (#FFD700). Palette structure follows the supplied
   shadcn token contract so any shadcn-derived markup drops straight in.
   ========================================================================== */

/* --------------------------------------------------------------- light --- */
:root {
  color-scheme: light;

  /* surfaces */
  --background: #f4f4f0;
  --foreground: #0e0e0e;
  --card: #fefefe;
  --card-foreground: #0e0e0e;
  --popover: #fefefe;
  --popover-foreground: #0e0e0e;
  --muted: #efeae4;
  --muted-foreground: #545454;
  --input: #ffffff;

  /* brand */
  --primary: #0e0e0e;
  --primary-foreground: #fefefe;
  --secondary: #0e0e0e;
  --secondary-foreground: #fefefe;
  --accent: #ffd700;                 /* برند طلایی — fills, rules, CTAs */
  --accent-foreground: #0e0e0e;
  --accent-strong: #a8850a;          /* gold that still reads as gold on a light surface */
  --accent-text: #6b5200;            /* 6.8:1 on --background — the only gold used for words */
  --accent-soft: #fff8cc;

  /* lines & focus */
  --border: #d9d5cd;
  --border-strong: #4a4a4a;
  --ring: #0a0a0a;

  /* status */
  --destructive: #d92d20;
  --destructive-foreground: #ffffff;
  --success: #0b7a53;
  --success-foreground: #ffffff;
  --warning: #a35c00;

  /* charts / data */
  --chart-1: #0e0e0e;
  --chart-2: #ffd700;
  --chart-3: #6b7280;
  --chart-4: #0b7a53;
  --chart-5: #a35c00;

  /* ------------------------------------------------------------ glass ---
     The glass system is defined once here and consumed everywhere, so the
     whole site stays visually coherent and a single edit re-tunes it. */
  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-bg-faint: rgba(255, 255, 255, 0.34);
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-edge: rgba(14, 14, 14, 0.08);
  --glass-blur: 20px;
  --glass-saturate: 165%;
  --glass-highlight: rgba(255, 255, 255, 0.9);
  --glass-shadow:
    0 1px 2px rgba(14, 14, 14, 0.04),
    0 8px 24px -12px rgba(14, 14, 14, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --glass-shadow-lg:
    0 2px 6px rgba(14, 14, 14, 0.05),
    0 24px 60px -28px rgba(14, 14, 14, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* elevation for non-glass surfaces */
  --shadow-xs: 0 1px 2px rgba(14, 14, 14, 0.06);
  --shadow-sm: 0 2px 8px -2px rgba(14, 14, 14, 0.10);
  --shadow-md: 0 8px 28px -12px rgba(14, 14, 14, 0.18);
  --shadow-lg: 0 24px 64px -28px rgba(14, 14, 14, 0.30);

  /* geometry */
  --radius: 1.25rem;
  --radius-sm: 0.625rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;

  /* rhythm */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;     --space-9: 6rem;
  --space-10: 8rem;

  /* type */
  --font-sans: "Vazirmatn", "IRANSansX", "IRANSans", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-latin: "InterKD", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "SFMono-Regular", "Roboto Mono", ui-monospace, "Cascadia Mono", monospace;
  --letter-spacing: -0.011em;

  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0:  clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --step-1:  clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem);
  --step-2:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-3:  clamp(1.5rem, 1.32rem + 0.9vw, 2rem);
  --step-4:  clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);
  --step-5:  clamp(2.25rem, 1.7rem + 2.7vw, 3.75rem);
  --step-6:  clamp(2.625rem, 1.75rem + 4.4vw, 5rem);

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-3: 340ms;
  --dur-4: 520ms;

  /* layout */
  --container: 78rem;
  --container-wide: 90rem;
  --container-text: 46rem;
  --gutter: clamp(1rem, 0.55rem + 2.2vw, 2.5rem);
  --header-h: 4.5rem;

  --z-base: 1;
  --z-sticky: 60;
  --z-header: 70;
  --z-drawer: 80;
  --z-modal: 90;
  --z-toast: 100;
}

/* ---------------------------------------------------------------- dark --- */
.dark {
  color-scheme: dark;

  --background: #0b0b0b;
  --foreground: #f4f4f0;
  --card: #151515;
  --card-foreground: #f4f4f0;
  --popover: #171717;
  --popover-foreground: #f4f4f0;
  --muted: #1c1c1c;
  --muted-foreground: #b8b8b8;
  --input: #171717;

  --primary: #ffd700;
  --primary-foreground: #0b0b0b;
  --secondary: #f4f4f0;
  --secondary-foreground: #0b0b0b;
  --accent: #ffd700;
  --accent-foreground: #0b0b0b;
  --accent-strong: #ffd700;
  --accent-text: #ffd700;            /* 12.6:1 on --background */
  --accent-soft: rgba(255, 215, 0, 0.14);

  --border: #2b2b2b;
  --border-strong: #3d3d3d;
  --ring: #ffd700;

  --destructive: #f97066;
  --destructive-foreground: #1a0605;
  --success: #34d399;
  --success-foreground: #04231a;
  --warning: #fbbf24;

  --chart-1: #f4f4f0;
  --chart-2: #ffd700;
  --chart-3: #9ca3af;
  --chart-4: #34d399;
  --chart-5: #fbbf24;

  --glass-bg: rgba(255, 255, 255, 0.055);
  --glass-bg-strong: rgba(255, 255, 255, 0.10);
  --glass-bg-faint: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-edge: rgba(255, 255, 255, 0.06);
  --glass-blur: 22px;
  --glass-saturate: 150%;
  --glass-highlight: rgba(255, 255, 255, 0.16);
  --glass-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 10px 30px -14px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --glass-shadow-lg:
    0 2px 8px rgba(0, 0, 0, 0.55),
    0 28px 70px -30px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 10px -2px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 10px 32px -14px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 28px 70px -30px rgba(0, 0, 0, 0.85);

  --radius: 1.4rem;
}

/* Respect the OS preference only until the visitor makes a choice; the
   server writes the resolved theme onto <html> so there is no flash. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.dark) { color-scheme: light dark; }
}