/* Property Inspect — Color tokens
 * Brand triad: anthracite (primary), off-white (surface), green (accent only).
 * Tint steps follow the brand guidelines: 100/90/80/60/40/20.
 */

:root {
  /* Anthracite scale */
  --anthracite-100: #363E48;
  --anthracite-90:  #4A515A;
  --anthracite-80:  #5E656D;
  --anthracite-60:  #878C92;
  --anthracite-40:  #B0B2B6;
  --anthracite-20:  #D7D9DB;

  /* Off-white scale */
  --off-white-100: #EEF0F6;
  --off-white-90:  #F0F2F7;
  --off-white-80:  #F2F4F8;
  --off-white-60:  #F5F6FA;
  --off-white-40:  #F8F9FC;
  --off-white-20:  #FBFCFD;

  /* Green scale — ACCENT ONLY. Never for large fills. */
  --green-100: #61CE70;
  --green-90:  #72D37F;
  --green-80:  #83D88E;
  --green-60:  #A5E2AC;
  --green-40:  #C7EBCA;
  --green-20:  #E9F5EA;
  /* Accessible text green — 4.97:1 on white, use wherever green is foreground
     text on a light background (kickers, labels). On-dark contexts keep green-100. */
  --green-text: #288034;

  /* Semantic aliases — use these in product code */
  --color-bg:              #FFFFFF;
  --color-surface:         var(--off-white-100);
  --color-surface-muted:   var(--off-white-60);
  --color-border:          #E1E4EC;
  --color-border-strong:   var(--anthracite-20);

  --color-text:            var(--anthracite-100);
  --color-text-muted:      var(--anthracite-80);
  --color-text-subtle:     var(--anthracite-80);
  --color-text-inverse:    #FFFFFF;

  --color-accent:          var(--green-100);
  --color-accent-hover:    #4FBF5F;
  --color-accent-soft:     var(--green-20);

  /* Functional status — derived from brand but widened for UI needs */
  --color-success:         #3FAE52;
  --color-success-soft:    #E7F6EA;
  --color-warning:         #E0A62B;
  --color-warning-soft:    #FCF3DC;
  --color-danger:          #D14848;
  --color-danger-soft:     #FBE5E5;
  --color-info:            #5577B0;
  --color-info-soft:       #E7EDF7;

  /* Brand gradients */
  --gradient-primary: linear-gradient(135deg, #363E48 0%, #404F5E 50%, #567084 100%);
  --gradient-deep:    linear-gradient(135deg, #3A4550 0%, #363E48 50%, #1F252D 100%);
  --gradient-primary-radial: radial-gradient(circle at 30% 20%, #567084 0%, #404F5E 45%, #363E48 100%);
  --gradient-deep-radial:    radial-gradient(circle at 70% 30%, #3A4550 0%, #363E48 50%, #1F252D 100%);

  /* Shadows — anthracite-tinted, never pure black */
  --shadow-sm: 0 1px 2px rgba(54, 62, 72, 0.06), 0 1px 3px rgba(54, 62, 72, 0.04);
  --shadow-md: 0 4px 12px rgba(54, 62, 72, 0.08), 0 2px 4px rgba(54, 62, 72, 0.04);
  --shadow-lg: 0 16px 40px rgba(54, 62, 72, 0.12), 0 4px 12px rgba(54, 62, 72, 0.06);
  --shadow-focus: 0 0 0 3px rgba(97, 206, 112, 0.35);
}