/* ============================================================
   VARIABLES
   To add a custom color: add a var here, then a .bg-* and
   .text-* class in the Colors section below.
   ============================================================ */
:root {

  /* Primary */
  --primary-50:  #F7F8FB;
  --primary-100: #F1F2F7;
  --primary-200: #E3E5EE;
  --primary-300: #CDD1DE;
  --primary-400: #A5ABBF;
  --primary-500: #7B829A;
  --primary-600: #5E657C;
  --primary-700: #444A5F;
  --primary-800: #314158;
  --primary-900: #1D2030;

  /* Secondary */
  --secondary-100: #F8E3D7;
  --secondary-300: #D89180;
  --secondary-500: #7D2B29;
  --secondary-700: #59141E;
  --secondary-900: #3B0718;

  /* Accent */
  --teal:      #4BBFC9;
  --teal-soft: #D4F2F5;
  --success:   #2EBD7E;

  /* Font */
  --font:           'Gramophone', 'Segoe UI', 'Tahoma', system-ui, sans-serif;
  --font-secondary: 'On', 'Segoe UI', 'Tahoma', system-ui, sans-serif;

  /* Spacing — defined in rem so it scales with the root font-size.
     Values are identical to the old px scale at the 16px mobile base
     (4px=0.25rem, 8=0.5, 12=0.75, 16=1 …), so mobile is unchanged. */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;   --sp-3:  0.75rem;  --sp-4:  1rem;
  --sp-5:  1.25rem;  --sp-6:  1.5rem;   --sp-8:  2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;     --sp-14: 3.5rem;   --sp-16: 4rem;     --sp-20: 5rem;

  /* Radius */
  --r-sm: 6px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 24px;  --r-full: 9999px;

  /* Shadow */
  --shadow:    0 2px 8px  rgba(22, 26, 46, 0.10);
  --shadow-lg: 0 8px 24px rgba(22, 26, 46, 0.18);

  /* Layout */
  --nav-h: 60px;
  --app-max-width: 430px;
}


/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

html {
  direction: rtl;
  font-family: var(--font);
  font-size: 16px;
  color: var(--primary-900);
  background: #f1f1f3;
  -webkit-font-smoothing: antialiased;
}
body {
  min-height: 100vh;
  position: relative;
  background-color: #f1f1f3;
}

body::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/texture.png');
  background-repeat: repeat;
  background-size: 150px;
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}


/* ============================================================
   COLORS
   ============================================================ */

