/* ============================================================================
   SRH ALOQOD — صرح العقود للعقارات
   components.css · component implementation
   ----------------------------------------------------------------------------
   Load order — each layer may only reach the one directly above it:

       tokens.css                     Primitives -> Semantic colour
       radius.tokens.css              Primitive radius -> Component radius
       shadow.tokens.css              Inherited shadow scale (no consumer yet)
       components.tokens.css          Semantic   -> Component colour
       typography.tokens.css          Primitives -> Type roles
       spacing.tokens.css             Primitives -> Semantic spacing
       component-spacing.tokens.css   Semantic   -> Component spacing
       components.css                 Component  -> declarations   (this file)

   No colour literal, no primitive, no semantic colour token, and no raw font
   metric appears below. Colour arrives through the component colour layer,
   distance through the component spacing layer, and text through the type
   roles, which is the only layer the brief directs components to read from.
   ========================================================================= */


/* ============================================================================
   RESOLVED DECISIONS — the raw values in this file and where each came from
   ----------------------------------------------------------------------------
     Button border width   1.5px    [EVIDENCED]        Button.jsx inset ring
     Field border width    1.5px    [EVIDENCED]        Input.jsx border
     Divider width         1px      [DECIDED]          visual evaluation
     Radius                —        [RESOLVED]         radius.tokens.css holds
                                                       the inherited scale; each
                                                       component reads the value
                                                       its original already had
     Link underline        —        [BROWSER VERIFIED] browser-positioned with
                                                       skip-ink; no number at all
     Motion                .15s/ease [DECIDED]          one duration, one easing,
                                                       colour changes only

   Nothing in this file is unresolved.
   ========================================================================= */
:root {
  /* [EVIDENCED] 1.5px is the one documented width in the system. It appears
     in Input.jsx as a real border and in Button.jsx as an inset ring. Two
     components are not a scale, so no border scale exists: each of the two
     carries its own token, and nothing else inherits from them. */
  --button-border-width: 1.5px;
  --field-border-width:  1.5px;

  /* [DECIDED] Motion — deliberately not a scale.
     .15s ease is the only motion evidenced anywhere in the project
     (Button.jsx). It is reused rather than extended, and applies to
     functional colour changes only. readme.md constrains motion to
     "subtle opacity or tone shifts, no scale/bounce effects", so
     transform, scale, translate and keyframes are excluded by the brand
     itself, not merely by preference. */
  --motion-duration: .15s; /* @kind other */
  --motion-easing: ease; /* @kind other */

  /* [DECIDED — visual evaluation]
     Divider has no inherited width in the original system.
     1px was approved after comparing 1px / 1.5px / no divider
     across dense and sparse layouts.
     It is intentionally NOT derived from Button/Input's 1.5px. */
  --divider-width: 1px;

}


/* ============================================================================
   FOCUS · central system
   Declared first so every component inherits one ring.
   ========================================================================= */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Ink on ink is invisible: the plain ring measures 1.15 over a dark surface.
   Marking a subtree re-points the ring for everything inside it, so no
   component needs a dark-surface case of its own. */
.srh-surface-inverse,
[data-surface="inverse"] {
  --focus-ring-color: var(--focus-ring-color-inverse);
}


/* ============================================================================
   SURFACES
   ========================================================================= */

.srh-surface-inverse,
[data-surface="inverse"] {
  background: var(--surface-inverse-bg);
  color: var(--surface-inverse-text);
}


/* ============================================================================
   BUTTON
   Three sizes, each with its own spacing token pair. The label colour flips
   with state: ink reads on the mid accent, sand reads on the dark ones.
   ========================================================================= */

.srh-btn {
  font-family:     var(--type-button-font);
  font-size:       var(--type-button-size);
  font-weight:     var(--type-button-weight);
  line-height:     var(--type-button-leading);
  letter-spacing:  var(--type-button-tracking);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);

  background: var(--button-bg);
  color: var(--button-text);
  /* the original mechanism: no border, an inset ring drawn with box-shadow.
     This is a border, not elevation — it is deliberately NOT in the shadow
     layer and must never be moved there. */
  border: none;
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border);
  border-radius: var(--button-radius);          /* pill — restored */

  padding-block:  var(--button-md-padding-block);
  padding-inline: var(--button-md-padding-inline);

  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* box-shadow is listed because the button's border is drawn with it */
  transition: background-color var(--motion-duration) var(--motion-easing),
              color var(--motion-duration) var(--motion-easing),
              box-shadow var(--motion-duration) var(--motion-easing);
}

