:root {
  /* Brand palette */
  --accent-color: #ffa500;
  --accent2-color: #f57c00;
  --accent3-color: #c2185b;
  --accent4-color: #673ab7;
  --primary-color: #1976d2;
  --dark-text-color: #212121;
  --gray-text-color: #6b7280;
  --light-text-color: #f5f5f5;

  --dark-border-color: #424242;
  --light-border-color: #dcdcdc;

  --dark-background-color: #303030;
  --light-background-color: #e8f0fb;
  --medium-background-color: #cfdbec;

  --primary-button-text-color: #ffffff;
  --secondary-button-bg-color: #ff8c00;
  --secondary-button-text-color: #ffffff;
  --primary-button-hover-bg-color: #1565c0;
  --primary-button-hover-text-color: #ffffff;
  --secondary-button-hover-bg-color: #e67e00;
  --secondary-button-hover-text-color: #ffffff;

  --font-family-body: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-family-heading: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

html, body { font-family: var(--font-family-body); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-heading); }

[dir="rtl"] { direction: rtl; }

/* Smooth hover transitions for links */
a { transition: color .2s ease, opacity .2s ease; }

/* Minor utility tweaks */
.container { max-width: 1200px; }

/* Rendering */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:focus { outline-color: var(--primary-color); }

/*
  Semantic utilities to replace Tailwind arbitrary var(...) tokens in HTML
  Use these instead of text-[var(--...)] / bg-[var(--...)] / border-[var(--...)] etc.
*/

/* Text colors */
.text-dark { color: var(--dark-text-color); }
.text-gray { color: var(--gray-text-color); }
.text-primary { color: var(--primary-color); }
.text-on-primary { color: var(--primary-button-text-color); }
.text-on-secondary { color: var(--secondary-button-text-color); }
.text-accent { color: var(--accent-color); }
.text-accent2 { color: var(--accent2-color); }
.text-accent3 { color: var(--accent3-color); }
.text-accent4 { color: var(--accent4-color); }

/* Hover text colors */
.hover\:text-primary-hover:hover { color: var(--primary-button-hover-bg-color); }
.hover\:text-accent:hover { color: var(--accent-color); }

/* Background colors */
.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-button-bg-color); }
.bg-accent { background-color: var(--accent-color); }
.bg-accent2 { background-color: var(--accent2-color); }
.bg-accent3 { background-color: var(--accent3-color); }
.bg-accent4 { background-color: var(--accent4-color); }
.bg-dark { background-color: var(--dark-background-color); }

/* Hover background colors */
.hover\:bg-secondary-hover:hover { background-color: var(--secondary-button-hover-bg-color); }
.hover\:bg-primary-hover:hover { background-color: var(--primary-button-hover-bg-color); }

/* Borders */
.border-light { border-color: var(--light-border-color); }
.border-primary { border-color: var(--primary-color); }
.border-accent { border-color: var(--accent-color); }
.hover\:border-primary:hover { border-color: var(--primary-color); }

/* Focus */
.focus\:border-primary:focus { border-color: var(--primary-color); }

/* WhatsApp button colors */
.bg-whatsapp { background-color: #25D366; }
.hover\:bg-whatsapp-hover:hover { background-color: #20BA5A; }

/* SVG helpers */
.fill-light { fill: var(--light-background-color); }

/* Gradient helpers (avoid var(...) in HTML) */
.bg-grad-light-to-white { background-image: linear-gradient(to bottom, var(--light-background-color), #ffffff); }

/* Map existing arbitrary class names to CSS so HTML can keep class names without inline values */
.text-\[var\(--dark-text-color\)\] { color: var(--dark-text-color); }
.text-\[var\(--primary-color\)\] { color: var(--primary-color); }
.text-\[var\(--gray-text-color\)\] { color: var(--gray-text-color); }
.text-\[var\(--secondary-button-text-color\)\] { color: var(--secondary-button-text-color); }
.text-\[var\(--primary-button-text-color\)\] { color: var(--primary-button-text-color); }
.text-\[var\(--accent-color\)\] { color: var(--accent-color); }

.hover\:text-\[var\(--primary-color\)\]:hover { color: var(--primary-color); }
.hover\:text-\[var\(--primary-button-hover-bg-color\)\]:hover { color: var(--primary-button-hover-bg-color); }
.hover\:text-\[var\(--accent-color\)\]:hover { color: var(--accent-color); }

.bg-\[var\(--primary-color\)\] { background-color: var(--primary-color); }
.bg-\[var\(--secondary-button-bg-color\)\] { background-color: var(--secondary-button-bg-color); }
.bg-\[var\(--accent-color\)\] { background-color: var(--accent-color); }
.bg-\[var\(--accent2-color\)\] { background-color: var(--accent2-color); }
.bg-\[var\(--accent3-color\)\] { background-color: var(--accent3-color); }
.bg-\[var\(--accent4-color\)\] { background-color: var(--accent4-color); }
.bg-\[var\(--dark-background-color\)\] { background-color: var(--dark-background-color); }

.hover\:bg-\[var\(--secondary-button-hover-bg-color\)\]:hover { background-color: var(--secondary-button-hover-bg-color); }
.hover\:bg-\[var\(--primary-button-hover-bg-color\)\]:hover { background-color: var(--primary-button-hover-bg-color); }

.border-\[var\(--light-border-color\)\] { border-color: var(--light-border-color); }
.border-\[var\(--primary-color\)\] { border-color: var(--primary-color); }

/* Gradient arbitrary utilities */
.from-\[var\(--light-background-color\)\] {
  --tw-gradient-from: var(--light-background-color) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-\[var\(--light-background-color\)\] {
  --tw-gradient-to: var(--light-background-color) var(--tw-gradient-to-position);
}

/* Arbitrary hex utilities used in HTML */
.bg-\[\#25D366\] { background-color: #25D366; }
.hover\:bg-\[\#20BA5A\]:hover { background-color: #20BA5A; }
.bg-grad-white-to-light-b { background-image: linear-gradient(to bottom, #ffffff, var(--light-background-color)); }
.bg-grad-white-to-light-br { background-image: linear-gradient(to bottom right, #ffffff, var(--light-background-color)); }
.bg-grad-primary-to-accent-br { background-image: linear-gradient(to bottom right, var(--primary-color), var(--accent-color)); }
.bg-grad-secondary-to-accent2-br { background-image: linear-gradient(to bottom right, var(--secondary-button-bg-color), var(--accent2-color)); }
.bg-grad-accent3-to-accent4-br { background-image: linear-gradient(to bottom right, var(--accent3-color), var(--accent4-color)); }
.bg-grad-primary-to-accent3-br { background-image: linear-gradient(to bottom right, var(--primary-color), var(--accent3-color)); }
.bg-grad-secondary-to-accent2-r { background-image: linear-gradient(to right, var(--secondary-button-bg-color), var(--accent2-color)); }