/* ROMOZ DESIGN SYSTEM — global stylesheet
 * شركة رموز العربية · Romoz Arabia Co.
 * Arabic-first, RTL by default. Flat surfaces, four brand colors, one motif. */
@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./assets/fonts.css";

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-regular);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body,[dir]{unicode-bidi:isolate}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-regular);color:var(--text-strong);line-height:var(--lh-display);margin:0;text-wrap:pretty}
p{margin:0 0 var(--sp-3);text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{font-weight:var(--fw-semibold)}
a{color:var(--romoz-brown);text-decoration:none;border-bottom:1px solid var(--brown-a35);transition:color .15s ease,border-color .15s ease}
a:hover{color:var(--brown-t75);border-bottom-color:var(--romoz-brown)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--romoz-beige);color:var(--romoz-brown)}
img{max-width:100%;display:block}

/* ============ Type utilities ============ */
.rz-hero{font-family:var(--font-display);font-size:var(--fs-hero);line-height:var(--lh-display);color:var(--text-strong)}
.rz-title{font-family:var(--font-display);font-size:var(--fs-title);line-height:var(--lh-display);color:var(--text-strong)}
.rz-h2{font-family:var(--font-display);font-size:var(--fs-h2);line-height:var(--lh-display);color:var(--text-strong)}
.rz-h3{font-family:var(--font-body);font-size:var(--fs-h3);font-weight:var(--fw-semibold);line-height:1.4;color:var(--text-strong)}
.rz-lead{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--text-body)}
.rz-body{font-size:var(--fs-body);line-height:var(--lh-body)}
.rz-small{font-size:var(--fs-small);line-height:var(--lh-body)}
.rz-caption{font-size:var(--fs-caption);line-height:1.5;color:var(--text-faint)}
.rz-eyebrow{font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);color:var(--text-muted);display:block}
.rz-eyebrow--latin{letter-spacing:var(--ls-eyebrow);text-transform:uppercase}
.rz-num{font-variant-numeric:lining-nums tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}
.rz-en{font-family:var(--font-body);direction:ltr;unicode-bidi:isolate;display:block;color:var(--text-muted)}
.on-dark .rz-hero,.on-dark .rz-title,.on-dark .rz-h2,.on-dark .rz-h3{color:var(--text-on-dark)}
.on-dark{color:var(--text-on-dark)}
.on-dark .rz-eyebrow,.on-dark .rz-en{color:var(--text-on-dark-muted)}
.on-dark .rz-caption{color:var(--brown-t50)}
.on-dark a{color:var(--romoz-beige);border-bottom-color:rgba(211,200,182,.4)}
.on-dark a:hover{color:var(--beige-t25);border-bottom-color:var(--beige-t25)}

/* ============ Rule / divider ============ */
.rz-rule{border:0;border-top:var(--hairline) solid var(--border-strong);margin:var(--sp-3) 0;opacity:1}
.rz-rule--quiet{border-top-color:var(--border)}
.on-dark .rz-rule{border-top-color:var(--romoz-beige)}
.on-dark .rz-rule--quiet{border-top-color:var(--brown-t75)}

/* ============ Button ============ */
.rz-btn{font-family:var(--font-body);font-size:var(--fs-small);font-weight:var(--fw-semibold);line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:44px;padding:0 var(--sp-4);border-radius:var(--radius-btn);border:1.5px solid transparent;background:var(--romoz-brown);color:var(--beige-t50);cursor:pointer;text-decoration:none;box-shadow:none;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.rz-btn:hover{background:var(--brown-t75)}
.rz-btn:active{background:var(--romoz-brown)}
.rz-btn--secondary{background:transparent;color:var(--romoz-brown);border-color:var(--romoz-brown)}
.rz-btn--secondary:hover{background:var(--beige-t25);color:var(--romoz-brown)}
.rz-btn--secondary:active{background:var(--romoz-beige)}
.rz-btn--quiet{background:transparent;color:var(--romoz-brown);border-color:transparent;padding:0 var(--sp-2)}
.rz-btn--quiet:hover{background:var(--beige-t25)}
.rz-btn--on-dark{background:var(--romoz-beige);color:var(--romoz-brown)}
.rz-btn--on-dark:hover{background:var(--beige-t75)}
.rz-btn--on-dark.rz-btn--secondary{background:transparent;color:var(--romoz-beige);border-color:var(--romoz-beige)}
.rz-btn--on-dark.rz-btn--secondary:hover{background:rgba(211,200,182,.14);color:var(--beige-t25)}
.rz-btn--sm{min-height:36px;font-size:var(--fs-caption);padding:0 var(--sp-3)}
.rz-btn--lg{min-height:56px;font-size:var(--fs-body);padding:0 var(--sp-5)}
.rz-btn[disabled],.rz-btn[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* ============ Card ============ */
.rz-card{background:var(--surface-card);border:var(--hairline) solid var(--border);border-radius:var(--radius-card);padding:var(--sp-4);box-shadow:none}
.rz-card--muted{background:var(--beige-t75);border-color:transparent}
.rz-card--accent{background:var(--surface-accent);border-color:transparent}
.rz-card--dark{background:var(--surface-dark);border-color:transparent;color:var(--text-on-dark)}
.rz-card--flat{border-color:transparent;padding:0;background:transparent}

/* ============ Tag ============ */
.rz-tag{font-family:var(--font-body);font-size:var(--fs-caption);font-weight:var(--fw-medium);line-height:1;display:inline-flex;align-items:center;gap:var(--sp-1);padding:7px 12px;border-radius:999px;background:var(--romoz-beige);color:var(--romoz-brown);border:1px solid transparent}
.rz-tag--outline{background:transparent;border-color:var(--brown-a20);color:var(--text-muted)}
.rz-tag--solid{background:var(--romoz-brown);color:var(--beige-t50)}
.on-dark .rz-tag--outline{border-color:var(--brown-t75);color:var(--romoz-beige)}

/* ============ Field ============ */
.rz-field{display:flex;flex-direction:column;gap:var(--sp-2)}
.rz-field__label{font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--text-strong)}
.rz-field__input{font-family:var(--font-body);font-size:var(--fs-small);color:var(--text-body);min-height:48px;padding:0 var(--sp-3);background:var(--beige-t25);border:var(--hairline) solid var(--brown-a20);border-radius:var(--radius-btn);width:100%}
textarea.rz-field__input{padding:var(--sp-3);min-height:120px;line-height:var(--lh-body)}
.rz-field__input::placeholder{color:var(--text-faint)}
.rz-field__input:hover{border-color:var(--brown-t50)}
.rz-field__input:focus{border-color:var(--romoz-brown);outline:none;box-shadow:0 0 0 3px var(--brown-a10)}
.rz-field__hint{font-size:var(--fs-caption);color:var(--text-faint)}

/* ============ Layout helpers ============ */
.rz-stack{display:flex;flex-direction:column}
.rz-row{display:flex;align-items:center}
.rz-grid{display:grid;gap:var(--sp-4)}
.rz-sheet{background:var(--surface-page);padding:var(--sp-6) var(--margin-outer)}

@media (max-width:768px){
  :root{--fs-hero:40px;--fs-title:30px;--fs-h2:24px;--fs-h3:20px;--fs-lead:18px;--fs-body:16px}
}