@layer reset, tokens, base, objects, utilities;

@layer tokens {
  :root {
    --sab-color-plum: #321a3d;
    --sab-color-aubergine: #24102d;
    --sab-color-mauve: #8c3570;
    --sab-color-rose: #b44e82;
    --sab-color-blush: #f8edf3;
    --sab-color-ivory: #fcfaf8;
    --sab-color-white: #fff;
    --sab-color-charcoal: #211d22;
    --sab-color-muted: #777177;
    --sab-color-success: #2e9d56;
    --sab-color-whatsapp: #25d366;
    --sab-color-gold: #b4935a;
    --sab-font-latin: Inter, Avenir, "Segoe UI", Arial, sans-serif;
    --sab-font-arabic: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
    --sab-step--1: clamp(.82rem, .8rem + .1vw, .9rem);
    --sab-step-0: clamp(1rem, .96rem + .2vw, 1.125rem);
    --sab-step-1: clamp(1.25rem, 1.13rem + .6vw, 1.65rem);
    --sab-step-2: clamp(1.56rem, 1.31rem + 1.25vw, 2.35rem);
    --sab-step-3: clamp(1.95rem, 1.48rem + 2.35vw, 3.45rem);
    --sab-space-1: .375rem;
    --sab-space-2: .75rem;
    --sab-space-3: 1rem;
    --sab-space-4: 1.5rem;
    --sab-space-5: 2.25rem;
    --sab-space-6: clamp(3rem, 7vw, 6rem);
    --sab-radius-sm: .375rem;
    --sab-radius-md: .75rem;
    --sab-shadow-soft: 0 1rem 3rem rgb(36 16 45 / 9%);
    --sab-container: 80rem;
    --sab-reading: 47.5rem;
    --sab-duration: 180ms;
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: light; scroll-behavior: smooth; }
  body, h1, h2, h3, p { margin-block-start: 0; }
  img, picture, video { display: block; max-inline-size: 100%; block-size: auto; }
  button, input, select, textarea { font: inherit; }
}

@layer base {
  body {
    margin: 0;
    background: var(--sab-color-ivory);
    color: var(--sab-color-charcoal);
    font-family: var(--sab-font-latin);
    font-size: var(--sab-step-0);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
  }
  :lang(ar) { font-family: var(--sab-font-arabic); }
  html[dir="rtl"] body { letter-spacing: 0; }
  h1, h2, h3 { color: var(--sab-color-aubergine); font-weight: 650; line-height: 1.16; text-wrap: balance; }
  h1 { font-size: var(--sab-step-3); }
  h2 { font-size: var(--sab-step-2); }
  h3 { font-size: var(--sab-step-1); }
  a { color: var(--sab-color-mauve); text-underline-offset: .18em; }
  a:hover { color: var(--sab-color-aubergine); }
  :focus-visible { outline: 3px solid var(--sab-color-rose); outline-offset: 3px; }
  ::selection { background: var(--sab-color-blush); color: var(--sab-color-aubergine); }
  input, select, textarea {
    min-block-size: 2.875rem;
    border: 1px solid color-mix(in srgb, var(--sab-color-muted), transparent 55%);
    border-radius: var(--sab-radius-sm);
    background: var(--sab-color-white);
    color: inherit;
    padding: .65rem .8rem;
  }
  button, .button, input[type="submit"] {
    min-block-size: 2.875rem;
    border: 1px solid var(--sab-color-plum);
    border-radius: var(--sab-radius-sm);
    background: var(--sab-color-plum);
    color: var(--sab-color-white);
    cursor: pointer;
    padding: .7rem 1.15rem;
    transition: background-color var(--sab-duration), border-color var(--sab-duration), color var(--sab-duration);
  }
  button:hover, .button:hover, input[type="submit"]:hover { background: var(--sab-color-aubergine); color: var(--sab-color-white); }
}

@layer objects {
  .sabaya-container { inline-size: min(calc(100% - 2 * var(--sab-space-4)), var(--sab-container)); margin-inline: auto; }
  .site-main { min-block-size: 60vh; padding-block: var(--sab-space-6); }
  .sabaya-flow > * + * { margin-block-start: var(--sab-space-4); }
}

@layer utilities {
  .screen-reader-text {
    position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
  }
  .screen-reader-text:focus {
    z-index: 100000; inset-block-start: var(--sab-space-3); inset-inline-start: var(--sab-space-3);
    inline-size: auto; block-size: auto; clip: auto; clip-path: none; padding: var(--sab-space-2) var(--sab-space-3);
    background: var(--sab-color-white); color: var(--sab-color-aubergine); box-shadow: var(--sab-shadow-soft);
  }
}

@media (max-width: 40rem) {
  .sabaya-container { inline-size: min(calc(100% - 2 * var(--sab-space-3)), var(--sab-container)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}