/* — text — */
.text-white          { color: #fff; }
.text-teal           { color: var(--teal); }
.text-success        { color: var(--success); }

.text-primary-50     { color: var(--primary-50);  }
.text-primary-100    { color: var(--primary-100); }
.text-primary-200    { color: var(--primary-200); }
.text-primary-300    { color: var(--primary-300); }
.text-primary-400    { color: var(--primary-400); }
.text-primary-500    { color: var(--primary-500); }
.text-primary-600    { color: var(--primary-600); }
.text-primary-700    { color: var(--primary-700); }
.text-primary-800    { color: var(--primary-800); }
.text-primary-900    { color: var(--primary-900); }

.text-secondary-100  { color: var(--secondary-100); }
.text-secondary-300  { color: var(--secondary-300); }
.text-secondary-500  { color: var(--secondary-500); }
.text-secondary-700  { color: var(--secondary-700); }
.text-secondary-900  { color: var(--secondary-900); }

/* — background — */
.bg-white            { background-color: #fff; }
.bg-teal             { background-color: var(--teal); }
.bg-teal-soft        { background-color: var(--teal-soft); }

.bg-primary-50       { background-color: var(--primary-50);  }
.bg-primary-100      { background-color: var(--primary-100); }
.bg-primary-200      { background-color: var(--primary-200); }
.bg-primary-300      { background-color: var(--primary-300); }
.bg-primary-400      { background-color: var(--primary-400); }
.bg-primary-500      { background-color: var(--primary-500); }
.bg-primary-600      { background-color: var(--primary-600); }
.bg-primary-700      { background-color: var(--primary-700); }
.bg-primary-800      { background-color: var(--primary-800); }
.bg-primary-900      { background-color: var(--primary-900); }

.bg-secondary-100    { background-color: var(--secondary-100); }
.bg-secondary-300    { background-color: var(--secondary-300); }
.bg-secondary-500    { background-color: var(--secondary-500); }
.bg-secondary-700    { background-color: var(--secondary-700); }
.bg-secondary-900    { background-color: var(--secondary-900); }


/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.text-xs   { font-size: 0.75rem; }
.text-sm   { font-size: 0.875rem; }
.text-md   { font-size: 1rem; }
.text-lg   { font-size: 1.25rem; }
.text-xl   { font-size: 1.5rem; }
.text-2xl  { font-size: 2rem; }
.text-3xl  { font-size: 2.5rem; }
.text-4xl  { font-size: 3rem; }

.font-on       { font-family: var(--font-secondary); }
.font-regular  { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extra    { font-weight: 900; }

.leading-tight   { line-height: 1.25; }
.leading-snug    { line-height: 1.4; }
.leading-normal  { line-height: 1.6; }
.leading-relaxed { line-height: 1.8; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-start  { text-align: start; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }


/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  width: 100%;
}

.block        { display: block; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.grid         { display: grid; }
.hidden       { display: none; }

.flex-col       { flex-direction: column; }
.flex-row       { flex-direction: row; }
.flex-wrap      { flex-wrap: wrap; }
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.justify-start  { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.justify-between{ justify-content: space-between; }
.flex-1         { flex: 1; }
.shrink-0       { flex-shrink: 0; }

.cols-1 { grid-template-columns: repeat(1, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* gap */
.gap-1  { gap: var(--sp-1);  } .gap-2  { gap: var(--sp-2);  } .gap-3  { gap: var(--sp-3);  }
.gap-4  { gap: var(--sp-4);  } .gap-5  { gap: var(--sp-5);  } .gap-6  { gap: var(--sp-6);  }
.gap-8  { gap: var(--sp-8);  } .gap-10 { gap: var(--sp-10); } .gap-12 { gap: var(--sp-12); }
.gap-16 { gap: var(--sp-16); } .gap-20 { gap: var(--sp-20); }


/* ============================================================
   SPACING  (scale → 1=4px  2=8  3=12  4=16  5=20  6=24  8=32  10=40  12=48  16=64  20=80)
   ============================================================ */

/* padding */
.p-1  { padding: var(--sp-1);  } .p-2  { padding: var(--sp-2);  } .p-3  { padding: var(--sp-3);  }
.p-4  { padding: var(--sp-4);  } .p-5  { padding: var(--sp-5);  } .p-6  { padding: var(--sp-6);  }
.p-8  { padding: var(--sp-8);  } .p-10 { padding: var(--sp-10); } .p-12 { padding: var(--sp-12); }
.p-16 { padding: var(--sp-16); } .p-20 { padding: var(--sp-20); }

/* padding-inline (x) */
.px-1  { padding-inline: var(--sp-1);  } .px-2  { padding-inline: var(--sp-2);  } .px-3  { padding-inline: var(--sp-3);  }
.px-4  { padding-inline: var(--sp-4);  } .px-5  { padding-inline: var(--sp-5);  } .px-6  { padding-inline: var(--sp-6);  }
.px-8  { padding-inline: var(--sp-8);  } .px-10 { padding-inline: var(--sp-10); } .px-12 { padding-inline: var(--sp-12); }
.px-16 { padding-inline: var(--sp-16); } .px-20 { padding-inline: var(--sp-20); }

/* padding-block (y) */
.py-1  { padding-block: var(--sp-1);  } .py-2  { padding-block: var(--sp-2);  } .py-3  { padding-block: var(--sp-3);  }
.py-4  { padding-block: var(--sp-4);  } .py-5  { padding-block: var(--sp-5);  } .py-6  { padding-block: var(--sp-6);  }
.py-8  { padding-block: var(--sp-8);  } .py-10 { padding-block: var(--sp-10); } .py-12 { padding-block: var(--sp-12); }
.py-16 { padding-block: var(--sp-16); } .py-20 { padding-block: var(--sp-20); }

/* padding-top */
.pt-1  { padding-top: var(--sp-1);  } .pt-2  { padding-top: var(--sp-2);  } .pt-3  { padding-top: var(--sp-3);  }
.pt-4  { padding-top: var(--sp-4);  } .pt-5  { padding-top: var(--sp-5);  } .pt-6  { padding-top: var(--sp-6);  }
.pt-8  { padding-top: var(--sp-8);  } .pt-10 { padding-top: var(--sp-10); } .pt-12 { padding-top: var(--sp-12); }
.pt-16 { padding-top: var(--sp-16); } .pt-20 { padding-top: var(--sp-20); }

/* padding-bottom */
.pb-1  { padding-bottom: var(--sp-1);  } .pb-2  { padding-bottom: var(--sp-2);  } .pb-3  { padding-bottom: var(--sp-3);  }
.pb-4  { padding-bottom: var(--sp-4);  } .pb-5  { padding-bottom: var(--sp-5);  } .pb-6  { padding-bottom: var(--sp-6);  }
.pb-8  { padding-bottom: var(--sp-8);  } .pb-10 { padding-bottom: var(--sp-10); } .pb-12 { padding-bottom: var(--sp-12); }
.pb-16 { padding-bottom: var(--sp-16); } .pb-20 { padding-bottom: var(--sp-20); }

/* margin-top */
.m-auto  { margin: auto; }
.mx-auto { margin-inline: auto; }
.mt-1  { margin-top: var(--sp-1);  } .mt-2  { margin-top: var(--sp-2);  } .mt-3  { margin-top: var(--sp-3);  }
.mt-4  { margin-top: var(--sp-4);  } .mt-5  { margin-top: var(--sp-5);  } .mt-6  { margin-top: var(--sp-6);  }
.mt-8  { margin-top: var(--sp-8);  } .mt-10 { margin-top: var(--sp-10); } .mt-12 { margin-top: var(--sp-12); } .mt-14 { margin-top: var(--sp-14); }
.mt-16 { margin-top: var(--sp-16); } .mt-20 { margin-top: var(--sp-20); }

/* margin-bottom */
.mb-1  { margin-bottom: var(--sp-1);  } .mb-2  { margin-bottom: var(--sp-2);  } .mb-3  { margin-bottom: var(--sp-3);  }
.mb-4  { margin-bottom: var(--sp-4);  } .mb-5  { margin-bottom: var(--sp-5);  } .mb-6  { margin-bottom: var(--sp-6);  }
.mb-8  { margin-bottom: var(--sp-8);  } .mb-10 { margin-bottom: var(--sp-10); } .mb-12 { margin-bottom: var(--sp-12); }
.mb-14 { margin-bottom: var(--sp-14); } .mb-16 { margin-bottom: var(--sp-16); } .mb-20 { margin-bottom: var(--sp-20); }

/* padding-left / padding-right */
.pl-1 { padding-left: var(--sp-1); }
.pl-5 { padding-left: var(--sp-5); }
.pr-5 { padding-right: var(--sp-5); }


/* ============================================================
   SIZE
   Fractions use Tailwind-style names; escape "/" in CSS → w-1\/3
   ============================================================ */

/* — width: fixed (scale → 1=4px … 20=80px) — */
.w-1   { width: var(--sp-1);   } .w-2   { width: var(--sp-2);   } .w-3   { width: var(--sp-3);   }
.w-4   { width: var(--sp-4);   } .w-5   { width: var(--sp-5);   } .w-6   { width: var(--sp-6);   }
.w-8   { width: var(--sp-8);   } .w-10  { width: var(--sp-10);  } .w-12  { width: var(--sp-12);  }
.w-16  { width: var(--sp-16);  } .w-20  { width: var(--sp-20);  }

.w-auto  { width: auto; }
.w-fit   { width: fit-content; }
.w-full  { width: 100%; }
.w-half  { width: 50%; }
.w-min   { width: min-content; }
.w-max   { width: max-content; }

/* — width: fractions — */
.w-1\/2  { width: 50%; }
.w-1\/3  { width: 33.333333%; }
.w-2\/3  { width: 66.666667%; }
.w-1\/4  { width: 25%; }
.w-2\/4  { width: 50%; }
.w-3\/4  { width: 75%; }
.w-1\/5  { width: 20%; }
.w-2\/5  { width: 40%; }
.w-3\/5  { width: 60%; }
.w-4\/5  { width: 80%; }
.w-1\/6  { width: 16.666667%; }
.w-5\/6  { width: 83.333333%; }

/* — height: fixed — */
.h-1   { height: var(--sp-1);   } .h-2   { height: var(--sp-2);   } .h-3   { height: var(--sp-3);   }
.h-4   { height: var(--sp-4);   } .h-5   { height: var(--sp-5);   } .h-6   { height: var(--sp-6);   }
.h-8   { height: var(--sp-8);   } .h-10  { height: var(--sp-10);  } .h-12  { height: var(--sp-12);  }
.h-16  { height: var(--sp-16);  } .h-20  { height: var(--sp-20);  }

.h-auto  { height: auto; }
.h-fit   { height: fit-content; }
.h-full  { height: 100%; }
.h-screen { height: 100svh; }

/* — height: fractions — */
.h-1\/2  { height: 50%; }
.h-1\/3  { height: 33.333333%; }
.h-2\/3  { height: 66.666667%; }
.h-1\/4  { height: 25%; }
.h-3\/4  { height: 75%; }

/* — min / max — */
.min-w-0      { min-width: 0; }
.min-h-0      { min-height: 0; }
.min-h-screen { min-height: 100svh; }
.max-w-full   { max-width: 100%; }
.max-h-full   { max-height: 100%; }
.max-w-sm     { max-width: 400px; }
.max-w-md     { max-width: 640px; }
.max-w-lg     { max-width: 960px; }
.max-w-xl     { max-width: 1200px; }

/* — flex basis (pairs well with flex-wrap rows) — */
.basis-1\/2  { flex-basis: 50%; }
.basis-1\/3  { flex-basis: 33.333333%; }
.basis-2\/3  { flex-basis: 66.666667%; }
.basis-1\/4  { flex-basis: 25%; }
.basis-3\/4  { flex-basis: 75%; }
.basis-full  { flex-basis: 100%; }


/* ============================================================
   BORDER, RADIUS, SHADOW
   ============================================================ */
.border        { border: 1px solid var(--primary-200); }
.border-top    { border-top: 1px solid var(--primary-200); }
.border-bottom { border-bottom: 1px solid var(--primary-200); }

.rounded-sm   { border-radius: var(--r-sm); }
.rounded      { border-radius: var(--r-md); }
.rounded-lg   { border-radius: var(--r-lg); }
.rounded-xl   { border-radius: var(--r-xl); }
.rounded-full { border-radius: var(--r-full); }

.shadow    { box-shadow: var(--shadow); }
.shadow-lg { box-shadow: var(--shadow-lg); }


/* ============================================================
   POSITION
   ============================================================ */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }
.top-0    { top: 0; }
.bottom-0 { bottom: 0; }
.left-0   { left: 0; }
.right-0  { right: 0; }
.z-10     { z-index: 10; }
.z-20     { z-index: 20; }


/* ============================================================
   MISC
   ============================================================ */
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.object-cover    { object-fit: cover; }
.object-center   { object-position: center; }
.opacity-0       { opacity: 0; }
.cursor-pointer  { cursor: pointer; }
.transition      { transition: all 250ms ease; }
.aspect-square   { aspect-ratio: 1 / 1; }
.aspect-video    { aspect-ratio: 16 / 9; }


/* ============================================================
   TABLET — mobile shell centered on medium screens
   (768px–1023px keep the mobile layout, centered in a 430px shell)
   ============================================================ */
@media (min-width: 768px) and (max-width: 899px) {
  html {
    background-color: #f1f1f3;
  }

  body {
    max-width: var(--app-max-width);
    margin-inline: auto;
    border-inline: 1px solid var(--primary-300);
    box-shadow: var(--shadow);
  }
}

/* ============================================================
   DESKTOP — real desktop layout starts here (≥900px)
   The 430px mobile-shell cap is lifted so the page can use the
   full width. Section-specific desktop styles live in the
   page stylesheets (e.g. css/pages/home.css).
   ============================================================ */
@media (min-width: 900px) {
  /* Scale the whole desktop UI up ~12.5% (16px → 18px). Because fonts and
     the spacing scale are in rem, and line-heights are unitless, this grows
     font sizes, spacing, and line-heights together. Tune the value to taste. */
  html {
    font-size: 18px;
  }

  body {
    max-width: none;
    margin-inline: 0;
    border-inline: 0;
    box-shadow: none;
  }

  /* Nudge large body text up a touch on desktop (1.25rem → 1.4rem). */
  .text-md { font-size: 1.25rem; }
  .text-lg { font-size: 1.5rem; }
  .text-xl { font-size: 1.75rem; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}