:root {
  color-scheme: light;

  /* Base surfaces — warm white مريح للعين */
  --color-base-100: oklch(98.6% 0.006 95);
  --color-base-200: oklch(96.2% 0.01 95);
  --color-base-300: oklch(92.8% 0.014 95);
  --color-base-content: oklch(18% 0.02 120);

  /* Primary — أزرق ثقة عميق */
  --color-primary: #11190c;
  --color-primary-content: oklch(97% 0.01 255);

  /* Secondary — برتقالي حيوي للـ CTA */
  --color-secondary: #e1ff00;
  --color-secondary-content: oklch(15% 0.03 55);

  /* Accent — برتقالي فاتح للـ highlights */
  --color-accent: oklch(74% 0.11 95);
  --color-accent-content: oklch(19% 0.03 105);

  --color-neutral: oklch(24% 0.016 120);
  --color-neutral-content: oklch(96% 0.005 95);

  --color-info: oklch(62% 0.12 220);
  --color-success: oklch(60% 0.15 145);
  --color-warning: oklch(78% 0.14 85);
  --color-error: oklch(60% 0.17 28);

  --radius-selector: 0.75rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;

  --size-selector: 0.25rem;
  --size-field: 0.25rem;

  --border: 1px;
  --depth: 1;
  --noise: 0;

  --surface-tint: oklch(97.2% 0.008 95);
  --surface-primary-tint: oklch(93% 0.032 100);
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-base-100: oklch(13% 0.016 120);
  --color-base-200: oklch(17% 0.018 120);
  --color-base-300: oklch(22% 0.02 120);
  --color-base-content: oklch(95% 0.01 95);

  /* Primary — أزرق أفتح في الداكن للوضوح */
  --color-primary: #11190c;
  --color-primary-content: oklch(13% 0.02 255);

  /* Secondary — برتقالي دافئ واضح في الداكن */
  --color-secondary: #e1ff00;
  --color-secondary-content: oklch(13% 0.03 55);

  --color-accent: oklch(79% 0.11 95);
  --color-accent-content: oklch(14% 0.025 105);

  --color-neutral: oklch(24% 0.018 120);
  --color-neutral-content: oklch(95% 0.01 95);

  --color-info: oklch(69% 0.12 220);
  --color-success: oklch(67% 0.14 145);
  --color-warning: oklch(82% 0.13 85);
  --color-error: oklch(67% 0.16 28);

  --radius-selector: 0.75rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;

  --size-selector: 0.25rem;
  --size-field: 0.25rem;

  --border: 1px;
  --depth: 1;
  --noise: 0;

  --surface-tint: oklch(16.5% 0.017 120);
  --surface-primary-tint: oklch(22% 0.035 100);
}

.card-tinted {
  background: linear-gradient(
    25deg,
    var(--surface-primary-tint),

    var(--color-base-100)
  );
}