/* size ladder — three distinct rungs, never collapsing onto each other */
.srh-btn--sm {
  padding-block:  var(--button-sm-padding-block);
  padding-inline: var(--button-sm-padding-inline);
}
.srh-btn--md {
  padding-block:  var(--button-md-padding-block);
  padding-inline: var(--button-md-padding-inline);
}
.srh-btn--lg {
  padding-block:  var(--button-lg-padding-block);
  padding-inline: var(--button-lg-padding-inline);
}

.srh-btn:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--button-bg-hover);
  color: var(--button-text-hover);
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-hover);
}

.srh-btn:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--button-bg-active);
  color: var(--button-text-active);
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-active);
}

.srh-btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--button-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.srh-btn:disabled,
.srh-btn[aria-disabled="true"] {
  background: var(--button-bg-disabled);
  color: var(--button-text-disabled);
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-disabled);
  cursor: not-allowed;
}


/* ============================================================================
   INPUT / FIELD
   State rides on the border, never the fill: a changing fill would move the
   measured text contrast on every interaction.
   ========================================================================= */

.srh-field-group {
  display: flex;
  flex-direction: column;
  gap: var(--field-label-gap);
}

.srh-label {
  font-family:    var(--type-label-font);
  font-size:      var(--type-label-size);
  font-weight:    var(--type-label-weight);
  line-height:    var(--type-label-leading);
  letter-spacing: var(--type-label-tracking);
  color: var(--field-label);
  display: block;
}

.srh-field {
  font-family:    var(--type-input-font);
  font-size:      var(--type-input-size);
  font-weight:    var(--type-input-weight);
  line-height:    var(--type-input-leading);
  letter-spacing: var(--type-input-tracking);

  background: var(--field-bg);
  color: var(--field-text);
  border: var(--field-border-width) solid var(--field-border);
  border-radius: var(--field-radius);           /* 14px — restored */

  padding-block:  var(--field-padding-block);
  padding-inline: var(--field-padding-inline);

  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--motion-duration) var(--motion-easing),
              color var(--motion-duration) var(--motion-easing),
              border-color var(--motion-duration) var(--motion-easing);
}

.srh-field::placeholder { color: var(--field-placeholder); opacity: 1; }

.srh-field:hover:not(:disabled) { border-color: var(--field-border-hover); }

