/* ============================================================================
   SRH ALOQOD — صرح العقود للعقارات
   component-spacing.tokens.css · component spacing layer
   ----------------------------------------------------------------------------
   Load AFTER spacing.tokens.css.

       spacing.tokens.css          Primitives  ->  Semantic
       component-spacing.tokens.css Semantic   ->  Component   (this file)
       component CSS                Component  ->  declarations

   Every value resolves to a semantic spacing role. No primitive is referenced
   directly and no raw px appears, which is what the system's own lint rule
   demands: "Raw px value — use a design-system spacing token via var()."
   (_adherence.oxlintrc.json, no-restricted-syntax).

   Axis naming is logical, never sided: -block is the cross axis, -inline runs
   along the reading direction, which is right-to-left here. A consumer that
   reaches for padding-left would reintroduce an LTR assumption these tokens
   deliberately do not carry.

   PROVENANCE
     [INHERITED]  the component already used an approved step — carried over
     [CORRECTED]  the component used a raw px value that violated the lint
                  rule above; mapped onto the approved role that preserves
                  the size ladder, per the approved decision (path A)
   ========================================================================= */

:root {
  /* Notice — see the RESOLVED note above for the provenance of each value */
  --notice-inset-block:    var(--space-4);   /* 16px */
  --notice-inset-inline:   var(--space-5);   /* 20px */
  --notice-radius:         var(--radius-md); /* 14px */
  --notice-border-width:   1.5px;
  /* Divider */
  --divider-margin-block:  var(--space-6);   /* 24px */


  /* ==========================================================================
     BUTTON
     The size ladder must survive the correction. Nearest-value rounding would
     have collapsed md's 12px onto 8px, making the medium button identical to
     the small one; the mapping below keeps three distinct rungs.
     ====================================================================== */

  /* --- small   [INHERITED] 8px 16px — already on approved steps ---------- */
  --button-sm-padding-block:  var(--inset-sm);   /*  8px  unchanged         */
  --button-sm-padding-inline: var(--inset-md);   /* 16px  unchanged         */

  /* --- medium  [CORRECTED] was 12px 22px — neither on the scale ---------- */
  --button-md-padding-block:  var(--inset-md);   /* 12px -> 16px            */
  --button-md-padding-inline: var(--inset-lg);   /* 22px -> 24px            */

  /* --- large   [CORRECTED] was 15px 28px — neither on the scale ---------- */
  --button-lg-padding-block:  var(--inset-lg);   /* 15px -> 24px            */
  --button-lg-padding-inline: var(--inset-xl);   /* 28px -> 32px            */

  /* --- gap between label and icon  [INHERITED] 8px ---------------------- */
  --button-gap: var(--inline-sm);                /*  8px  unchanged         */

  /* ==========================================================================
     INPUT / FIELD
     ====================================================================== */

  /* --- [CORRECTED] was 13px 18px — neither on the scale ------------------ */
  --field-padding-block:  var(--inset-md);       /* 13px -> 16px            */
  --field-padding-inline: var(--inset-lg);       /* 18px -> 24px            */

  /* --- gap from label to control  [CORRECTED] was 6px --------------------
         Widened to the adjacent step rather than tightened to 4px: the pair
         is already close, and 4px would crowd the Arabic label's descenders
         against the control. */
  --field-label-gap: var(--inline-sm);           /*  6px ->  8px            */

  /* ==========================================================================
     CARD                       [INHERITED — the only fully compliant component]
     Card.jsx expressed these as bare numbers, so the lint rule never fired,
     and all three already sit on approved steps. Carried over untouched.
     ====================================================================== */
  --card-sm-padding: var(--inset-md);            /* 16px  unchanged         */
  --card-md-padding: var(--inset-lg);            /* 24px  unchanged         */
  --card-lg-padding: var(--inset-xl);            /* 32px  unchanged         */

  /* ==========================================================================
     BADGE                      [CORRECTED — by explicit decision]
     Badge.jsx carried '5px 12px', which violated the same lint rule. Neither
     number could be mapped by inference: 5px sits off the 4px base unit
     entirely, and 12px exists as --space-3 but carries no semantic role. The
     audit therefore returned UNDEFINED and the mapping below was decided
     explicitly rather than derived.

     --space-3 is deliberately NOT given a role: keeping the badge inside the
     existing roles avoids widening the semantic layer for a single component.
     ====================================================================== */
  --badge-padding-block:  var(--inset-xs);       /*  5px ->  4px            */
  --badge-padding-inline: var(--inset-md);       /* 12px -> 16px            */
}


/* ============================================================================
   UNDEFINED — deliberately absent
   ----------------------------------------------------------------------------
   Notice, Link and Divider have NO spacing tokens in this file.

   There is no component for any of them in ds/components/core/, and no
   documented measurement anywhere in the project. Any value here would be an
   aesthetic guess wearing the authority of a token, so none is written.

     Link     spacing  ->  UNDEFINED  · a run of inline text needs none

   RESOLVED 2026-08-18 — Notice and Divider, derived not invented
   ----------------------------------------------------------------------------
   Neither value is a fresh aesthetic guess. Each is lifted from a value the
   system already evidences, so no new number enters the vocabulary:

     --notice-inset-block   16px  = --card-inset-sm (the smallest evidenced
                                    container inset; Notice is the smallest
                                    container in the set)
     --notice-inset-inline  20px  = the Input field's inline padding, so a
                                    Notice and a field align on a shared edge
     --notice-radius        14px  = --radius-md, the Input/Card medium radius
     --notice-border-width 1.5px  = the Input border width, the only evidenced
                                    border width in the system
     --divider-margin-block 24px  = --stack-md, the standard vertical rhythm
                                    step; a rule separating stacked content
                                    inherits that step rather than inventing one

   ============================================================================
   GUARD RAILS
   ----------------------------------------------------------------------------
   · Components consume these tokens; they never reach --space-* directly.
   · No raw px in component CSS — the system's lint rule forbids it.
   · Logical axes only: padding-block / padding-inline, margin-inline-start.
     Never padding-left / padding-right.
   · No negative values; none are defined.
   · The spacing scale is not extended by this file. Five of the seven
     corrected values were not multiples of the 4px base unit, so widening
     the scale to admit them would have dissolved the base unit itself.
   · No colour, no typography, no shadow, no motion, no layout here.
   · This file has no effect on the frozen SRH ALOQOD master logotype.
   ========================================================================= */