/* =========================================================
   TOKENS.CSS
   Table of Contents
   1) Font Imports
   2) Root Variables (Colors)
   3) Root Variables (Typography)
   4) Root Variables (Spacing / Radius / Shadows / Z-Index)
   5) Root Variables (Layout / Container / Breakpoints)
   6) Base Reset & Global Defaults
   7) Global Utility Classes
   ========================================================= */

/* 1) Font Imports & Setup */
/* Note: Actual font imports should be here if using @import or local @font-face. 
   Currently fonts are linked in HTML head. */

:root {
  /* 2) Root Variables (Colors) */
  --color-primary: #202835;
  --color-primary-light: #2a3442;
  --color-primary-dark: #151b24;

  --color-gold: #d4af37;
  --color-gold-light: #e5c158;
  --color-gold-dark: #c19b2e;

  --color-white: #ffffff;
  --color-white-90: rgb(255, 255, 255, 0.9);
  --color-black: #000000;

  /* Text Colors */
  --color-text-body: rgba(32, 40, 53, 0.8); /* #202835 with opacity */
  --color-text-heading: #202835;
  --color-text-light: rgba(255, 255, 255, 0.9);
  --color-text-muted: rgba(255, 255, 255, 0.6);
  --color-bg-light: #faf8f3;

  /* 3) Root Variables (Typography) */
  --font-sans:
    "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* 4) Root Variables (Spacing / Radius / Shadows / Z-Index) */
  --spacing-container: 1.5rem; /* px-6 */
  --spacing-section: 8rem; /* py-32 */

  --transition-normal: all 0.3s ease-in-out;
  --transition-fast: all 0.15s ease-in-out;

  /* 5) Root Variables (Layout / Container / Breakpoints) */
  --container-width: 1140px;

  /* Breakpoints (for reference in media queries) */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* 6) Base Reset & Global Defaults */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  scroll-behavior: smooth;
  line-height: 1.5;
}

body {
  font-family: var(--font-sans);
  color: var(--color-primary);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 7) Global Utility Classes */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-container);
  padding-right: var(--spacing-container);
}

.text-center {
  text-align: center;
}

.text-white-90 {
  color: var(--color-white-90);
}

/* Btn Base (variants in main.css) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  font-weight: 700;
  border-radius: 9999px;
  transition: var(--transition-normal);
  cursor: pointer;
  white-space: nowrap;
}

/* Visibility Utilities (Media queries for these are in media-queries.css) */
.desktop-only {
  display: none;
}
.mobile-only {
  display: block;
}

/* Chnage Direction and Keep the text align to right in rtl */

.dir-ltr {
  direction: ltr;
}

:dir(rtl) .dir-ltr {
  text-align: right;
}

.line {
  width: 5rem;
  height: 0.25rem;
  margin: 0 auto;
  background-color: var(--color-gold);
}