/* outline + offset, so focus never reflows the field */
.srh-field:focus-visible {
  background: var(--field-bg-focus);
  border-color: var(--field-border-focus);
  outline: var(--focus-ring-width) solid var(--field-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.srh-field:disabled,
.srh-field[aria-disabled="true"] {
  background: var(--field-bg-disabled);
  color: var(--field-text-disabled);
  border-color: var(--field-border-disabled);
  cursor: not-allowed;
}
.srh-field:disabled::placeholder { color: var(--field-text-disabled); }

.srh-field-helper {
  font-family:    var(--type-helper-font);
  font-size:      var(--type-helper-size);
  font-weight:    var(--type-helper-weight);
  line-height:    var(--type-helper-leading);
  letter-spacing: var(--type-helper-tracking);
  color: var(--field-placeholder);
}


/* ============================================================================
   CARD  ·  the muted tone, with a decided shadow
   ----------------------------------------------------------------------------
   HISTORICALLY INHERITED
       light  sand-50 (lighter than page)  ->  --shadow-md
       muted  sand-200 (darker than page)  ->  no shadow, no border
       dark   ink-900                      ->  --shadow-dark-md

   CURRENT APPROVED SYSTEM                                        [DECIDED]
       muted  sand-200                     ->  --card-shadow (shadow-sm)

   Removing sand-50 in the colour round deleted the light tone, so muted now
   has to carry the primary card as well. sand-200 against a sand-100 page
   measures 1.04, so colour alone cannot separate them — a grid of cards reads
   as one block. shadow-sm is the lightest fix in the inherited scale.

   The border remains absent: it was invented, never inherited, and the
   shadow now does that work, and Card carries no border width of any kind.
   light and dark tones are still NOT implemented.
   ========================================================================= */

.srh-card {
  background: var(--card-bg);
  box-shadow: var(--card-shadow);               /* [DECIDED] — see above */
  /* no border — separation comes from the shadow, not a line */
  border-radius: var(--card-radius);            /* 22px — restored */
  padding: var(--card-md-padding);
  transition: background-color var(--motion-duration) var(--motion-easing);
}

.srh-card--sm { padding: var(--card-sm-padding); }
.srh-card--md { padding: var(--card-md-padding); }
.srh-card--lg { padding: var(--card-lg-padding); }

.srh-card__title {
  font-family:    var(--type-h3-font);
  font-size:      var(--type-h3-size);
  font-weight:    var(--type-h3-weight);
  line-height:    var(--type-h3-leading);
  letter-spacing: var(--type-h3-tracking);
  color: var(--card-title);
}

.srh-card__body {
  font-family:    var(--type-body-font);
  font-size:      var(--type-body-size);
  font-weight:    var(--type-body-weight);
  line-height:    var(--type-body-leading);
  letter-spacing: var(--type-body-tracking);
  color: var(--card-body);
}

.srh-card--interactive { cursor: pointer; }
.srh-card--interactive:hover { background: var(--card-bg-hover); }
.srh-card--interactive:focus-visible {
  outline: var(--focus-ring-width) solid var(--card-focus-ring);
  outline-offset: var(--focus-ring-offset);
}


/* ============================================================================
   BADGE
   Bound to the tokens fixed in the previous round. The overline role carries
   the wide tracking, which the Arabic guard drops automatically.
   ========================================================================= */

.srh-badge {
  font-family:    var(--type-overline-font);
  font-size:      var(--type-overline-size);
  font-weight:    var(--type-overline-weight);
  line-height:    var(--type-overline-leading);
  letter-spacing: var(--type-overline-tracking);

  padding-block:  var(--badge-padding-block);
  padding-inline: var(--badge-padding-inline);

  display: inline-block;
  border-radius: var(--badge-radius);           /* pill — restored */
}


/* ============================================================================
   NOTICE / ALERT
   ⚠ PARTIAL — colour and type only.
   Notice has NO approved spacing tokens: the audit found no component and no
   documented measurement anywhere in the project. Padding is therefore absent
   rather than guessed, which means an unstyled notice will render with its
   RESOLVED — padding, radius and border are now set from tokens whose
   provenance is recorded in component-spacing.tokens.css. Nothing here is a
   free-hand number: each traces to an evidenced value elsewhere in the system.
   ========================================================================= */

.srh-notice {
  font-family:    var(--type-body-sm-font);
  font-size:      var(--type-body-sm-size);
  font-weight:    var(--type-body-sm-weight);
  line-height:    var(--type-body-sm-leading);
  letter-spacing: var(--type-body-sm-tracking);

  background: var(--notice-bg);
  color: var(--notice-text);
  border: var(--notice-border-width) solid var(--notice-border);
  border-radius: var(--notice-radius);
  padding: var(--notice-inset-block) var(--notice-inset-inline);
  transition: background-color var(--motion-duration) var(--motion-easing),
              color var(--motion-duration) var(--motion-easing);
}

.srh-notice--interactive { cursor: pointer; }
.srh-notice--interactive:hover { background: var(--notice-bg-hover); }
.srh-notice--interactive:focus-visible {
  outline: var(--focus-ring-width) solid var(--notice-focus-ring);
  outline-offset: var(--focus-ring-offset);
}


/* ============================================================================
   LINK
   The mid accent measures 3.03 as text on sand and is never used here.
   Needs no spacing of its own, so nothing is UNDEFINED.
   ========================================================================= */

.srh-link {
  font-family:    var(--type-link-font);
  font-size:      var(--type-link-size);
  font-weight:    var(--type-link-weight);
  line-height:    var(--type-link-leading);
  letter-spacing: var(--type-link-tracking);

  color: var(--link-text);

  /* [DECIDED — browser verified]
     The former 2px had no valid source: its only occurrence sat in a
     file marked @ds-adherence-ignore. Measured relative values were then
     tested and rejected — 0.20em, 0.25em and 0.30em all crossed the ink of
     deep Arabic descenders such as ج and ع, because their depth reaches
     ~0.43em and no single number clears every glyph at every size.

     Testing the four strategies in a real browser showed the balance comes
     from letting the browser place the underline and skip the ink, not from
     pushing the line further down. Arabic and Latin both read correctly, and
     nothing here is a hand-tuned number that could drift with size or zoom. */
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  text-underline-offset: auto;
  text-decoration-color: var(--link-underline);
  transition: color var(--motion-duration) var(--motion-easing),
              text-decoration-color var(--motion-duration) var(--motion-easing);
}

.srh-link:hover   { color: var(--link-text-hover); }
.srh-link:visited { color: var(--link-text-visited); }

.srh-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--link-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.srh-surface-inverse .srh-link,
[data-surface="inverse"] .srh-link,
.srh-link--inverse {
  color: var(--link-text-inverse);
  text-decoration-color: var(--link-text-inverse);
}


/* ============================================================================
   DIVIDER
   RESOLVED + GUARDED — the separating margin is --stack-md (24px), the system's
   standard vertical rhythm step, not a divider-specific invention.

   GUARD (Visual QA 2026-08-24, approved): a divider inside a gap-spaced parent
   would otherwise add its 24px on top of that parent's gap, double-spacing the
   rule. The named-class rule below covers .srh-stack / .srh-grid, and the
   :where() rule after it covers ANY flex or grid parent — including containers
   the system does not name, which was the one ambiguous case QA flagged.
   Consequence: in a gap-spaced parent the gap alone governs. If a divider must
   keep its own margin there, opt out with .srh-divider--spaced.
   ========================================================================= */

.srh-divider {
  border: 0;
  border-block-start: var(--divider-width) solid var(--divider-color);
  margin-block: var(--divider-margin-block);
}

/* In a gap-spaced container the gap already provides the separation. */
.srh-stack > .srh-divider,
.srh-grid > .srh-divider { margin-block: 0; }

/* Guard for unnamed containers: any flex/grid parent, gap-spaced or not. */
:where(div, section, article, aside, main, form, li, figure):where(
  [style*="display:flex"], [style*="display: flex"],
  [style*="display:grid"], [style*="display: grid"]
) > .srh-divider { margin-block: 0; }

/* Explicit opt-out — restores the 24px inside a gap-spaced parent. */
.srh-divider--spaced { margin-block: var(--divider-margin-block) !important; }

.srh-divider--strong {
  border-block-start-color: var(--divider-color-strong);
}


/* ============================================================================
   DISABLED · shared utility for non-form elements
   The reduced contrast here is intentional and WCAG-exempt.
   ========================================================================= */

.srh-is-disabled,
[aria-disabled="true"]:not(button):not(input):not(select):not(textarea) {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  border-color: var(--disabled-border);
  cursor: not-allowed;
  pointer-events: none;
}


/* ============================================================================
   REDUCED MOTION
   Honoured system-wide. Nothing here animates position or size, so removing
   duration costs no meaning — only the colour fade disappears.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}


/* ============================================================================
   GUARD RAILS
   ----------------------------------------------------------------------------
   · No colour literal, no primitive, no semantic colour token here.
   · No raw font metric — every text rule reads a type role.
   · No raw spacing — every distance reads a component spacing token.
   · Logical properties only: padding-block / padding-inline / border-block-start.
     Never padding-left, margin-right, left or right.
   · outline is never removed; :focus-visible is the only focus mechanism.
   · The dark-surface ring comes from the marked subtree, not from a component.
   · Notice padding, Divider margin: UNDEFINED. Do not fill them in locally.
   · Radius comes from radius.tokens.css via a per-component token. Never use
     a raw radius here, and never reintroduce a single global radius: Button
     and Badge are pills, Card is 22px, Input is 14px.
   · Notice radius is UNDEFINED — do not round it locally.
   · The card is the muted tone with a decided shadow: no border, and its
     separation comes from --card-shadow. Do not add a border back, and do not
     strip the shadow on the grounds that the historical muted tone had none.
   · Two box-shadows exist here and they are different things: --card-shadow
     is elevation, while the Button's inset ring is a BORDER drawn with
     box-shadow, exactly as the original component did. Never move the button
     ring into the shadow layer, and never hard-code either value.
   · The link's underline is browser-positioned with skip-ink. Never add an
     offset number back — no px and no em; it was tested and rejected.
   · Border width is not a scale. Each width belongs to one component: Button
     and Field hold 1.5px on evidence, Divider holds 1px by decision. Do not
     lend any of them to another component, and do not create border-sm/md/lg.
   · Three component-specific widths exist and they are not a scale: Button
     1.5px and Field 1.5px are evidenced, Divider 1px is decided. Card, Badge
     and Notice carry no border at all. Do not create border-sm/md/lg.
   · Divider width is a component-specific decided value. Do not generalise it
     into a border scale or reuse it as a Button/Input border width.
   · Motion is one duration and one easing, on functional colour changes only.
     Never animate transform, scale, translate, shadow geometry or keyframes —
     readme.md rules those out as brand direction, not preference.
   · Layout and responsive remain out of scope.
   · This file has no effect on the frozen SRH ALOQOD master logotype.
   ========================================================================= */