/* ============================================================================
   SRH ALOQOD — صرح العقود للعقارات
   components.tokens.css · component layer
   ----------------------------------------------------------------------------
   Layer 3 of the colour system. Load AFTER tokens.css.

       Layer 1  Primitives  ·  the only place a hex may appear
       Layer 2  Semantic    ·  roles
       Layer 3  Component   ·  this file — components and their states

   Every value here resolves to a semantic token. No hex, and no primitive is
   referenced directly: a component that reaches past its role layer would
   silently outlive any future change to that role.

   Contrast figures are measured WCAG 2.1 ratios.
   AA: 4.5 body text · 3.0 large text and non-text UI. Disabled is exempt.
   ========================================================================= */

:root {

  /* ==========================================================================
     SURFACE  ·  the inverse container
     A dark region is a component too: without its own tokens the CSS would
     have to reach past the component layer to paint it.
     ====================================================================== */
  --surface-inverse-bg:       var(--surface-inverse);
  --surface-inverse-text:     var(--text-on-inverse);   /* 15.35            */

  /* ==========================================================================
     BUTTON  ·  primary
     The label colour flips with state, because ink reads on the mid accent
     and sand reads on the dark ones. Proven by measurement, not preference.
     ====================================================================== */
  --button-bg:                var(--action-primary);    /* + label = 5.06    */
  --button-text:              var(--action-text);
  --button-border:            var(--action-primary);

  --button-bg-hover:          var(--action-hover);      /* + label = 4.12    */
  --button-text-hover:        var(--action-text-alt);
  --button-border-hover:      var(--action-hover);

  --button-bg-active:         var(--action-active);     /* + label = 5.88    */
  --button-text-active:       var(--action-text-alt);
  --button-border-active:     var(--action-active);

  --button-bg-disabled:       var(--surface-hover);     /* + label = 2.70    */
  --button-text-disabled:     var(--text-disabled);
  --button-border-disabled:   var(--border-default);

  --button-focus-ring:        var(--focus-ring);        /* 4.39 over accent  */

  /* ==========================================================================
     INPUT / FIELD
     The border carries the state, never the fill: a changing fill would move
     the perceived text contrast on every interaction.
     ====================================================================== */
  --field-bg:                 var(--surface-subtle);
  --field-text:               var(--text-primary);      /* 12.16             */
  --field-placeholder:        var(--text-muted);         /* 6.41             */
  --field-border:             var(--border-default);     /* 2.46             */

  --field-border-hover:       var(--border-strong);      /* 9.46             */

  --field-bg-focus:           var(--surface-subtle);
  --field-border-focus:       var(--border-strong);
  --field-focus-ring:         var(--focus-ring);         /* 12.16            */

  --field-bg-disabled:        var(--surface-hover);
  --field-text-disabled:      var(--text-disabled);      /* 2.70 · exempt    */
  --field-border-disabled:    var(--border-default);

  --field-label:              var(--text-secondary);     /* 10.37            */

  /* ==========================================================================
     CARD
     There is no surface lighter than the page by design, so a card is
     separated by a border, not by a lighter fill.
     ====================================================================== */
  --card-bg:                  var(--surface-subtle);
  --card-border:              var(--border-default);
  --card-title:               var(--text-primary);       /* 12.16           */
  --card-body:                var(--text-muted);         /*  6.41           */
  --card-bg-hover:            var(--surface-hover);
  --card-focus-ring:          var(--focus-ring);

  /* ==========================================================================
     NOTICE / ALERT
     ====================================================================== */
  --notice-bg:                var(--surface-accent);
  --notice-text:              var(--text-on-accent);     /* 11.82           */
  --notice-border:            var(--border-accent);
  --notice-bg-hover:          var(--surface-accent-hover);
  --notice-focus-ring:        var(--focus-ring);         /* 11.82           */

  /* ==========================================================================
     LINK
     accent-600 measures 3.03 as text on sand and is therefore never used
     here; text-link (accent-800) is the only accent that carries body text.
     ====================================================================== */
  --link-text:                var(--text-link);          /*  5.88           */
  --link-text-hover:          var(--text-primary);       /* 13.32           */
  --link-text-visited:        var(--text-link);
  --link-underline:           var(--text-link);
  --link-focus-ring:          var(--focus-ring);
  --link-text-inverse:        var(--text-on-inverse);    /* 15.35           */

  /* ==========================================================================
     DIVIDER
     Visual separation only. A divider that carries state meaning must use
     border-strong instead — border-subtle measures 1.70.
     ====================================================================== */
  --divider-color:            var(--border-subtle);      /*  1.70           */
  --divider-color-strong:     var(--border-strong);      /*  9.46           */

  /* ==========================================================================
     FOCUS  ·  system-wide
     ====================================================================== */
  --focus-ring-color:         var(--focus-ring);          /* light + accent */
  --focus-ring-color-inverse: var(--focus-ring-inverse);  /* dark surfaces  */
  --focus-ring-width:         2px;
  --focus-ring-offset:        2px;

  /* ==========================================================================
     DISABLED  ·  system-wide
     ====================================================================== */
  --disabled-bg:              var(--surface-hover);
  --disabled-text:            var(--text-disabled);       /* 2.70 · exempt  */
  --disabled-border:          var(--border-default);
}